Following the guidelines set out below should result in emails which render correctly in Outlook 2007, yahoo mail, gmail, hotmail and Apple Mail.

1. Use a vailid doctype
2. Specify a charset
3. Use tables for the layout
4. Nest tables
5. Use inline styles, not stylesheets
6. Avoid background images
7. Avoid placing important information within images
8. Use padding and widths to obtain correct spacing
9. Know when to use border and when to make a fake border
10. Avoid using movies, Flash, JavaScript, rollover images or forms

These rules may seem backward and strange but they provide a solid foundation for coding emails which will render reliably.

Resoning behind these guidelines

Use a valid doctype

Although the doctype will be stripped out by online email clients, such as hotmail, and by some types of email broadcasting software, it’s still worth including as it enables the HTML to be tested for validity prior to sending. Using XHTML transitional helps ensure the coding is nice and clean.

Specify a charset

Declaring a charset facilitates pre-send testing and helps keep coding consistent.

Use tables for the layout

Following the release of Outlook 2007, Microsoft switched the rendering engine from Internet Explorer to Word. In spite of an ongoing campaign to create email standards, there seems no prospect of this being changed. As you might imagine, Word is not good at rendering HTML – Divs, link styles and background images, and various other things suffer.

Nest Tables

Split or combined cells are a nightmare to navigate though and alter in HTML, and they don’t render well in some email clients. Many will disagree with this, saying that nested tables break and slow down rendering. However, I’ve found this method to be both totally reliable with regard to rendering, and much easier to manipulate when making layout changes.

Use inline styles

Gmail and Lotus notes will not support style sheets. Additionally Hotmail is shaky when it comes to applying styles that are not inline. Many email clients and email broadcasting applications strip out the head of the email. The most reliable method of applying styles is inline on each individual element. Giving each paragraph tag an inline style specifying font size, colour and so on, is the most dependable method.

Avoid using background images

Outlook 2007 has very unreliable background image support. Some people claim to have got background images to display in Outlook 2007. Indeed when testing, you may see them in Outlook 2007 on your PC, but others may not.

Avoid placing important information within images

If images are not loaded by default in Outlook 2007, the recipient will see a long security message followed by the alt tag. Aside from this, if the ratio of images to text is deemed too high, the email could be blocked by some spam filters. If the message is important, place it in real HTML text.

Use padding and widths to obtain correct spacing

Email rendering can be made very reliable using these rules:

1. Ensure that images, the main containing cells of tables, and the tables themselves have a width.
2. Use padding rather than empty cells to provide gutters and space between items.
3. Place padding on parent table cells rather than the items inside. So, if a space of 16px is required below a paragraph, place a padding value of 16px on the bottom of the containing table cell.
4. Use longhand CSS for border margin and padding values: padding-top; x; padding-right: x; etc.
5. The rendering of paragraphs varies widely across email clients. Regrettably the most dependable method of getting the correct spacing around them is to place each heading and paragraph in a table cell. This seems laborious, but in practice it’s not too bad. Giving the containing table cell margins of zero top and bottom will prevent Hotmail adding unwanted extra spacing above and below.
6. Outlook 2007 will calculate the width of a table cell and then add the padding to the width unless a width is specified. Once a width has been set, the padding will be applied inside the width.
7. To stop hotmail placing an unwanted space below images, give the images a float value, either left or right, and display them inline.

Borders and fake borders

Nearly consistent borders can be achieved by placing left and right borders on the individual <td>s in each row. Note that the widths of the border will be added to the overall width of the table. So if a table is 200px wide and a border of 1px each side is added, the table width needs to be reset to 198px. However gmail will still get this wrong. While the layout won’t break on a 1px border, close examination will reveal that one border has been pushed out by a pixel.

The most reliable way to get borders to behave consistently is to wrap the content requiring the border inside the central column of another table. The left and right columns of the containing table should be made of empty cells whose width equals required border width, and with the background colour set to the required border colour. The attached HTML file contains an example of this technique.

Avoid using movies, Flash, JavaScript, rollover images or forms

Movies, Flash, JavaScripts and other kinds of interactivity don’t work reliably in emails. It’s far safer to link to movies, surveys, forms and other interactive things.

In conclusion

It’s sad that all the wonderful techniques available when laying out web pages are not available when building emails. However, the rules outlined above hopefully offer a guide to producing emails which will render consistently across many popular email clients. Remember, when it comes to emails content is king…

Futher reading & resources

All email clients have their quirks, Campaign Monitor very kindly maintain a list of supported and unsupported features, and the Email Standards Project maintain up to date assesments of email client rendering performance.

Example HTML file.