HTML E-mail Essential Techniques

Started on 2009-08-13, updated draft on 2010-01-18.

Present-day e-mail clients require the techniques used in web browsers from the mid-1990’s. Yes, it really is that bad and there are very few signs of improvement on Windows. We must continue building for the very lowest denominator.

Avoid all semantic markup. It will introduce gaps you can’t make consistent between e-mail clients and web browsers. Do use layout tables and transparent spacer.gif images for all layout and gaps. Always use style attributes for text formatting but don’t do any gaps or layout with them.



Remember that many people use webmail for e-mail while others use traditional e-mail programs. As such, the rendering in common web browsers is just as important as the rendering in common e-mail programs.

Use the statistics tracking of your e-mail marketing tool to figure out which clients to prioritise. You may be surprised. In my experience, most confirmed views and clicks are from the Outlook Express 6 family of products! (That’s what I use, by the way.)


Roughly in order of precedence:

You could test each webmail client in several web browsers. I usually just test them in Firefox, since that’s already open from doing the build.