The ultimate guide to email design

While a lot of online communication has moved to social media, email is still a very important part of any online marketing campaign. And when we think of marketing emails, what generally comes to mind is HTML email, rather than plain text.

Designing for email is much like designing a simple webpage, but there are some key differences you need to take into consideration. You also need to keep in mind that email is a push, rather than pull, communication.

People often get emails at an overwhelming rate, and not always when it’s convenient for them to look at them. That means you have mere fractions of a second to catch their attention before they move on to the next message in their inbox (unlike with a website, which they’ve chosen to visit at a particular time).

But as long as you keep that in mind—that you have only an instant to catch your reader’s attention—you’ll have a much easier and smoother experience in designing effective emails.

Mobile or bust

So many people are accessing email from a mobile device these days (nearly half of all emails are opened in mobile apps), that it’s become pretty pointless to spend a bunch of time designing beautiful emails that don’t display properly on such devices.

After all, if the email doesn’t look right when they check it on their phone, what are the chances your subscribers are going to look at it again when back at their desk? I’d wager pretty slim. In fact, most of them are probably just going to delete the email, or worse — unsubscribe.

There are two ways to go about designing for mobile. You can create emails that resize to fit the reader’s screen, which can be perfectly adequate for some simple designs. Or you can create a responsive email design that will adapt to different screen sizes.

There are advantages and disadvantages to either approach. Emails that resize are fairly easy to code, and will tend to work on virtually any device. But they work best with very simple email designs that can handle being viewed at significantly smaller than desktop sizes.

Responsive designs are much more complex to code, and aren’t supported by every mobile browser (though support is likely to continue to improve in the future).

Responsive design

Responsive designs are likely to be more practical for most of your HTML emails than layouts that simply resize. This is because on very small screens, emails that have simply been shrunk will almost certainly become very difficult to read.

We’ve already discussed why mobile-friendly emails are vital, but here are a few things to keep in mind when actually designing those emails. These are the things that should be triggered for mobile layouts, and can be adapted for the larger-screen versions of your emails.

1. Your layout should be fairly narrow: somewhere in the range of 500-600 pixels is standard. This will make them more readable on both desktop and mobile devices, with less chance for your layout to go all wonky when it’s resized.
2. Make sure your fonts are large enough. Be aware of what the minimum font sizes for various platforms so that your fonts aren’t upscaled (which could affect your layout). For example, iOS uses a minimum font size of 13 pixels.
3. Clickable areas need to be tap-friendly. That means making them big enough and isolated enough from other links so that a user can easily activate them on the first try (because you may not get a second).
4. Don’t hesitate to use display:none to hide unnecessary elements on your mobile layouts. What is user-friendly on a desktop or even a tablet becomes annoying clutter on a smartphone. Less is definitely more on smaller screens.

It’s worth taking the time to sketch out wireframes for both your mobile and desktop email versions before you start coding. Pay careful attention to where your call-to-action and other important information appears on the mobile version especially.

Typography considerations

While a lot of designers focus on the graphical content of HTML emails, the typography is even more important than on many websites. After all, considering how many email clients prevent images from loading initially, some of your email recipients may only ever see the typography.

Consider using large type sizes for better legibility regardless of screen size. Also keep in mind line lengths on various screen sizes, and make sure that they’re not too long (which can make it hard for the eye to travel from one line to the next without losing its place) or too short (which just makes more scrolling necessary).

Be sure to use headings and other typographic formatting to make your email content more scannable, especially if your emails are more than a couple of paragraphs.

Overall, email typography isn’t much different from web typography in general, besides the previously-mentioned part about it being more likely to be the first and/or only thing your readers see.

Different emails for different purposes

There are a lot of different kinds of emails you may be sending out to your subscriber lists (or designing for clients). Each one serves its own purpose, and each one should be designed in a way that best serves that purpose.

Newsletters

One of the most common email types is the newsletter. These often consist of a lot of links, frequently with short bits of text accompanying them, or they consist of longer articles. In either case, there’s a good chance that there won’t be a single call-to-action present, and instead there may be quite a few links to click.

This presents a unique challenge, as designers and content creators have to still decide on some kind of priority or hierarchy for the content within the email. In many instances, this will mean one featured story or link to draw the reader in, with additional content given lesser weight.

Plastyk has a great newsletter design that’s fun and engaging.

Notifications

Another common email type is the notification email, also referred to as a trigger email. Think of the emails Facebook sends when someone sends you a friend request or Twitter when someone follows you. Although notification emails can also be announcements. These emails are notifications, but they’re also meant to trigger an action on your part (in these cases, checking your account). These emails are generally very short and to the point, with a bold call-to-action.

Here’s an announcement email from Proper Labs.

Transactional emails

Transactional emails are sent when a user interacts with a website or company in some way. This could be making a purchase or signing up for something, or it could be triggered by something like when a user abandons their shopping cart without completing a transaction. These emails serve to either provide information (in the case of something like an order confirmation) or to entice the visitor back (like with an abandoned cart).

Here’s a good example of a transactional email from One Eyed Cat. It’s a good example of how bricks-and-mortar businesses can use email marketing.

