Best Practices & Considerations when writing HTML Emails

Question

I've been developing websites for over a decade now, but quickly found that many of my habits in developing for the web are useless when developing for email clients. This has caused me an enormous amount of frustration, so I thought I would ask a question that would hopefully surface the best practices and necessary considerations for others like myself who may find themselves designing for gmail, outlook, etc. from time to time.

Example: <style>...</style> vs inline CSS.

In short: what transfers over from the web-world to the email-world, and what doesn't.

Answer 1

Inline css and tables - think web development circa 2000 and you'll be fine. Campaign monitor have an excellent resource for what stuff email clients can deal with. Also use http://www.emailonacid.com/ for testing - saves having to send loads of tests.

Answer 2

I have been doing these (at quite times) for my work for a while now. There are many pitfalls with HTML emails. Different Email clients render HTML differently from each other and make IE6 look advanced.

Here's a summery of what I've learned so far.

• Use in-line CSS: Styles aren't always supported.
• Use table layouts: I know, but div layouts are css dependent and many of the email clients can't cope.
• Don't use rowspan: This causes weird spacing issues.
• Don't use background images: Support for these is limited.
• Style image tags with "display:block": This fixes weird spacing issues with hotmail.
• If using multiple tables nest them in one parent table: This stops more weird spacing issues.
• Don't use Javascript: Again not supported very well.
• Make sure your email is legible with no images: The user may not load them.
• Provide an online version and link to it: This lets users see the intended content, even if their email client is terrible.
• Test, test, test: Just because it works in one email client doesn't mean it works in others. A big got ya is Outlook 2007. It uses word to render HTML (sigh).

This is far from a comprehensive list, but should set most people on the right track.

Answer 3

I myself found this guide very useful as well: Guide to CSS support in email clients.

Answer 4

You may find this article helpfull: http://articles.sitepoint.com/article/code-html-email-newsletters#

Answer 5

This is good too, so see what inline CSS is supported in what email browser: http://www.campaignmonitor.com/css/

I and also recomend litmusapp (google it!). This a s a good tool for checking things.