When building an email one of the most challenging (and important) tasks for a designer is making sure it renders properly across all popular email clients.
A professionally designed email is a major contributing factor in the success of a campaign, so it is important that you invest a little extra time in following the guidelines below when designing and building your email.
Last Updated: 16 August 2011
Table
- Table based layout MUST be used when making an email template.
- Try to keep the width of your table to a maximum of 600px. Although wider templates will still work, it is recommended to keep it under 600px.
- It is highly recommended to use nested tables instead of splitting or merging multiple cells. Table nesting is far more reliable in keeping a consistent layout across all the major email clients.
- Specify the width of the cells using HTML elements (not CSS).
For e.g.<td width="50"></td>and NOT<td style="width:50px;"></td> - Some email clients won't display background colors or images specified in your CSS or the
<body>tag. The trick around this is to wrap your main table with a container table (with a 100% width). You can then apply the background image/colour to the container table.
NOTE: Some email clients, like Outlook 2007/2010, will NOT display background images. Always have an appropriate fallback background colour.
For e.g.
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td bgcolor=”#000000” background=”http://impactdata.com.au/images/background.jpg”>
Your email code goes here.
</td>
</tr>
</table>
CSS
- Only inline CSS should be used. NO external stylesheets should be attached as they will not be recognised.
- Anything within
<style></style>tag will be ignored when the email is displayed in some email clients (for.e.g. Gmail). It is strongly recommended to use INLINE CSS to style your email.
An easy way to do this is to style your email as usual within the<style></style>tag. Then once it has been finalised, use a free online service like Premailer to automatically move all your CSS inline. - The new Windows Live Hotmail will automatically set the email width as the maximum fixed width defined in your HTML code. This means that it’s only
showing the table that has a fixed width defined (for e.g. width=”600”).
To fix this, we need to add the following code in the<style></style>tag before the body:
<style type=”text/css”>
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%;}
</style>
Images
- Images must be hosted externally (online). If you have web hosting, place your
images in a directory. Use the absolute links to then refer to the images, i.e.
their full URL.
For e.g.
<img style=”display:block;” src=”https://impactdata.com.au/images/header.jpg” width=”700” height=”198”> - Always specify the width, height and ALT tag of an image. This will help keep your layout consistent even if images are not being displayed (blocked by recipient)
- Add the following inline CSS
style=”display:block;”to images. This will eliminate gaps between images when the template is viewed in Hotmail and Gmail. - If a URL is attached to an image, please ensure that the border attribute is set
to 0 (NOT the style). Otherwise, Internet Explorer will automatically add a blue
border around that image.
For e.g.
<img src=”https://secure1.impactdata.com.au/images/header.jpg” width=”700” height=”198” border=”0” style=”display:block;”> - Avoid using images as borders around your text areas. This will restrict
the text area of your email to the size of the images. Since different browsers
process padding, margin, etc. differently, this will sometimes result in white
gaps in your email.
It is recommended that you use solid colours as borders, as this will allow the text area to expand and contract as required. This means that shadows and gradients should be avoided on borders of text areas. - Sometimes Outlook will not display image borders. To work around this, wrap your image
in a
<div>tag and apply the border style to the div instead of the image.For e.g.<div style=”border:1px solid #000;”><img src=”http://secure1.impactdata.com.
au/images/Mypicture.jpg” width=”220” height=”250” ></div> - Make sure to use the “Save for Web” function when saving PNG images. We recommend PNG-24. Support for PNG images in some email clients is still buggy, and certain types of PNG will not be displayed.
Fonts
- We recommend using web-friendly fonts for editable text areas of your email. This will ensure that the email is displayed in the same way for all the recipients.
- The font-family, size and colour should be specified in the style of EVERY table
containing text. This should be repeated for each nested table within the
parent table.
For e.g.
<table width=”100%” border=”0” cellspacing=”0” cellpadding=”0” style=”fontfamily:’
Times New Roman’, Times, serif; font-size:15px; color:#484a4a;”>
Mobile
- Keep the width of your email under 600px. This will ensure that your email is still readable when scaled down on mobile devices.
- Most mobile email clients use webkit to automatically adjust the size of your text. If you would like to avoid the automatic re-size, add the following CSS rule to disable it:
-webkit-text-size-adjust: none; - If you would like to style your email specifically for mobile devices, use the @media query to overwrite any inline CSS.
To ensure the @media query only applies when the email is viewed on a mobile device, add the following condition:
@media only screen and (max-device-width: 480px) {
your style here
}
Mobile stylesheets are well-supported on most mobile devices (iPhone, iPad, Android, Palm).
Testing
- Testing is crucial to ensure that your template has been coded properly. Please make sure you allocate some time to do so before sending out emails.
- Every email client have slight differences as to how they display emails. We recommend that you test your template in atleast the five(5) most popular clients: Hotmail, Yahoo, Gmail, Outlook and Apple Mail
- If you send a high amount of emails frequently, it might be worth investing in an email testing service, like Litmus. It is the easiest way to test your emails across multiple clients quickly.
Alternatively, you can create accounts in Yahoo, Hotmail, Gmail, Apple Mail and set up an account to be accessed via Outlook. Add these email addresses to your SMART database and then send test emails to these accounts. View your test email across the different clients to ensure that it displays correctly.