Marketing emails

Marketing emails are sent when a company wants you to do business with them. These could be notifying you of a special offer, a new product, or something similar. These are often the emails that incorporate the most “design” out of the regular emails a company might send.

These emails are meant specifically to get a subscriber to take some kind of action with a company or website. It could be signing up, or making a purchase, or something similar. The call-to-action in these emails is by far the most important element, though obviously other elements need to support that call to entice readers to take the desired action.

Community has a great marketing email that’s another good example of how bricks-and-mortar businesses can use email to engage their customers.

Email design best practices

While email design and web design share many of the same attributes, there are some key differences you need to keep in mind when designing for email. While most of them are easily adapted to, they’re still important and make your emails much more effective.

It’s all about the content

Content is always important, regardless of what you’re designing. But with email, and particularly with emails that are likely going to be viewed on a mobile device, keeping your content short and to-the-point is even more vital. You have a few seconds at most to engage your reader, and if those first few seconds are wasted on extraneous information that isn’t useful, then you’ve lost them.

Make sure that your content is as concise and clear as you can make it. Efficiency is key, and if your reader can’t very quickly discern exactly what your email is about and exactly what you want them to do, then you’re wasting your time.

Clear call-to-action

The call-to-action is arguably the most important part of any email design. Your email obviously has some purpose, whether that is to get readers to sign up for something, read something, or buy something. And your call-to-action should make it very clear what that thing is, and entice your reader to do what you want them to do.

Call-to-actions most often come in the form of buttons. It should be immediately identifiable, and not too far down the email (after all, you only have a few seconds to get their attention, so placing your call-to-action where they’ll see it within those few seconds increases your chances at being effective).

Make sure that your call-to-action is tap-friendly, too. That means it needs to be large enough that it’s easy to click on a mobile-device, and that there are no other links close enough to it that they might be accidentally clicked.

Test early, test often

Make sure that your emails are all fully tested on a variety of devices and clients. You may want to start testing your layouts, etc. right from the beginning, but be sure to test them throughout the design process to make sure that they remain bug-free.

Testing often also means it’s likely quicker to track down bugs if they do crop up, since you’ll have an easier time remembering which changes you’ve just made.

Understand exactly what each of the major clients and devices supports, and exactly where they fall short, and either find frameworks and boilerplates that address those shortcomings, or design around them.

Make use of pre-header text

Pre-header text shows up in many email clients as a preview to the message. View this as nearly as important as your email’s subject line. Use it to entice your reader to actually open the email. This can be especially helpful since many email clients cut short long subject lines.

Link to the web-hosted version

Make sure that you include a link to the web-hosted version of your emails, in case someone is genuinely interested but having trouble viewing it on their mobile device or in their email client. Many email services allow you to use a tracking link for this (and other links), so that you can see who’s clicking through.

Keep it simple

While you can design complex layouts with tons of graphics and stylized elements, you increase the risk that your emails won’t show up as you intended for all of your readers.

Simpler designs and simpler layouts mean that your emails are more universally readable on devices without a ton of workarounds and hacks. While complex designs can be more aesthetically pleasing to some, it’s often not worth the additional complications that they present for minimal tangible benefit.

Templates and frameworks

While coding an HTML email entirely from scratch is completely doable (check out our previous article “How to design a responsive HTML email” for details on the technical aspects), using a framework or boilerplate to get started, or even a pre-made template, can greatly speed up the process and make it more accessible to the beginning designer.

Cerberus

Cerberus is a set of responsive email patterns that work even in Outlook and mobile Gmail. You can use the code blocks together or separately. There are two versions: one that relies on media queries and one that doesn’t.

Ink

Ink is a responsive email boilerplate from Zurb. The emails created with Ink work on any device and client, even Outlook. It’s simple enough to dive right in, as well as being fully documented.

Responsive email templates built on Ink

These Responsive email templates built on Ink are a great place to start with Ink. There are four templates: a basic single-column, a hero-image email, a sidebar layout, and a sidebar-hero hybrid layout.

Responsive email templates

Zurb has some additional Responsive Email Templates, including a newsletter template with a hero image found on this page. It also includes some other handy info about using the templates.

Responsive Email Patterns

Responsive Email Patterns is a collection of patterns and modules for creating responsive emails. It includes patterns for layouts, navigation, lists, media, and more.

Really simple HTML email template

The Really simple HTML email template is exactly what it says it is: a super simple HTML email template with a very basic design. It’s a single column, with a call-to-action built in, and a clear-cut purpose.

Template Builder

The CampaignMonitor Template Builder lets you build free HTML email templates in just a minute. The results are mobile-ready, fully tested, and can be used directly in CampaignMonitor or downloaded for use elsewhere.

Free Email Templates

These Free Email Templates from CampaignMonitor are free to download and use whether you use CampaignMonitor or not. There are tons of styles and designs available, over 100 in all.

HTML Email Boilerplate v 0.5

The HTML Email Boilerplate is a good starting point for creating emails. It contains no design or layout, which helps avoid many rendering problems in major email clients.

