Foundations: Designing Email
We all know that getting the basics of email marketing right - permissions, CAN-SPAM compliancy, sending infrastructure - is vital for getting your message into an inbox. However, once your message is delivered, the content and design of your message are what separate a successful campaign from all the other junk that people normally get in their inbox.
While we discuss content more thoroughly in our Content and Strategy article, this article goes over some of the things you need to keep in mind when initially designing any email campaign. We will look at how different types of content affect your choice of an email layout before discussing how to properly utilize typography, images, and calls to action in your email designs.
Consider Your Content
So much of email design depends on content. Different types of emails necessitate different designs. There is no one-size-fits-all email design that will guarantee conversions, but there are some guidelines to designing an appropriate email for your content.
As discussed in our Content and Strategy article, there are two basic types of email: transactional and marketing. They have differing goals and require unique approaches when it comes to design.
The sole purpose of a transactional email is to convey vital information as clearly as possible. Businesses use transactional emails as purchase receipts, for providing account information or updates on products or services . In every case, the clarity of the content is paramount. Therefore, transactional emails typically require very clean, simple layouts. While you should still brand transactional emails, excessive ornamentation is discouraged.
While marketing emails still convey information, their goal is to get you to take some action within an email. Whether it’s to click through to a blog article, take advantage of a sale, or register for an upcoming event, they typically rely on ornamentation, branding, and what we typically think of as design to do the job.
One of the clearest ways that transactional and marketing emails define themselves is through the use of different layouts.
There are typically two layouts used in email design: single-column and multi-column.
Generally, transactional emails are very simple, single-column emails. The goal of the email is to present vital information clearly - single-column layouts are perfect in this situation.
Single-column layouts aren’t exclusive to transactional emails, though. They are perfect any time you want to put the focus on a specific piece of content. Shorter blog updates, event invitations, and even digest emails can all work very well in single-column layouts.
Marketing emails are a broad classification. They take many forms and serve diverse purposes. Generally speaking, though, they contain more content in the form of text, images, and calls to action. Layouts with multiple columns, or a hybrid of single and multiple columns, can allow designers to better organize large amounts of content.
It’s important to understand that there is no “magic bullet” in email design. What works for one campaign may not for another. That being said, many designers are finding that cleaner, single-column layouts increasingly perform better. Not only are they easier to code and get working across clients, they are easier for readers to consume on mobile devices. As mobile email opens continue to rise, this is a trend that email designers should keep in mind.
Regardless of which type of layout you decide to implement, there are a few simple guidelines that will help keep your emails effective.
- Keep email layouts around 500-600 pixels wide. Most desktop preview panes and mobile screens fall around there, so emails with similar widths display well, even when not using responsive techniques.
- Keep email layouts clean and uncluttered. Even when using a multi-column layout, sections and content should be clearly organized and easy to scan.
- Keep transactional emails as simple as possible. Avoid complex layouts and present your information clearly.
Typography is the foundation of every email. Since images can (and will) be disabled in a variety of clients, text is the most important way to convey your message. Therefore, you need to make sure the typography in your email is both readable and reliable.
The wide range of email clients and operating systems available can make choosing a font for your email tricky. Not all clients and operating systems support every font, especially when it comes to using web fonts. That’s why it is necessary to pick a font stack that includes proven, web-safe fonts.
Some of the most popular and widely supported fonts include:
- Times New Roman
You can experiment with more advanced font stacks like:
font-family:Century Gothic, Avenir, Helvetica, Arial, sans-serif;
font-family:Didot, Georgia, Times New Roman;
But you should always make sure that your stack contains solid, web safe fonts to avoid the email client or operating system displaying your message in a typeface that doesn’t fit your brand or design.
Font-size is another important consideration when designing an email. You want your message to be readable on a variety of devices. iOS Mail, in particular, automatically resizes any fonts smaller than 13px. It’s a good idea to keep your text larger than that to avoid your design breaking, and slightly larger text can aid in readability.
Finally, contrast is important in keeping your email readable. Using light colored text on a light background is a recipe for disaster. The same goes for the inverse - dark text on a dark background. You will also want to test your designs on mobile devices with the brightness turned down. Many users lower the brightness of their screen to conserve their battery. If the contrast in your email is too low, chances are good that your message will be unreadable and unusable.
Transactional emails will often only have text, but most marketing emails will make use of images to entice the reader to take action within the email. So, it’s likely that your email will include images of some sort. If not handled properly, images can break your design, bloat your message size, and obscure your call to action.
There are five parts to a reliable image:
- Absolute Paths
- Explicit Dimensions
- ALT Text
- File Format
- Image Size
Hosting your images on a reliable server and using absolute paths ensures that your images will be properly referenced and downloaded. Declaring explicit dimensions for your images will keep them from breaking your layout across email clients that can’t properly interpolate image sizes. Using ALT text will keep the content in your images understandable even when images are disabled by the email client.
Here’s an example of a well-coded image:
<img src="...path to image..." class="img-max" alt="eat your own dog food" style="display: block; font-family: Arial; color: #ffffff; font-size: 28px;" border="0" width="500" height="287" />
And how that image will be rendered when images are on and disabled:
Not all email clients support every image format, either. Typically, you will want to save your images as either a JPEG or a GIF. Using a PNG works well, too, unless you have subscribers on outdated clients like Lotus Notes 6 or 7.
You will want to compress your images, too. As more readers rely on their mobile devices for consuming email, message and image size is becoming more important. Compressing your images using tools like RIOT or ImageOptim is a quick way to keep your email sizes manageable.
Finally, it’s a good idea to link your images to a landing page. People are used to images acting as links on the web. It can be frustrating when conventions are broken. Clickable images are a great way to make the experience of interacting with your email enjoyable, not to mention a wonderful way to get people where you want them.
Calls to Action
The purpose of most email is to get the recipient to do something. These calls to action are the lifeblood of a campaign, which is why you need to make them obvious, easy to press, and render reliably across clients and devices.
As more people view emails on mobile devices, it’s important to keep CTAs touchable. At a minimum, buttons should be 44 pixels by 44 pixels. Most people’s thumbs will have no problem tapping a target that size. Keeping your buttons big also makes them obvious. It’s hard to miss a giant button and, if well-designed, harder still to avoid the temptation to press them.
Crowding buttons and text links can be an issue. There is little as frustrating as thinking you pressed one link and landing on an entirely unexpected page. Keeping a good amount of whitespace around any CTA - text link, button, or image - is a great way to solve this problem.
When using text links, use color and/or text-decoration to make it obvious that they are, in fact, links. Contrast is your friend.
Finally, it’s important to consider how your calls to action are actually built. A lot of designers rely on images for buttons, which can be a problem when images are disabled by an email client. While using images for buttons is sometimes unavoidable, and providing alt-text can help, a better method is to use bulletproof buttons.
Bulletproof buttons are buttons which are built with HTML and, in some cases, VML for rendering certain effects in Outlook. Since they are built with code, they render well across most email clients and, more importantly, still look like buttons even when images are disabled. We’ll talk more about how to implement bulletproof buttons in the next section of the Foundations series: Email Coding 101.
The Developer's Guide to Designing and Testing Triggered and Transactional Emails
Transactional Emails: A Frequently Missed Opportunity
MailChimp: Types of Email
Webinar: Creative Typography in Email
Campaign Monitor: Designing for the Inbox