The Principles of Beautiful HTML Email

Coding Like it's 1999

Once you have your design and layout planned, it's time to actually build the HTML, and this is the point at which we start slipping back in time. There are some key technical constraints and techniques you need to have in your toolkit to implement your fantastic design.

CSS Support in Email Clients

The typical email client is quite similar to a web browser from 1999, with limited or inconsistent support for modern HTML and CSS. The best place to start is with the Campaign Monitor Guide to CSS Support in Email, which gives you an overview and helpful chart that shows what is and is not supported in the major email clients. You may find SitePoint's article on Writing HTML Email useful as well.

These resources will give you a solid base for the structure of your email, and you can build up from there.

The Preview Pane: a Trailer for Your Email

Before your subscribers actually see your email, they may get just a glimpse of it in their preview panes. Typically, this will be a window of no more than a couple of hundred pixels in height, but your subscribers may use the information that's visible in that space to decide whether they will open your email or ignore it.

Great emails make use of this space to answer the questions: 'Who is this from?' and 'What is the email about?' That may mean having a consistent header image that is recognizable, or having a heading that grabs their attention. Particularly useful are emails that list a table of contents high up on the page. That way, you're not forcing your reader to decide without any information.

Of course, preview panes vary in their size and location, so all you can do is to prioritise your content and start with the key information, as we discussed earlier.

Image Blocking

By default, many email clients will not download images referenced in HTML emails. Instead, they'll show a placeholder, sometimes with a message or information bar that explains how to turn images on. For an overview of the situation, see Mark Wyner's Image Blocking in Email Clients: Current Conditions and Best Practices.

Your email needs to be immediately readable and useful, even without any images showing. That means having real text content on the page, headings, and links that will load right away. Your text has to give the reader a compelling reason to bother turning on those images at all. All-image emails can result in a very poor experience for many of your readers, like the Apple email announcement below.

You may also want to have a sentence at the top of your email asking people to add your "from" address to their whitelists or address books, as for many email clients this step will bypass image blocking and help keep your newsletter out of the junk folder.

The Things that Shall Not Be

While some email design involves modifying elements or working around issues, some parts of web design are best kept out of email altogether -- things like audio files, Flash files, and JavaScript.

Email client developers rightly haven't spent time supporting these types of content, both for security reasons and to protect the email reader's experience. An email inbox is not the place to show a movie or play a song. Your readers won't expect it, and probably wouldn't like it.

Support for Flash in email, for example, is very low. Instead of trying to put every part of your web site into email, use the email as a gateway to your site. Link a static screenshot to your video on the web site, or use a song icon to link to your online player.

Restraint is very important, because an email that causes a security warning, or that unexpectedly animates, for example, is going to be quickly deleted.

Testing, Testing

Unlike web browsers, where you can reasonably cover the major browsers on your own desktop, email testing can be very time-consuming. There are at least 12 email clients with major market share, and depending on your audience, you may need to test in all of them.
There are tools out there to help you with the process -- for example, Campaign Monitor's design and spam testing tool and Litmus. They can save you a lot of time by showing you screenshots of your email in all the big clients.

Of course, you can do it yourself, too, by setting up all the different clients and having a test list of email addresses. Remember: it's always better to find the problems before you send out your client's campaigns.

Better Standards Support for Email Clients?

By now you're probably already sick of having to deal with so many email clients with different levels of support for basic HTML and CSS. You're not alone!
Late last year, the team at Freshview was part of the launch of the Email Standards Project, which is trying to do something about the situation. The idea is to start working with email client developers to get some consistent, modern HTML and CSS rendering that we can all rely on.

On the Project's web site, there's a series of email client reports as well as a blog that covers our progress to date. Recently, Yahoo! promised to make a fix, and IBM has been in discussions with the group.

If you'd like to know more, or find out how to help, visit email-standards.org.

Getting Better All the Time

There's one more question you need to answer before you actually send your email: What will be a good result? You can spend as long as you like crafting your code and design, but you need to be able to tell whether your time was well spent. Before you send, make sure you have defined some measurable goals for your email campaign.

Some typical aspects to measure and set targets for are:

• A certain percentage of people actually opening your email. Be aware though that measuring opens is not an exact science.
• People clicking through to your most important links. What is the single most important action you want your readers to take? That is the most important aspect to track.
• Email responses. Perhaps you just want to increase the number of people contacting you. That's a simple measurement to take.
• Sales or inquiries. If you have the right tools in place, you can track people coming to your site from your emails, and monitor them all the way through a checkout process.

These kinds of measurements are best done over a series of campaigns. At first, you won't have any benchmark numbers to judge against. There are plenty of broad statistics and metrics out there, but every audience is different. Far more important is to define your own measurements, and track how your campaigns compare against them over time. Are you getting closer to your targets?

How Can I Improve My Results?

As with web design, there's an endless number of ways you could tweak your email design and copy to get better results. If you're regularly emailing a list, you have the opportunity to try small, controlled changes. You can test them with your entire subscriber base, or select a small segment and send them a variation from your main list.

Pick one area to work on at a time, so you can control the number of variables, and have a better idea of what's actually making a difference. Some good places to start are:

Subject Lines

In a busy, active email inbox, that short little subject line may be the only chance you get to convince someone to open your email and consider reading it. Try to make your subject lines recognisable and valuable by ensuring that they give an accurate indication of the email's content. Check out resources like The Art of the Subject Line for more ideas, and experiment with some different subjects to see what impact they have.

Time and Day of Sending

Sometimes, the same email can be more effective on a Tuesday afternoon than it was on a Thursday morning. You'll find lots of conflicting evidence in this area, so the only way to know what will work for your audience and topic is to try a few different times. Think about when you personally spend the most time reading email -- is it first thing in the morning? Or after lunch, before you start on a new project?

Headlines and Link Copy

Just like the subject line, headlines are the elements people use to judge whether your email's worth reading. Your copy could be fantastically useful, but skipped over because the headline wasn't convincing. Resources like Brian Clark's How to Write Headlines That Work are a great starting point.

Content Positioning and Prioritisation

Don't be afraid to try moving different sections of your newsletter around, or even dropping under-performing content completely. Watching your statistics should give you an idea of what your audience is most interested in, so use that knowledge to structure the email -- just as you would for a web site. Email design can be a microcosm of information architecture, and one you can be quite flexible with.

HTML Email Can Be Done Right!

It takes a little bit of effort, and it can be frustrating, but with some knowledge and practice, you can create HTML emails that people will find easier to read, attractive and useful. Make sure you always send plain text too, but don't leave the HTML up to the marketers!