Email Boilerplate

This Email Boilerplate from Emailology includes all the basics you need for setting up your HTML emails, like CSS and HTML. It’s commented to give you usage instructions.

Antwort

Antwort offers bulletproof responsive layouts for emails that adapt to various client widths. It supports all major email clients, including Outlook and Gmail.

GraphicMail Newsletter Templates

GraphicMail offers up around 100 free newsletter templates. A free account is required to use them.

ThemeForest Email Templates

ThemeForest offers up tons of premium email templates, ranging from $6 to $19. Premium templates are sometimes easier to use, and can have additional features that can be hard to come by in free templates.

Stamplia

Stamplia offers a premium template marketplace, where you can buy and sell templates for newsletters, transactional emails, and more.

Email tools

e-Newsletter WordPress plugin

The e-Newsletter WordPress plugin offers up professional management of your email newsletters and subscribers right in your WordPress admin interface. While self-hosting your email service can present its own set of challenges, it also gives you full control and eliminates monthly service fees, which may be quite valuable for many businesses.

Bulletproof background images

Bulletproof background images from CampaignMonitor is a simple tool for coding your email background images. Just put in the URL of the background image, the fallback color, and whether it’s for the full email body or just a single table cell, and it gives you the code.

Bulletproof email buttons

Bulletproof email buttons from CampaignMonitor lets you design beautiful progressively enhanced buttons for your emails. They’re perfect for calls-to-action.

Litmus

Litmus is a set of tracking and testing tools for email. It includes email previews, analytics, and spam filter testing tools. It starts at $79/month, with discounted annual plans.

Litmus Scope

Litmus Scope makes it easy to create a clean, web-based version of any email that you can then share. It’s available for download, as well as in bookmarklet form that works with any webmail.

Examples and inspiration

There are tons of email galleries out there that you can check out for inspiration. But here are twenty awesome emails to get you started!

Whalers

St. Theresa Auction

Online Store Guys

Inspirations Point

Everywhere

Sphere

Form Function & Class

Boden

Bon Appetit

Sevenly

Path

Zombie Survival Guide for Email Marketers

Fooda

Designer News

Charity: Water

EwerkNews

Interworld Plastics

Zehno

PSD Freebies

WalkieTalkie

More galleries to inspire you

Really Good Emails offers up categorized email designs, many with commentary about what makes them great.

Email-Gallery lets you browse email designs based on color, business type, and more.

CampaignMonitor’s Email Inspiration lets you browse by number of columns, and email type (announcement, newsletter, or invitation).

Look What You Can Do, from MailChimp, offers up plenty of emails sent through the service for inspiration.

HTML Email Gallery offers a chronological gallery of email designs.

The Email Design Gallery is a Tumblr blog that showcases great email designs from a variety of sources.

Beautiful Email Newsletters is a categorized email gallery that also includes a search function.

Email services

Email services offer various features, but they pretty much all handle managing your subscriber lists and sending out emails on your behalf. Many have additional tracking and automation features, too. Most of these require no contract or commitment, though some offer discounts for prepaying longer terms.

ConstantContact

ConstantContact starts at $20/month for basic email cmapaigns that includes contact management and social sharing, with more expensive plans that include additional features like detailed tracking.

MailChimp

MailChimp offers a free “Entrepreneur” plan that supports up to 12,000 emails to 2,000 subscribers, with paid plans that let you manage much higher volumes.

ActiveCampaign

ActiveCampaign starts at $9/month for up to 500 contacts, with plans going up from there, including enterprise plans that offer dedicated account reps and additional services.

GetResponse

GetResponse has plans starting at $15/month for up to 1,000 subscribers, though they do offer discounts for annual billing.

AWeber

AWeber lets you get started for just $1 for the first month, with months after that starting at just $19/month for unlimited emails to up to 500 subscribers.

Amazon SES

Amazon SES (Simple Email Service) is an outbound-only email-sending service. If you’re already an Amazon EC2 user, you can send up to 2,000 emails per day for free. Otherwise, email messages are charged at $.10 per thousand, with additional fees for data transfer and attachments, making this one of the most affordable email sending options.

Emma

Emma offers plans starting at $45 for unlimited emails for up to 2500 subscribers. They also offer a 20% discount for non-profits, and a 20% discount for annual prepay.

HubSpot Email

HubSpot Email offers a ton of tracking and tools for getting more subscribers, and is part of the overall HubSpot service, which starts at $200/month for your first 100 contacts (and $100/month more per extra 1,000), and goes up from there.

GraphicMail

GraphicMail offers plan pricing based on the number of emails sent or the number of subscribers, with pricing for the former starting at under $10/month, and the latter starting at just $25/month.

Conclusion

While plain text emails can be perfectly sufficient for a lot of communications, they don’t cut it with a lot of others. Understanding how HTML emails work, and knowing the tools and templates available to you to make creating them a lot easier, is vital for virtually any designer.

Featured image/thumbnail, iPhone image via Kārlis Dambrāns

Cameron Chapman

Cameron Chapman is a freelance writer and designer from New England. You can visit her site or follow her on Twitter.