HTML emails add a professional look to website correspondence and help to continue the brand experience during communications with your clients. If only they weren’t such a pain to build!

A wild west of tables, spacer GIFs and font tags

I used to have nightmares about HTML emails. You had to get into the IE5, y2k frame of mind, banish most semantic best practices and aims for elegant script. However, there are tools to make the task significantly easier.

The first stop has to be the Campaign Monitor Blog, a superb resource for the latest news in all things email. A particularly useful resource is their CSS support guide which outlines what you can and (crucially) cannot expect popular email clients to support. The view is dismal, there’s not even support for CSS background images in Outlook 2007 and 2010.

Building

Get yourself a good template from which to build your email. Check out the HTML Email Boilerplate for a nicely commented example. Don’t be afraid to nest tables. It’s often the only control you have over spacing and alignment.

Remember to build a separate text-based version of each email template, this can be a text file with URLs in the place of link text and some basic text spacing. Also remember to clearly mark content place-holders, for example, instead of putting in a dummy name, I prefer to use %%FIRST-NAME%% which is easier to spot in tests. Sending emails containing dummy content is hugely embarrassing!

Testing

You can’t rely on regular browser testing; even online email clients behave in different ways in each browser. The best start is to validate your HTML to iron out any incorrect table nesting, missing tags and absent alt attributes. This can avoid silly mistakes from turning into hour-long head-scratchers. The next tip isn’t free, but is completely worthwhile; unless you have the full suite of email clients available (Outlook 2003, 2007, 2010, Apple Mail, Android Gmail, etc) I’d stump up a month’s subscription to Litmus.

Sending

OK, you’ve built and tested a glorious email template that’s all ready to be sent. Unless you are really geared up for it, I’d recommend a third party service for sending your emails. Mailchimp offers a reasonably priced package along with spam filter testing and best practice guides. Also remember that response can vary depending on your subject line and the time you send your email. No-one notices an email added to their unread stack on Monday morning or when they’re leaving the office on a Friday afternoon.