How to code HTML emails

Despite the mis-givings of some, HTML emails are here to stay. Why? Because a well executed campaign, is an effective marketing tool.

However, if the email doesn’t display correctly in your subscribers inbox then design and strategy are mute points.

There a dozen and more different email clients around; Hotmail, Gmail, Yahoo Mail, Outlook 2003, Outlook 2007, Entourage… the list goes on.

Unfortunately, most of these email clients interpret code slightly differently. Resulting in at best, a slightly disjointed looking email; or at worst, an email that is unreadable.

So here are two tips that will help to standardise the layout of your emails, no matter which email client is being used.

1. Use inline styles

Many good people have spent years, encouraging web designers to separate the presentation (CSS) from mark-up (XHTML). Calling on us to leave inline styles behind.

And to a large degree they’ve been successful; people saw the light and embraced it.

But if you want your emails to display correctly in as many email platforms as possible, you’re going to have to use inline styles.

If you don’t use inline styles some email clients will overwrite your styles with their own.

For instance, if you don’t place inline styles in the <a> tag, Hotmail will display the link in the default blue:

<p style="font-family:arial, verdana, sans-serif; font-size: 14px; color:#FFFFFF; margin:0;">Here is a sentence that <a href="#" title="A link">contains a link</a>. I wonder colour it will be?</p>

That link becomes virtually invisible if it’s sitting on a blue background:

Here’s what you need to do:

<p style="font-family:arial, verdana, sans-serif; font-size: 14px; color:#FFFFFF; margin:0;">Here is a sentence that <a href="#" title="A link" style="font-family:arial, verdana, sans-serif; font-size: 14px; color:#FFFFFF; margin:0; text-decoration:underline;">contains a link</a>. I wonder colour it will be?</p>

Note that I’ve even specified text-decoration:underline; Who knows, maybe the email client styles links without an underline.

I’ve also used:

color:#FFFFFF;

Rather than the shorthand:

color:#FFF;

This is because some some email clients don’t recognise the shortened three character hexadecimal code.

The message is to play it safe. If you want links to have an underline, don’t assume that that is the default setting. Define it in an inline style.

I know it’s painful, I know you thought those bad old days were long gone, but if you want a successful email campaign, inline styles will help you on your way.

2. Use tables to layout your email

Again, another blast from the not-so-glorious past, when tables ruled and mark-up was bogged down by endless <tr> and <td> tags.

But guess what, because of the inconsistencies between email clients, tables are the most stable way of laying out your email.

Again, if you want to style your tables in any way use inline styles:

<table cellpadding="0" cellspacing="0" align="center" bgcolor="#000964" style="background-color:#000964">
<tr>
<td height="25">&nbsp;</td>
<td bgcolor="#CECECE" style="background-color:#CECECE">&nbsp;</td>
<td></td>&nbsp;</td>
</tr>
</table>
So there are two very basic tips that should create a stable base from which to work.

There are other quirks that you need to watch out for, but with enough testing they can be ironed out.

This entry was posted on Wednesday, March 3rd, 2010 at 2:35 pm and is filed under Code, Tips. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.