HTML E-mail Essential Techniques
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.
Techniques
- Minimise nesting of the layout tables.
- Use the
rowspanattribute to create consistent gaps alongside several other cells; the width and extent of the gap is then controlled from one place. - If things must align in columns, create a cell structure which will put them in the same column.
- If column widths must change, either end the current layout table and start a new one immediately after it or use a nested table.
- Use any normal web developer toolkit, especially if has Outline Table Cells and Outline Images features. (All these lines will affect alignment and spacing, so turn them off from time to time!)
- Hide element names when outlining because they will affect the layout and alignment.
- Do not use the
marginandpaddingattributes from CSS: some will support them, others will always apply the same defaults and others will always zero them. - Images behind text are best avoided.
<td background>works but the image gets repeated if it is smaller than the cell. (I want to do more testing with this.) - Avoid all attributes on the
<body>element. Webmail systems tend to strip it, so you’ll need code to work around that anyway. - A background colour will fill the viewport if you nest your e-mail within a layout table using
<table width="100%" bgcolor="#12346">. - Link styles must be set in a
styleattribute on every link to override e-mail client defaults and overrule webmail page styles. - Use
<td><img src alt width height>for graphics. - Use
<td width>on the first cell in each column because automatic column sizing often varies between and within e-mail programs and web browsers. - Use
<td height>if you are trying to spread out some blocks of content within a fixed-height layout table; otherwise some clients will bunch them up together. - Set text sizes in
pxif you want webmail clients to display them at your desired size. - To make images join up with each other in cells which touch,
style="display: block;"is sometimes necessary on the<img>. Hotmail is particularly affected by this. - Firebug and other web developer tools are useful in HTML e-mails if used differently.
- Syntactically valid HTML is more likely to be parsed correctly.
Audience
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.)
Testing
Roughly in order of precedence:
- Outlook Express 6 (or the professional versions of it; usually fine)
- Outlook 2003 (usually fine)
- Yahoo! Mail (usually fine because it uses an
<iframe>) - Gmail (sometimes messes up text sizes)
- Windows Live Mail (usually messes up gaps and text sizes)
- Outlook 2007 (vertical alignment between images and text doesn’t work)
- Lotus Notes 8.5 (configurations are often badly screwed up, so test on a fresh install; it’s used by businesses “because it does so much”)
- Outlook 2010 (haven’t tried this yet)
- Apple Mail (haven’t tried this yet)
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.