You are comfortable with web technologies, but new to HTML emails? This article aims to save you a lot of hassle.

Why should it be different from what I know?

To display HTML content, email softwares use a HTML rendering engine (like browsers use to interpret the code and view the pages). It is different for each one and is often limited at the whim of the software in question. Result? Gmail does not like CSS. Outlook does not like background images. Hotmail wants to stylize the titles by himself. And so on.

How to code

Avoid div layouts

Only tables are sufficiently supported from one software to another to ensure a good display everywhere.

Do not rely on stylesheets.

External CSS are to be banned completely. CSS included using a style tag in the beginning of code will partly work (except on gmail and android). Some software may rewrite the names of your classes, refuse some selectors, etc. As for CSS3, well, uh, someday maybe.

In terms of CSS, one thing works rather well: media queries for mobile platforms (their support can vary, but is good enough to be worth it).

Otherwise, it is better to code your styles inline, directly on the elements concerned.

Learn more about media queries >

Apply your styles on td.

Especially for padding, but also for the default font styles. Warning: if you style a td which itself contains nested tables, properties are not inherited by lower-level tables! For example:

<td style="font-family:Arial;">
<p>This will be Arial</p>
</td>
<td style="font-family:Arial;">
<table>
<tr>
<td><p>This might not be Arial</p></td>

Padding and width do not mix.

If you set the padding on a td, do not set its width. It will only break. The solution to set both: use a nested table

Good Bad
<td valign="top" width="200">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 10px;">…
<td valign="top" width="200" style="padding: 10px;">…

Forget about floats.

They are not supported on recent versions of Outlook (eg 2007 +). Instead, use the align attribute on html tables and images.

Use background images only if they are totally decorative.

Eg behind your table of contents (do not forget to specify a background color as well!). More on background images

Keep in mind that things will move.

Some software misinterpret the margin, many ignore the line-height, etc. Be flexible. You cannot have perfect control over spacing in HTML emails.

Embedded fonts do not work.

In fact, all external resources (except for images) won’t work well. If you must use non-web fonts, integrate them as images. But do not forget to provide an alternative text equivalent and do it sparingly.

Javascript, forms, animated gif and hover state neither

Yup. Even :hover doesn’t work.

Conclusion

Your code will probably be quite long, deeply indented and full of tables. And you will have to test it with as many email accounts as possible. It is normal.

If you must say goodbye to some eye candy, remember that the important thing is that your email is working and that you can reach your readers.

And don’t forget to keep it simple!

Read as well : Design for email