Article
About the Author
Mathew Patterson
Mathew Patterson is the Community Manager for Freshview, the company behind Campaign Monitor and MailBuild, and is involved in running the Email Standards Project. He also runs DesignersInhouse.com, the email list for web designers in non-design companies.
The Principles of Beautiful HTML Email
As web designers, we're used to designing for the particular constraints and capabilities of web browsers, and there's a ton of great advice out there to help. HTML emails are a different story, though -- they've often been the black sheep of the web design world, and have either been ignored or actively repelled.
Despite that, HTML email usage continues to grow, and it has continually proven to be an effective tool for businesses to communicate with customers. Studies over recent years have shown that, on average, email marketing provides as much as $50 in revenue for every dollar spent.
Let's be clear here: we're not talking about spam! We're talking about email that people have explicitly requested, like the BBC news headlines or your hotel booking confirmation. If you don't have permission to email people, don't email them, no matter how nice your design is. We're also not saying that every email should be HTML.
Whether we like it or not, HTML email is here to stay, and since someone needs to design it, that person should be a web professional. However, an email is not a web page. When you design a web site, you know that the visitors probably have some idea of what to expect. They may have clicked on a search result, or a link from another site, so they have a context in which to understand your pages. When they arrive, you have the whole browser window in which to display your message.
Email is different. An email inbox is a very noisy place, with tons of messages, folders, calendars, and other distractions. Your subscribers may only ever read the subject line, or perhaps see your email through a tiny preview pane, so you need to design it accordingly and make the best use of the screen space and time the reader gives you.
So, what makes a good, modern HTML email design?
Key Elements of HTML Email
There are a few key elements that every commercial email should use; they'll form the core of your design:
Permission Reminder
When you make a business call, you don't start with 'Buy our fantastic new widget today!' -- at least, you shouldn't. Instead, you usually start by introducing yourself and reminding the recipient about your past meeting or contact.
Your emails should start the same way, with a clear, specific reminder of how subscribers got onto your list. This gives them some context for your message, and reduces the likelihood that recipients will mark your messages as spam.
Well-formatted Copy
The single biggest advantage of using HTML in email is the ability to format your copy. You can use real headings, adjust line height, highlight important content, and make copy scannable in ways you can't easily do with plain text.
This is really where you should spend most of your time designing emails -- making the message easier to read, and easier to act on.
Prominent Unsubscribe Link
Every commercial email should provide a quick and reliable way for people to get off the list. Both designers and clients sometimes try to hide this link away, hoping to keep subscribers on their lists. But if someone wants off, you must let them do it easily, or you'll just end up with spam complaints. Automatic unsubscribe mechanisms are far better than the type that require manual processing or the filling in of tedious forms.
Plain Text Version (and Web Version)
A plain text version of every commercial email you send should be available for people who can't, or choose not to, view the HTML version. Sending email in multipart text+html format makes this simple. Additionally, consider linking to a web page to give recipients the full HTML experience if that makes sense for your audience and content.
Legally Required Details
Some countries have legal requirements in place that mandate certain elements in commercial emails. The best-known example is the CAN-SPAM laws, which require, among other things, that a physical street address is included in every commercial email.
Visual Connection to the Brand
As a design context, email is a different from the web, but it should facilitate an extension of the web site's branding into email in the same way that web sites can extend a print brand. This helps subscribers make the connection in their minds between the email and the company sending it, and again, it can reduce spam complaints.
Once you've pulled together the core of your email, it's time to get creative in laying out and styling your content.
Email Layout and Design
Just like creating a web page, designing an email is all about knowing your topic and your audience. Without going right back to page layout and design basics, email has a few defining characteristics that should guide your design.
An Email is Not a Web Page
Some designers will often say this as if it means that HTML email should not exist. Well, that boat has sailed, but it is definitely true that an email is a different context than a web page, and needs to be treated differently.
Prioritising Content
An email message has a lot to compete with for attention. There are all the other messages in the inbox, there are the spam messages, there is often a mix of personal and work-related messages, and then there are all of those draft messages that are in the process of being written. And to think that reading email is only a small part of most people's jobs!
You need to get to the point quickly. Start with the most valuable information -- don't hide it away. Your reader should be able to glance at the top of the email and know immediately if it's worth reading. Consider starting with a table of contents or a short summary that will entice them to read the full email.
