If you're hand-coding your email campaigns there are significant differences to be aware of between writing HTML for email and HTML for the web. Here we've compiled our Top 10 email design tips to help get you started.
As different email clients differ in the way they display emails there are certain guidelines that need to be followed in order to gain compatibility across the majority of clients. Microsoft Outlook 2007 should be your general compatibility benchmark as it has the most restrictions and accounts for a large percentage of the email clients in use today.
For a complete list of how each email client behaves, the Email Standards Project have published test results that are very thorough. You can see these here: http://www.email-standards.org/
1. Design for the preview pane
It is important to remember that the majority of subscribers will be viewing your email in a preview pane, whether this be in a desktop email client or a webmail client such as Hotmail or Gmail. This means only the top and/or left-hand side of your content will be seen initially and will determine whether your subscriber opens the campaign or deletes it. Another important yet often overlooked aspect is the print size of your campaign. Don't forget that not all email clients will scale to fit the page which makes printing quite ugly if your font is oversized.
Solution: We recommend keeping your HTML campaigns within a 700px table with your content being within the 600-650px point. This will keep your campaign within default print margins (710px) and ensure your content will be visible in preview panes. It's also worth noting that some subscribers use a horizontal preview pane which will only give you 4-5 inches (288-360px) from the top to entice them to open the campaign.
2. Don't use position CSS or style CSS
Many email clients will strip the entire header from HTML emails down to and including the <body> tags. This means that any CSS reference included in the header will be stripped away, making the references in the body useless and your email lose all styling.
Solution: Use in-line CSS styling to style each line/segment of your template individually. This will take longer but in the end you can achieve 95% of the same results without the risk of losing your styles.
Incorrect:
<html>
<head>
<style type="text/css"><!--
body {
background-color: #000000;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
margin-bottom: 10px;
}
.style01 {
color: #c0021e;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
--></style>
</head>
<body>
<p>This is CSS Style 01</p>
</body>
</html>
Correct:
<head>
</head>
<body>
<table bgcolor="#000000" width="100%" height="100%">
<tr>
<td>
<p>This is CSS Style 01</p>
</td>
</tr>
</table>
</body>
</html>
3. Use dark text on a light background
It is recommended that templates/campaigns should have a dark text colour on a light background colour as this is the default for emails (black text on white background). Certain email clients will remove the header of an email and thus remove the tags that define your dark background. This can result in white text on a white background and your template to appear blank.
Solution: Ideally the above recommendations would be followed; however this does not always fit a design spec or a branding colour scheme. To get around this you need to set the background colour of each table or the cell you would like a dark colour.
For Example:
<html>
<body>
<table bgcolor="#000000">
<tr>
<td height="50" width="50">
<p align="center">TEXT</p>
</td>
</tr>
</table>
</body>
</html>
4. Avoid background images
Outlook 2007 and some other email clients will not display table cell background images. Unfortunately, this creates a big problem for table design as you cannot have text floating above designs anymore.
Solution: Templates need to be designed differently to take this into account. For example, instead of having a header image with a gradient and styling across the entire length or width, consider fading to a solid web colour where you would like your text to appear and slicing around the text section. This means the solid section can be replaced with a table cell of the same background colour. You can then insert text which will help keep to your original design and will be displayed correctly in all email clients.
5. Use image mapping carefully
Image maps are an easy and simple way of inserting links into the images in your campaign. However, this practice can have mixed results in email clients; although the majority still support image maps, their functionality when images are turned off is usually non-existent. Another reason not to use image maps is that issues can arise when your campaign is forwarded. Certain email clients will display the links correctly on the initial open but will strip out the code required for them to work when forwarding. The recipient of the forwarded email will not be able to use the links included within the image map. It is worth noting that Gmail does not support image maps at all.
Solution: As this is not a serious issue you can take the risk and use image maps if required. However, to keep to our high compatibility guidelines we recommend slicing your images into sections and piecing them back together within tables. Then apply the relevant links to the sliced sections to keep links as they are intended without the risk of email clients removing them and breaking your campaigns.
6. Avoid image re-sizing
Many email clients do not like the re-sizing of images and you run the risk of your email breaking if you set your image dimensions as a percentage. In Outlook 2007, specifying anything other than the actual dimensions of the images may result in your email rendering incorrectly.
Solution: Make sure all your images are re-sized before you insert them into your template. This keeps your template from breaking and reduces the download size for subscribers.
7. Don't include too many images
Most email clients disable images by default, so if you have no text within your email or start with an image at the top of your template, a subscriber who does not download the images may just see a blank screen in their preview pane and ignore it.
Solution: Setting table and cell dimensions are a good way of holding your content together. Combine that with full descriptive alt image tags and your templates won't be missed. This is also a good tip for accessibility (those with screen readers or mobile devices).
8. Do not embed content
JavaScript, ActiveX and multimedia files such videos, sounds or flash should never be used. Most Anti-Virus programs will detect them and web-based clients will disable them.
Unfortunately, this also applies to embedding data capture forms. The use of scripting and the lack of support will get your template/campaign blocked or flagged as spam.
Solution: Screenshots/images of the media file/form can be used and linked to the content online. This is a great way of keeping your design aesthetics without compromising the email.
9. Avoid exotic fonts
Fonts are a great way to define styles and themes within your emails. However, as with webpages, only the fonts installed on a recipient's computer will be visible. Some webmail clients, such as Gmail, may convert all fonts to the default font for the client.
For example, if you define the font 'Arial' or 'Times New Roman' you have a pretty good chance your content will be visible and display as you intended. On the other hand, if you define a custom or commercial font such as 'Cowboy Bold' in your HTML, it will look fine in the previews on your computer but for anyone who hasn't installed that font on their PC will see a system font like 'Arial' instead. Gmail takes this one step further and will replace the font defined as the body text with a standard font.
Solution: There is no proven way to get around this other than to use images for fancy font titles and reserve standard fonts for content. A popular method (when using in-line CSS) is to define the font-family in order of preference. We suggest setting your custom/commercial fonts first, then similar standard fonts and finally a system font.
To work around the Gmail issue, you can define your font with an in-line style set for either the table, cell or paragraph, like the example above.
10. Include a link to view the email in a web browser
After you have done all the above, there will still be people who cannot view your email correctly. This can be because their company email policy has blocked your images or their browser, computer or device cannot display the code or images.
Resolution: Include a "click here to view online" segment at the top of all your emails. This can be done easily using personalisation tags.
This is your backup in case all else fails and should display your template exactly as it was intended.