Top 10 Email Marketing Design Tips
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/
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 an desktop email client or online with the new versions of Yahoo and AOL mail. This means only the top and or left of your content will be initially seen and will determine whether your subscriber opens the campaign or deletes it. Also an important yet often overlooked aspect is the print size of your campaign, not all email clients will scale to fit the page which makes printing quite ugly if your oversized.
Resolution: 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 ensuring your content will be visible in preview panes. It’s also worth noting 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.
No 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 any CSS reference included in the header will be stripped away making the references in the body useless and your email will lose all styling.
Resolution: Use Inline 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 style="color: #c0021e; font-family: Arial, Helvetica, sans-serif;
font-size: 16px;">This is CSS Style 01</p>
</td>
</tr> </table> </body> </html>
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.
Resolution: Ideally the above recommendations would be followed however this does not always fit a design spec or the clients current colour schemes. 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" style="color:#FFFFFF;">TEXT</p>
</td>
</tr>
</table>
</body>
</html>
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.
Resolution: Templates need to be designed differently taking 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 where you can then insert text which will help keep to your original design that will be displayed correctly in all email clients.
Image mapping
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 none. Another reason not to use image maps is the forwarding of campaigns, certain email clients although displaying the links correctly on initial open will strip out the code required for them to work when forwarding, which is obviously not good as the receiver 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.
Resolution: As this is not a serious issue you can take the risk and use image maps if you like however to keep to our high compatibility guidelines we recommend slicing your images into sections and piecing them back together within tables like you would do in the above background images example. Then applying the relevant links to the sliced sections, this way you can keep links as they are intended without the risk of email clients removing them and breaking your campaigns.
Image sizing
Email clients do not like the resizing of images as a general rule and you run the risk of your email breaking if you set your image dimensions as a percentage or in Outlook 2007′s case anything other than the actual dimensions.
Resolution: Make sure all your images are re-sized before you insert them into your template, this will keep your template from breaking and reduce the download size for subscribers.
Too many images
Most email clients disable images by default, although this is easily enabled you should consider this in your email design. 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.
Resolution: 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)
No embedding
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.
- This unfortunately goes for forms as well, the use of scripting and the lack of support will get your template/campaign blocked or flagged as spam.
Resolution: Screenshots or images of the media file or form that link to the file/form online are a great way of keeping your design aesthetics without compromising the email.
Fonts
Fonts are a great way to define styles and themes within your emails however just like webpages only the fonts installed on a persons computer will be visible. In some case (Gmail) not even then.
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, however should you define a custom or commercial font such as ‘Cowboy Bold’ in your HTML it will look fine in the previews on your computer however when anyone that hasn’t installed that font on their PC tries to view your email they 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.
Resolution: 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 Inline CSS) is to define the font-family in order of preference, you would set your custom/commercial fonts first then similar standard fonts and finally a system font.
For Example:
<p style="font-family:Cowboy, Calibri, Georgia, Verdana">FONT EXAMPLE</p>
Would display:
“FONT EXAMPLE”
in the font you have installed in order from left to right.
To get around the Gmail issue you can define your font with an inline style set for either the table, cell or paragraph, like the example above.
View email online
After you have done all the above there will still be people that cannot view your email correctly, either because their company email policy has blocked your images or the 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.