Creating HTML messages that work across major email clients

Answer

Email clients (the software or websites used to view emails) can render HTML and CSS code very differently than web browsers.

This means that even if a designer has spent time and effort creating a web page that works across Internet Explorer, Firefox and other browsers, it is still possible that it will not display as intended in some or all email clients.

Compatibility checks have been run across Outlook 2007, Outlook 2003, Outlook Express 6, Hotmail, Gmail, Yahoo and AOL to help find out how to create an email that will work across all of them.

General Formatting

For the most pain-free experience, keep your email as simple as possible, for example a design that comprises a header image followed by a main content area, and a footer beneath.

Use snappy editorial to engage your readers and avoid javascript, forms, animated gifs and flash animations, instead saving these for inclusion on a microsite page, which can be linked to from your email.

If your email design features a coloured (non-white) background with contrasting text, it's better to avoid assigning the background color to the body tag (either with HTML or CSS) as this may be stripped out by some email clients.

CSS

Support for CSS varies, and is therefore best avoided unless you know for sure which client(s) your readers will be using to view your message.

Linking to external CSS files is largely unsupported and best avoided. Instead, any CSS that is included, should be either embedded (placed between <style> and </style> tags then pasted directly into the HTML view), or inline (applied directly to the HTML tags) eg:

It's important to note however that embedded CSS will not work in Gmail, whilst inline CSS support is limited in Outlook 2007. Refer to the 'further details' at the bottom of this FAQ to view a spreadsheet with further details of exactly what and what's not supported.

Images

Regular gifs (non-animated) and jpg images should display without any major problems, provided that the file size is not large enough to cause the message to be blocked as spam. One exception to this is Windows Live Mail, which automatically blocks all images unless the sender has been 'whitelisted' and asks the recipient whether they wnt to download the images or not.

Some HTML email designs will incorporate background images, and following on from the advice of using tables, the best way of incorporating a background image is to use the background parameter of an HTML table, row or cell tag, eg:

Using the background color parameter of the HTML table, row or cell tag is also a reliable way of adding colour to your HTML emails.

We strongly advise adhering to internet standards for image URLs (see http://tools.ietf.org/html/rfc1738) . This means not using spaces in file or folder names which some programs, like GMAIL, don't support. For example GMAIL will not display images which contain a space in the file or folder name.

In fact - using alphanumeric (0-9, A-Z and a-z) characters only is often the safest option.

Gaps between images

In Firefox and Safari, gaps can appear between images in certain email clients. The fix is to explicitly set all images to display:block. This needs to be done inline to every image, as Gmail will not read styles in the head.

Of course, if your design calls for a number of images all in the same row, then this fix will have them display as block and will push each down to a new line. To remedy this, ensure each image is in a separate td tag. So, if there is a single table cell <td> that has a number of images in it (e.g. navigation links at the top of an email), then you need to create a separate nested table and place each image in its own cell. To be safe, you should also explicitly set the image to align the way you want in the table cell.

So this:

<td><img src="img1" /><img src="img2" /><img src="img3 /></td>

Becomes this:

<td>
    <table><tr>
           <td><img src="img1" align="top" /></td>
           <td><img src="img2" align="top" /></td>
           <td><img src="img3" align="top" /></td> 
    </tr></table>
</td>

Miscellaneous

HTML tables are still the most commonly used method in constructing emails and will give the most reliable results. It is recommended that you always specify widths on the table and table cell tags to ensure your email looks how you expect it to.

Much of what's thought of as 'best practice' for the web cannot be applied to email due to lack of CSS support, but care should still be taken to ensure that code is properly nested (extraneous div tags within a table will cause the table to close early in GMail), and that images have alt text (this can be defined in the image properties dialog box) to help with accessibility.

Further Information

As well as following the guide above, it's a good idea to include a 'show in browser' link at the top of your email and create a text version. These take just moments to add using the in-built functionality in the Editor.

Once you've saved your message, perform a spam-check and send a test copy of the email to as many of the major clients as possible, to iron out any remaining issues.

Getting users to whitelist the address your emails come from can help emails display better in their email client. You can encourage your subscribers to do this by including a link from your email to our whitelisting instruction guide.

Go to the top

FAQ - Creating HTML messages that work across major email clients

Question

Answer

Further Information