The Principles of HTML Email Design

Tweet

SitePoint’s latest book release, Create Stunning HTML Email That Just Works, contains a wealth of information about planning, designing, and coding HTML email. It will help you understand permission-based marketing and show you how to sell email design services to your clients. We’re making Chapter 3: Design for the Inbox available as part of the free sample PDF of the book. This article is an excerpt from that chapter, focusing on the first principles of HTML email design. Read on to start learning how to design beautiful and effective HTML emails, or download the free sample to read it and the rest of the chapter offline at your convenience.

The Design Environment for Email

Isn’t designing an email just like designing a small, one-page web page? Well, yes, in many ways it is. We do use the same design tools and technologies to produce the final result. And the same general design principles are still in play: contrast, repetition, proximity, and alignment are all important.

Any competent web designer already has the capabilities to design an HTML email. There are some important differences, though, and understanding these will make the difference between a tiny web page squished into your inbox, and a valuable and readable email.

If we compare web design to email design, we can come up with a few core distinctions. Let’s examine them one by one, and see what lessons we can draw from them.

Your Subscriber May Not Read the Email

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]

Design Guideline 1: Write a subject line that is …
  • informative (mention some of the topics)

  • short (or at least has the most important information at the start)

  • recognizable (so that it’s consistent with other emails from your client)

Looking Through the Rectangular Window

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

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.

Design Guideline 2: Find out what your email looks like in a minimal preview pane.

What copy is located in the top few hundred pixels of the email? Does it entice people to read on? Is your header too big?

Image Blocking

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

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.

Design Guideline 3: Always check your email with images turned off.

Does the email still have useful, readable content? Consider especially what the preview pane looks like when there are no images. Do you have visible text in the preview area?

Horizontally Challenged

GA_googleFillSlot(“Articles_6_300x250″);

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.

Design Guideline 4: Keep email designs reasonably narrow.

A good maximum width to aim for is 600 pixels.

Essential Elements of an Effective Email

With our design guidelines in hand, we’re almost ready to start creating our email. In the same way that nearly all cars have a steering wheel, four wheels, and a dashboard, and that most websites have headers and footers and contact pages, commercial emails tend to share a basic structure.

I’ve reviewed literally hundreds of thousands of emails over the last few years, and the pattern that emerges is very clear. The elements we will discuss below can be implemented in many ways, but they’re almost always present in newsletters and marketing emails. You may not be legally required to have them all, but each one adds to the credibility of your message and the likelihood of it being read.

Permission Reminder

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:

  • They bought products from the website recently.

  • They filled in the sign-up form on the website.

  • They are paying subscribers and this is part of their purchase.

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

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


Have Recognizable Sender Details

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.

Legal Compliance

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:

  • have accurate “From” and “To” addresses, email headers, and routing information that identifies the sender

  • avoid deceptive or misleading subject lines

  • contain an unsubscribe or opt-out mechanism

  • identify itself as a commercial email and contain a valid physical address for the sender

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.

Unsubscribe Link

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.

Adapting a Website Design into an Email Design

The typical email design project will be associated with an existing brand, and you’ll almost always have a website design in place from which to work. Making your email design feel like it’s from the same company—or website—is extremely important. A 2006 survey from Return Path showed that the biggest influence on whether emails were opened was “knowing and trusting the sender.” If the email uses recognizable colors, titles, and imagery, the subject line and preview pane will remind the recipients about the sender of the email, providing the confidence to act.

An email that’s visually disconnected from the site it links to will jar, even if it does convince some recipients to click a link.

Don’t go crazy and try to replicate the entire website in an email, though. Your design should take the essential feel of the brand (excuse the marketing terms) and translate it into what will work for an email.

Campaign Monitor’s own email newsletter template is one example. Compare the current Campaign Monitor home page to the newsletter, both which can be seen in Figure 4, “Campaign Monitor website and newsletter”.

Figure 4. Campaign Monitor website and newsletter

Campaign Monitor website and newsletter


Structurally the email is much simpler, consisting of a single column. The email header ties in to the sunburst effect from the website header, but the content has been reordered. At a glance the two images look strongly related, but not identical. This is the level of similarity to aim for: an email that feels as though it’s a natural extension of the website. It should stand on its own as a well-designed and readable document, but clearly be part of a bigger design.[2]Figure 5, “37signals home page and newsletter”, Figure 6, “Wufoo home page and newsletter”, and Figure 7, “Authentic Jobs home page and newsletter” are the current home pages of some other popular services (on the left), and their newsletters (on the right).

Figure 5. 37signals home page and newsletter

37signals home page and newsletter


Figure 6. Wufoo home page and newsletter

Wufoo home page and newsletter


Figure 7. Authentic Jobs home page and newsletter

Authentic Jobs home page and newsletter


If you see an example of a great newsletter, make sure you click through to the home page of the company or sender and compare them. You’ll learn exactly what the designer thought were the key elements of the website design and brand by what they chose to include, and what was left out.

Layout Possibilities

Even in 600 pixels, there are plenty of ways to lay out content. How do designers usually approach an email layout? Figure 8, “The most popular layout variations sent through Campaign Monitor” shows some the most popular block-level email layouts, as taken from a typical day of email campaigns sent through Campaign Monitor.

(In truth, these are the most popular layouts once we’ve excluded the common but horrifying “jumbled mess of unstructured text and images,” which remains an unfortunate favorite with many senders.)

Two-column layouts (with about an 80/20 split) are by far the most popular layouts, which was true for websites ten years ago as well. The idea of interspersing two-column blocks with full-width blocks is very popular, and gives the email a more dynamic feel if it’s done right. It’s also very flexible, and allows you to use a variety of different content types.

Figure 8. The most popular layout variations sent through Campaign Monitor

The most popular layout variations sent through Campaign Monitor


It’s very rare to see more than three columns, and that’s hardly surprising given the design constraints I talked about in the section called “The Design Environment for Email”.

If you have a client that sends several different types of content, you can of course create many design variations to suit; you’d still want to make them recognizable as being from the same sender and on the same topic, though.

Remember that the actual content could be shorter than what we were planning on, or longer, or more varied month by month. So our design needs to be flexible enough to hold together over time. Pixel-perfect design never worked very well on the Web, and it certainly won’t work in an email client.

Some designers like to create a more detailed mockup at this point, slotting content sections in wherever they fit. You might find the mockup a useful document to show your client before you commit to particular color schemes or layout sizes.

Conclusion

Now that you’ve learned the principles of designing an attractive and successful HTML email, it’s time to put them into practice. Begin by downloading the sample PDF of Create Stunning HTML Email That Just Works, which includes all the text of this article, along with the rest of Chapter 3: Design for the Inbox. When you’re ready to take your HTML email design skills to the next level, buy the book and learn how to code up your template, help your clients manage their subscriber lists in a legal and effective way, and start selling email design services to your clients.


[2] You can find out more about how the Campaign Monitor newsletter was planned and built at http://www.campaignmonitor.com/blog/post/2677/redesigning-the-campaign-monitor-newsletter/.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.facebook.com/toril.askade Toril Askade

    I think there is a problem with images included in this article – they are not displayed.

  • caleb BENGUELET

    problem with images !!!

  • http://crowdogs.com Peter Schreiner

    Great tips. I’m implementing them today! Oh, and there are problems with this post’s pictures.