The Principles of HTML Email Design

The very first element of design that goes into an email isn’t strictly “design” at all. It’s copywriting. Your email can fly through spam filters like Luke Skywalker in the Death Star trenches and make its way successfully into the inbox, but then remain unopened. This is because, unlike a web page—which visitors can arrive at via links from other pages or search engines—an email is only ever opened when the user decides to open it, and often they’ll make that decision based on the subject line.

Crafting an appealing and informative subject line is the first step in a successful design. We’re unable to make any visual design changes to a subject line, but as designers we should be involved in ensuring that it represents what’s in the email, and that it’s recognizable and helpful.

If the subject line fails in its job, your beautifully crafted design will never be seen. There’s plenty of information out there for help on improving subject lines, as well as research on what makes a subject line succeed or fail.^[1]

Assuming we’ve done a decent job with our subject line, our email may be selected from the inbox and displayed in a shortened form. For desktop email clients like Outlook and Apple Mail, the default preview pane is a tiny rectangle of space taking up less than 20% of the screen, as illustrated in Figure 1, “Sample screen showing preview pane size”.

Figure 1. Sample screen showing preview pane size

Imagine walking through a mall. Every store has a sign out the front, but all the windows are blacked out except for a square letterbox-sized peephole. To decide whether you want to go inside you need to peek through that slot to see what you can see. That’s what the preview pane is like—a limited view of your design and content. For that reason, it’s really important that the top of your email is informative. If all the reader can see is 300 pixels of your background color or an unrecognizable logo, they have to be really keen to bother reading on.

If you’ve used any email program that renders HTML, chances are you’ll have opened up emails that looked like the one shown in Figure 2, “All-image email with images blocked”.

Figure 2. All-image email with images blocked

Instead of words or pictures, there’s a stack of blocks of various sizes, as if someone is losing a game of Tetris in your inbox. Most of the major email clients, including Outlook, Lotus Notes, and Hotmail, will not display images by default. Instead, they display a broken image icon or an empty rectangle.

The reason image blocking is so common is related to the invasiveness of email that we discussed earlier. When emails arrive without you having taken any action, featuring any content imaginable, it’s easy to see how it all can go horribly wrong. Nobody wants to have to explain to their boss why their screen is full of images unsuited to the workplace. To avoid this sort of situation, the email programs insert an extra step in the viewing process to make the reader specifically request to see images.

Email software programs differ in the way they handle images by default, whether using a global setting, or showing images only from your known contacts, or on an individual email-by-email basis. In some cases, embedding the images as MIME-encoded attachments can avoid the image blocking, which is worth knowing. However, sending images as attachments creates a greater risk of being filtered, slower download speeds, and more complex processes. And you can bet that if spammers start embedding all their images as attachments, the email clients will respond and start blocking those as well.

The take-home message for us as email designers is that we cannot simply expect our readers to see the images. Added to that, many readers are unaware that images are missing or how to enable them, so they may just assume the email is meaningless or broken, and throw it out if it contains no content other than images.

So what are we to do? Avoid images entirely? Well, you could, and in many cases a well-formatted HTML email without images can be highly effective and achieve all your goals. That’s not always true, though, and inevitably we’ll have clients or bosses who really do have valid requirements for images.

The answer is to always design knowing that your images cannot be relied on. Make sure that if they don’t load, the email is still readable and recognizable.

I remember the momentous time when 800×600 desktop resolutions were finally sufficiently widespread for web designers to move en masse to designing websites for this size. We’d been toiling away for years, squeezing websites into 600 measly pixels, so being allowed to stretch out to 760 was like moving from a camp bed up to a queen ensemble.

Unfortunately, I have some bad news. When it comes to email design, you’ll need to go down to the garage and drag that camp bed back upstairs, because your emails are probably being read in a very narrow window or frame. Most people don’t open emails in a full-screen window; instead, they scroll through a preview pane or viewing column that takes up only a portion of the screen.

Added to that, consider the poor people using mobile email clients who at best have a few hundred pixels with which to work. Web surfers have overcome their fear of scrolling vertically, but horizontal scrolling is still rare. As a result, our email designs will generally be quite narrow, built to work in a limited screen space. Most commercial emails seem to be about 600 pixels wide at the most, which can feel almost claustrophobic when you are used to your 24-inch desktop monitor. This width restriction will naturally lead to certain design styles, such as restricting the number of columns and splitting the elements vertically more than horizontally.

