Building a rock-solid HTML email

Designing for email is about getting to the point and making the most of the brief chance you have with your subscribers. You only get one shot, so it's worth employing as many tricks in the book as possible to make sure your message gets through. The underlying principles are all about respecting your readers by giving them something valuable in return for their time which is, after all, the reason they signed up to hear from you in the first place.

A Note Before We Get Started

Some of the suggestions that I'm going to make won't apply to every list, company or product. As always with email, test anything new and see how it performs to determine what's best for your subscribers.


Same same, but different

Before getting into the details, there are some uncomfortable facts that those new to HTML email should be aware of. Building an email is not like building for the web. While web browsers continue their onward march towards standards, many email clients have stubbornly stayed put. Some have even gone backwards. In 2007, Microsoft switched the Outlook rendering engine from Internet Explorer to Word. Yes, as in the word processor. Add to this the quirks of the major web-based email clients like Gmail and, sprinkle in a little Lotus Notes and you’ll soon realize how different the email game is.

While it’s not without its challenges, rest assured it can be done. In my experience the key is to focus on three things. First, you should keep it simple. The more complex your email design, the more likely is it to choke on one of the popular clients with poor standards support. Second, you need to take your coding skills back a good decade. That often means nesting tables, bringing CSS inline and following the coding guidelines I’ll outline below. Finally, you need to test your designs regularly. Just because a template looks nice in now, doesn’t mean it will next week.












This is really important. Avoid using puzzling or cryptic sender names, subject lines, preheaders or copy. This will just confuse your readers and make them more likely to delete your email or mark it as junk.

Tell your readers who you are, exactly why you're emailing them, and exactly what they're going to get out of the experience. Have all of this as close to the top of the email as you can get it. This means as soon as your email is opened, your intentions and identity are clear, and your proposition won't be overlooked.

Make sure your sender name, subject line, preheader, and your 'above the fold' content is all meaningful and relevant to your reason for contacting your readers.

It may seem boring, but being conventional really comes in handy with email. Emails are small and they're opened for a very brief period of time, so the function of every element needs to be crystal clear.

Create nice, big, easily clickable and tappable buttons for your links. On mobile, make them 100% of the width so that they can easily be tapped with either thumb (no reaching required).

If you also wish to have text links within your copy, ensure they're bold and in a contrasting colour so they stand out. Try not to have too many links close together, which may cause a user to accidentally tap the wrong one.

About 50% of opens are on touch devices these days, so avoid language that doesn’t make sense, such as "click here".