Top 10 Gotchas to watch out for when designing HTML for email or eNewsletters

One might reasonably expect that if you write clean and simple HTML, that works across browsers with no problem that it would work fine with email too, right? The answer is a resounding “Nope”. Whether you send HTML email for product/service marketing, news aggregation and dispersal, non-profit marketing, Alumni marketing or other you need to know the pitfalls of rolling your own HTML newsletters.

Email clients are all over the map and much more limited than far downstream browsers. This makes writing HTML for email delivery a veritable minefield of trial and error (e.g. Outlook actually uses MS Word for rendering!)

So from my trials, here are some of the most common gotchas I’ve found when designing HTML emails:

1. All CSS should be “inline”. This is a requirement; many webmail clients will completely strip the head and body tags, in addition to classes on html elements.
   Reference:
   • http://kb.mailchimp.com/article/how-does-the-css-inliner-work
   • http://kb.mailchimp.com/article/css-in-html-email
2. A “doctype” should be added (like Transitional) and also the content-type meta tag (like UTF-8).
   Reference:
   • http://mailchimp.com/resources/guides/html/mailchimp-for-designers/
3. A wrapper div is required. The width should not be set on the body tag, but set on the wrapper div. The standard recommended maximum width for HTML emails is 600px. [Not that fix width may result in iPhone formatting issues.]
4. Use “reset” styles to override a browser’s/email client’s default styling of certain elements. Apply the reset styles to the “wrapper div”.
   Reference:
   • http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
5. Avoid br, hr tags and line-height attribute tags as the default line height is different for each email client.
6. Avoid padding attribute, as Outlook doesn’t understand padding.
7. To enforce line-height and/or spacing between two elements, “margin” attribute is the most reliable.
8. Make sure all images have “alt” tags. In addition, make sure the image container’s size is set appropriately, so that the over-all size of the email remains intact.
9. Last but not the least; never assume the basic things, which are granted in web design, like an anchor tag color or the default font color. This is important because there is no such thing like a default color/font, because each email client would have its own.
10. Last but not the least; never assume the basic things, which are granted in web design, like an anchor tag color or the default font color. This is important because there is no such thing like a default color/font, because each email client would have its own.

Bonus: Pixels are always preferred instead of ems and %s. Note that the iPhone and iPad set a minimum default font size of 13px. This can be overridden, but with caution.
Reference:
• http://www.campaignmonitor.com/blog/post/3447/should-i-use-em-or-px-when-coding-for-html-email/
• http://www.campaignmonitor.com/blog/post/3339/save-your-layout-by-overriding-the-minimum-font-size-on-the-iphone-and/

That’s the list! Please add to the comments with any others that you may have found.