Here’s the rules that I follow when producing an HTML Email. Some of these rules may seem obvious, some may seem stupid and some may go against everything you may have learned about web standards, best practices, semantic html and accessibility. This last one is a hard thing to accept. And trust me, I’m all about those things when it comes to building web sites and web pages but the #1 rule of all is that EMAILS ARE NOT WEB PAGES! They just look like them and are built the same way. But whereas a web page may be viewed on 3 to 6 primary browsers, emails are viewed many, many more.
First you have the email clients, Outlook 2007/2003, Entourage 2008/2004, Lotus Notes 6.5/7/8, Outlook Express, Windows Mail, Apple Mail and Thunderbird. In my experience, these are the most common currently. There’s also many other POP3/IMAP clients but I don’t encounter them too often. (Yes, I know you use them, but if you’re reading this you’re not the target audience I work with usually). Second you have the wonderful web-based clients such as MSN, Yahoo, Gmail and the wonderful OWA. Multiply these clients by your expected browser/platform combinations, too, because OWA IE is completely different than OWA Firefox. Third, don’t forget about people that don’t have images turned on. These people need a reason to download your creative and if your email can’t be understood without images it might just get skipped. And last there’s the text-based email which isn’t used too much anymore but should still be considered.
Anyway, here’s my list. Its by no means complete and will always be growing so check back often for updates.
HTML/CSS
- 100% XHTML Transitional compliant
- ISO-8859-1 encoding
- NOT UTF-8 despite normal best practices
- All characters above ASCII 127 must be HTML-encoded
- ALL CSS must be inline (style=”…”)
- The exception is to have style in the header for a:pseudo tags but they must only be used to provide additional rules for anchors such as hover and visited
- Entire email must be wrapped in 100% wide table whose background matches the body’s background
- Email should be table-based
- Avoid floats, use padding and margins sparingly
- Text-based styles should be applied to parent <td> tag. Outlook does not pass styles to child <td> tags so you must re-apply them to children.
- Avoid using <p> tags for paragraphs, instead use <br /><br /> to separate blocks of text
- Make sure that all images have ALT text
- All images must be absolutely linked
- All images must use their true dimensions (you must not stretch an image, for instance a 1×1 gif spacer, Outlook will use the true dimension and your creative will look weird)
- Background images must not be used
- The only exception is if it’s not important to the message and a backup background color is specified.
- Avoid soft-returns to fix widows, instead use non-breaking spaces between the last few words
- All images should have the style display:block; applied to them otherwise Hotmail will render them with additional spaces
General
- All emails must contain a postal address that can be used to send opt-outs to