There are many different laws that apply to commercial email according to where you’re located in the world. One rule that applies almost everywhere is that you absolutely must have permission to send people bulk email. In most cases, it also makes sense to remind people about how they gave you that permission. We’ll be covering this topic in more detail in ???, but we’ll describe it briefly here, as it’s an important element that needs to be considered before you start your design.

It’s common for people to forget that they signed up, especially if you only send emails rarely, or they only joined because of a competition or special offer. A short message at the top of your email can help people remember, and make them more likely to read on. You may have seen some companies attempt this, but make the reminder infuriatingly vague, such as “You are receiving this because your address was on our list.” Well, duh!

Recipients want to know why their address is on your list, and how it got there. The more specific you can be, the better. In the case of our Modern Henchman newsletter, we know that people are on the list for one of three reasons:

So a simple permission reminder will be something like: “You are receiving this because you are a current subscriber, have bought from us (thanks), or signed up on our website.”

Working with your client to write a permission reminder can also be a good way to check that the client does have permission to email their list. Seeing the reminder written out plainly can trigger them to say, “Oh, we also added our contact list, Chamber of Commerce members, and local phone directory.” Uh-oh.

It’s much better to find out before you send the email that your client has a very different understanding of permission than you do (or than your email service provider does). You can then work with them to pare the list back to people who are more likely to receive it positively, and who meet your email service provider’s rules.

Storing information about how each person signed up (perhaps as a custom data field in your list) can make it simple to create personalized permission reminders. If you know this person bought from you in May this year, you can remind them of that right up front, making them much more likely to respond well to your email.

Panic sent a very attractive and cleverly designed email, shown in Figure 3, “Panic’s permission reminder email is personalized with user-specific information”, but it was the addition of the line “You signed up for our list via [product name]” that helped them avoid complaints.

Figure 3. Panic’s permission reminder email is personalized with user-specific information

Studies on email open rates have found that trusting the sender is the single most important factor in whether an email is opened or not. That means it’s critical to choose an effective and consistent “From” name and email address. You need to choose a name or title that will be recognizable to your readers. Often that will be the company name, or perhaps the product or service people have signed up to learn about.

Some companies have a well-known leader (bgates@microsoft.com), and if your client is among those, you might be able to use their name. Once you’ve picked an address, it’s important to stick with it, because email clients are less likely to filter emails from known senders. Your subscribers may also have manually whitelisted your sending address (which you should encourage), and changing the address will mean losing any whitelisting benefit.

Most of this book is about guidelines, suggestions, and general tips, but depending on where you and your clients live there may be also legal requirements for any commercial email you send.

The most famous of these laws is of course the dubiously effective CAN-SPAM Act (2003), which applies to US senders of “email whose primary purpose is advertising or promoting a commercial product or service, including content on a website.” Processing emails (such as order confirmations and the like) are mostly exempt.

The CAN-SPAM law requires that your emails must:

The main impact of this law for designers is the need to include the physical address in the design, typically in the footer as you’ll have seen. Find out more about CAN-SPAM at the FTC website.

Outside of the USA, there are plenty of similar pieces of legislation, so make certain you know what applies to the emails you’re sending. For a head start on finding out laws relevant in your area, visit Mark Brownlow’s helpful list.

Even if there’s no legal requirement to have a method of unsubscribing, it’s usually a good idea. Giving subscribers a clear and simple way to say “I would like to stop receiving your emails now” is the best option for all sides. It helps you as the sender, because you avoid the cost of sending an email to a recipient who is only going to trash it anyway. And it leaves your subscriber with a positive experience of your company or service—you give them control in the relationship.

When I review email campaigns, I can sense right in the pixels the grudging way in which some designers give in to the unsubscribe requirement. They hide it in a four-pixel light gray font in the middle of an otherwise unrelated paragraph. It’s like playing a particularly frustrating version of “Where’s Waldo,” and if you don’t find him this time he’ll knock on your door next week and make you play again.

There’s really no point to this. If a person doesn’t want to receive your email, they will not read it anyway, and by irritating them and making it difficult you’re just increasing the risk of them reporting it as spam. So make your unsubscribe method loud and proud. You can have a bit of fun with it, though.

One Campaign Monitor customer ended their email with “Every person who unsubscribes makes us cry a tear, but if you must: click here.” Another email for a nightclub showed some honesty: “If you signed up while drunk you can unsubscribe here.”

A person who knows it’s super easy to unsubscribe is far more likely to resubscribe later on if they need your information or services again.

Now that we’ve familiarized ourselves with the design constraints that apply to HTML email, and a few key components we’ll be sure to remember, we’re ready to begin the actual job of designing the email. But where to start? Fortunately, almost all email designs can be based on an existing website design.