Design Toolkit

The Email Design Toolkit

Send confidently with email design tips, code, and data from Marketing Cloud.

The perfect marketing email should do three things:

Look good.

Email Design Best Practices

Work well.

Email Coding Fundamentals

Get results.

Data for Designers

Email Design Best Practices

Welcome to your crash course in the essentials of responsive email design.

Email design is like nothing else.

There are three distinct email interaction points. First, customers see your envelope content. If they open the message, they see the body content — and ultimately the landing page if they click. Each element must stand on its own, work with the next element, and work holistically with the other two elements to convey a single message and create a unified experience.

Unfortunately, there are no established standards for email coding, making it a challenge for your emails to render and function the intended way.

Additionally, emails render differently on subscribers’ different devices, and some emails may even have images blocked. Studies show that the majority of emails are now read on mobile devices — fundamentally changing email design for the better — including responsive messaging.

You’ll have to consider these combined factors and more every time you create an email.

The 3 Stages of Email Interaction

Before subscribers open an email, they see the "from" name, subject line, and (in some cases) snippet text.

Stage 1

Envelope Content

From

The from name is the text that says who sent the email. It impacts whether your emails get opened, deleted, or reported as spam, so it should be instantly recognizable to subscribers. Usually, this is the name of the brand the subscriber signed up to hear from.

Subject

The subject line tells subscribers what your email is about. Although creativity has its place (check out our round-up of 100 Inspiring Subject Lines), the most effective subject lines are straightforward and encourage engagement. Ideally, they should be 20–40 characters long, avoiding sensational words ("magic," "free") and imperative verbs ("must," "have to") — which readers associate with spam.

Snippet

Snippet text appears right after or below the subject line in several email clients — most notably the iPhone’s native email client, Gmail, and Yahoo Mail — and is composed of the first characters of HTML text in the email. It’s usually pulled from preheader text, which is HTML text that comes before the header of the email. This text is customizable and gives subscribers more information about the content of the email.

The 3 Stages of Email Interaction

The body is what subscribers see when they open an email. Most marketing emails are a mix of text and images, with promotional messages being more image-heavy and transactional messages more text-heavy.

Stage 2

Body Content

Generally, emails consist of:

  1. Preheader text, which is HTML text that acts like a second subject line

  2. A header, which includes your brand’s logo

  3. A navigation bar, which includes a few links to major entry points to your website

  4. A primary message block, which contains the main message of your email

  1. A secondary message block for an additional call to action

  2. A social media bar, with links to your pages on Facebook, Twitter, and other social networks

  3. A footer, which includes an unsubscribe link and your postal address for CAN-SPAM compliance, disclaimers, and other administrative links and text

Keep in mind that subscribers don’t read emails. They scan them. At a glance, subscribers should know what you want them to do next and what’s in it for them.

Preheader text

Header

Navigation bar

Primary message

Secondary message

Social media bar

Footer

The 3 Stages of Email Interaction

Landing pages are the web pages where subscribers arrive when clicking on the calls to action in your emails.

Stage 3

Landing Page

Landing Page
Devices

Email Design Tips for Different Clients (Gmail, Outlook, Yahoo, and Beyond)

Email designers and coders have the challenge of coding not only for proper rendering in multiple devices (like web designers), but also multiple email clients. Coding for email means finding the common denominator that works across all platforms.

Because your emails could potentially look different in Gmail based on the web browser, we recommend using a rendering tool or setting up test accounts and viewing emails in the most common device-OS-browser-client combinations.

No Standards

Email remains a unique challenge because of how email clients (Gmail, Yahoo, Outlook, etc.) accept HTML code. There are no consistent standards across these clients, so it’s important to keep testing over time to understand what’s supported and to keep tabs on rendering errors or changes.

The Challenge of Responsive Design

Desktop-centric emails are optimized for viewing on large monitors with small, tightly clustered links and buttons well suited to mouse clicks, not fingertips. These designs require mobile users to zoom and swipe left and right as well as up and down to interact with emails. More users check email on a mobile device nowadays, so a desktop-centric design may mean a lot of frustrated readers.

Mobile-aware design uses basic techniques to create a single email that functions well across a range of screen sizes — but defers to smartphones. Subscribers aren’t just on smartphones, though, and may be faced with a less than ideal presentation when opening mobile-aware content.

Making your email template mobile-aware involves three key elements:

  1. Employing a single-column layout (two-column product grids are okay)
  2. Using large text, images, and buttons
  3. Spacing out links and buttons — including those in the navigation and social bars — so they can be accurately tapped

See examples of mobile-aware design from the Email Swipe File:

Responsive design is a general term for the advanced techniques that serve up multiple versions or renderings of an email optimized for particular screen resolutions or email clients.

Whether it’s fluid, liquid, scalable, adaptive, or truly responsive design powered by live content, all of these techniques involve extra email design and coding — and often the creation of two or more versions of an email. The result, however, is email messaging that looks good and functions properly on a range of devices.

See examples of responsive design from the Email Swipe File:

 

Select another device to view how Desktop-Centric Design displays on other devices

Dealing with Image Blocking

Many inbox providers block the images in emails by default. That means subscribers have to manually enable or turn on images — either for each individual email or for all the emails from a particular sender — for the images in your emails to be displayed. Thankfully, there are several defensive design tactics you can use to ensure the graceful degradation of your emails when images are blocked.

1.

When text is part of an image, use HTML text rather than graphical text.

2.

Use alt text for your images. A common practice is to use the graphical text of an image as alt text. Keep in mind that alt text can be styled.

3.

Select a background color for table cells. This can help group text and even create buttons.
Pay more attention to defensive design when creating transactional emails, welcome emails, win-back emails, and re-permission emails. Since these are emails that are more likely to be viewed with images blocked, more HTML text in particular should be used.

See examples of defensive design from the Email Swipe File:

Email Coding Fundamentals

A general guide to writing HTML for email

Code Essentials for Layout

  • Control the layout using standard HTML tables and avoid CSS for layout (DIV, float, etc).

  • Use HTML tables, but don’t stack them. Nest all content and tables inside one structural table.

  • Add inline CSS to the <td> tag.

    <td style=”font-family: Arial, Helvetica, sans- serif; font-size: 12px; color:#666666; padding-bottom: 5px;” align=”center”>
  • Instead of CSS margins, use CSS padding or spacer GIFs to create spacing between elements.

  • Specify accurate table widths: errors in math will cause incorrect display. Also, specify accurate colspans and rowspans, as extra values will create extra spaces. Avoid rowspans if possible, as they may not render correctly in some email clients.

  • In Outlook 07/10/13, CSS padding applied to the top or bottom of one cell in a multi-column layout will be applied to all columns in that table, causing the layout to render incorrectly.

  • To fix email alignment and background color issues in non-IE browsers, insert the following CSS code:

    <STYLE type=”text/css”> 
    ReadMsgBody{width: 100%;}
    .ExternalClass{width: 100%;}
    </STYLE>
  • Indent code to allow for easier troubleshooting and code-sharing across multiple resources. To turn on code-indenting in Dreamweaver, go to Edit > Preferences > Code Format and check the “Indent” box. To apply this setting to existing files, click the “Format Source Code” button and then click “Apply Source Formatting.”

  • Empty <td> cells won’t render properly in Outlook 07/10, Outlook.com, and Lotus Notes. Use a 1x1 spacer GIF in empty table cells instead of a &nbsp; (non-breaking space) to prevent empty cells from collapsing and breaking the layout. To remove the extra space (line-height) added to spacer GIFs, use style=”font-size:0%;”.

  • Avoid using tables with multiple columns and multiple rows. Instead, nest tables so that a single three-column table holds a multiple column table in the center, allowing the right and left columns to control padding for the entire page.

    Use this nested table structure: Instead of this:
    Use this Instead of this

Take a self-guided tour of Marketing Cloud.

Explore cross-channel solutions to unite marketing, sales, and service.

Text, Links, Images, Videos, and Forms

  • Use in-line CSS to force links to display with or without an underline.

    <a href=”” alias=”” target=”_blank” style=”text-decoration: underline;”></a>
  • Use inline CSS to specify a link color other than default “web” blue.

  • Block level elements such as <p> and <h1> are stripped out or behave unexpectedly, which can affect your layout. Enclose all text within <td> cells instead and use inline styles to control the text.

  • Since some email clients block images by default, make sure important images contain an alt attribute. Use alt tags on all images, even if you don’t want one displayed. If no alt tag is needed, insert a blank tag: <img alt=”” src...>. Alt should come before source (src) to aid with mobile rendering on BlackBerry. Include font, font size, and color properties in your <img> tag to style your alt text.

  • Set border=“0” in an img tag to prevent a blue border around linked images and add style=“display: block; to prevent rendering issues in Outlook and Gmail in Firefox.

    <img alt=”” src=”spacer.gif” width=”1” height=”20” border=”0” style=”display:block” />
  • Use absolute URL references for the image path rather than relative paths.

    <img style=”display: block;” alt=”Salesforce Marketing Cloud“ src=”http://image.jpg” width=”20” height=”10” />
  • Don’t rely on background images for primary content, but include them only as secondary elements.

  • To ensure usability in all environments, avoid rich media like Flash.

  • Use animated GIFs knowing that only the first frame will display in Outlook 07/10/13. If video is desired, show a screenshot of the video, linking to your website or other channels where it can be easily played and tracked more robustly.

  • Background images don’t render in Outlook 07/10/13 without a special code fix. If you use a background image, treat it as a secondary design element, using an appropriate background color to make sure any displayed text is legible (i.e., not white text on a white background).

  • Image dimensions in HTML should match the actual image’s dimensions. If not, image distortion and pixellation can occur. Additionally, in-line sizing is ignored by some older email clients, so this precaution will ensure consistent rendering.

  • Avoid using shorthand in inline CSS. Be sure to use the full six digits for HEX color codes (#000001 rather than #000) and avoid RGB colors. Write each CSS property separately instead of combining them into one single shorthand declaration.

    Use this: Instead of this:
    <td align=”left” style=”font-family: Arial, Helvetica, sans-serif; color: #000001; font-size: 20px;”>
    <td align=”left” style=”font: Arial, Helvetica, sans-serif #000001 20px;”>

  • The hex code #000000 (black) on href tags is not recommended because some clients (primarily Gmail) will override it with blue. To show black, use the hex code #000001, which appears almost exactly the same.

  • Alt tags should not contain the greater than (>) symbol >. In AOL, this tag can cause HTML to be displayed until the next closing tag in the code.

  • Images less than body line-height, usually 18-20px, need to contain style=”line- height:0px; font-size:0px;” or something similar to force email clients to not add space around the image equivalent to the text line-height.

  • Outlook 07/10/13 and Outlook.com don’t support forms. Instead of a form, provide a link to complete the form on a landing page. If you choose to use them in an email anyway, be sure to include clear instructions on how to view the email on a web page so subscribers can complete the form.

  • Use <body style=”-webkit-text-size-adjust:none;”> to control iPhone text rendering, if desired. iOS Mail doesn’t natively show any fonts smaller than 13px, so this will disable the auto-scaling of HTML text.

Want more?

Deepen your email knowledge with the resources found here:

Responsive Email Design Tips

Your subscribers want emails to look as good on their mobile devices as they do on larger screens. You can adjust the standard version of an email with a few code enhancements to perfect the way it performs on a smaller screen. This may include specifying larger text sizes, resizing images, showing or hiding sections of the email, or making one side drop below the other side. This approach is called responsive email design, and these techniques are generally controlled by CSS.

A few responsive design notes to remember:

  • When coding a responsive design for email, @media queries are used to activate the mobile version of the email.
  • Classes are used to adjust, hide, or introduce elements of the email on mobile.
  • Mobile email apps (like Gmail and Outlook) as well as native email apps (like iOS Mail and Android email) behave differently.
  • For some techniques, responsive code must be placed in <style type="text/css"> as well as inline.

Email clients are always evolving, so it’s important to continually keep tabs on how your emails render in every inbox. You can consult these coding fundamentals anytime as you build and test emails. No matter what kind of email you’re creating, remember that your code framework and QA process both need to meet the specific needs of your brand and subscribers.

Troubleshooting Common Rendering Errors

  • Gmail
  • iOS Mail
  • Yahoo
  • Outlook 07/10
  • Outlook.com
  • Lotus Notes
  • Multiple Clients
Error Fix Email Clients Affected
Extra space below images Add style=“display:block;” to <img>
Embedded CSS not displaying properly Use inline CSS
CSS-based layout not displaying properly Use tables for layout; “clear” and “float” attributes are not always supported
Link color not displaying properly Nest a <span style=“color: #CCCCCC;”>Link</span> within the <a>
Blue border appearing around linked image Add border=“0” to image tags
Animated GIF not displaying Ensure first frame of the GIF conveys enough, as only the first frame will display in Outlook 07/10/13
Background image missing Use an HTML background instead of the CSS background image property
Content misaligned Specify accurate widths and align attributes on all <table> and <td> tags
Layout broken Verify correct syntax and no missing closing tags
Email length truncating: generally occurs when downloading the message over cellular data (not Wi-Fi) if the email’s HTML is larger than 15k Remove redundant HTML, hard returns, and spaces in the code; reduce the amount of content; convert some text and image content to just images

Data for Designers

Using data to inform design decisions

Device-Based Inputs

What devices are people truly buying and using around the world? This data impacts your design and code workflow, as well as your audience profile. For example, if you have an Outlook audience, you’ll adjust for the preview pane and image-blocking. If you have a predominantly iPhone or Android audience, you’ll adjust for screen size, pixel density, the touch experience, and so on, accordingly.

  • Android
  • iPhone
  • Other

Track and consider device-based data at a global and a brand level. Worldwide data may be different than your current audience data, but the global numbers may indicate shifts and trends that you’ll need to design for soon.

1 Research data: IDC Worldwide / 2 Research data: Quantcast, Piper Jaffray
3 forbes.com/sites/tonybradley/2013/11/15/android-dominates-market-share-but-apple-makes-all-the-money/

Performance-Based Inputs

Performance-based data can help you make decisions and increase conversions based on how your emails are performing — but first, identify the specific results you want from your email marketing. With clear goals in mind, the data will prove more valuable and actionable.

Hotspots

One excellent way to visualize performance-based data is a click overlay. A click overlay is like a heat map showing you the hottest areas — where subscribers actually click. With each send, you should look at click overlays to discover if readers really clicked (or tapped) where your design was meant to drive action.

This visual will also help get you buy-in from your team to make informed design decisions. Follow these steps to create one:

  • After a send, go into tracking for that email, view the click overlay, and export or take a screenshot of the data.
  • Determine what parts were most trafficked and which parts were overlooked.
  • Visualize your click overlay. Draw circles or use brush sizes in Photoshop to place color over the links to visually depict where people are clicking. Are those the areas you intended?

User Experience and Human Behavior

While designing, remember a few essentials about human behavior in regard to email.
Keep in mind that there's no magical industry benchmark.

For one brand we studied, 16% of click-throughs were from people who didn’t even open or download images! Just 2%–3% of emails are opened on two different platforms — so the first open is your one chance to impress. Peak mobile times are early morning and late evening. For a mobile-heavy subscriber base, this might bear heavily on your send times. People generally click less on mobile devices than they do on desktop. Many factors contribute to this: usability, trust, and time, to name a few.

How People Use Mobile Devices

Subscribers’ relationships with their mobile devices are constantly evolving, but consider these facts — and their implications for your emails.

  • Desktop
  • Mobile
  • Andriod
  • iPhone
  • Other

4 Research data: emailclientmarketshare.com, Litmus
Note: Percentages may not equal 100% due to rounding.
According to one retailer and one send, with a one-million-plus dataset, we found the following email behavior and mobile breakdown by device.

Platform Affinity

We’ve found that many subscribers interact with a given brand’s email program over time only in one (mobile) or the other (desktop). But when subscribers do happen to open that email during their lifecycle on both mobile and desktop, they tend to prefer desktop for clicking.5

60%

of people who open emails are opening only on mobile, according to data based on one customer’s daily sends for 30 days.

5Salesforce Marketing Cloud research: one customer, one-million-plus dataset, daily sends over 30 days

Making Decisions with Your Expertise

Your experience with your subscribers is something no stat can replace. Certain decisions don’t need to be tested; they’re clear to you, based on your experience with the brand, email industry, and design profession.

Some elements that good email designers can execute without testing and data include:

Making Decisions with Data

Of course, while some decisions are clear to you without research, other choices should be driven by data — either to confirm an approach or reinforce a change you want to make.

Common testable elements include:

When making a design decision, consider the difference between optimization and design innovation:

Optimization means:

What works best in the current model?

Design innovation means:

What is the best possible model?

6Metrics Driven Design: Joshua Porter, slideshare.net/andrew_null/metrics-driven-design-by-joshua-porter

Ready to Start Testing?

Before you run off to test every element in your email design, follow these steps to create a truly strategic testing plan.

Remember your dormant audience.

This dormant audience masks the true impact of improvements and will dilute your results. For some brands, this dormant subscriber segment can be as large as 1/3 or 2/3 of the total subscriber base.

Test with new subscribers.

New subscribers are the perfect group for testing, because they haven’t been influenced by past messaging and marketing efforts. A welcome email campaign is a great place to start. Statistically, those readers are the most engaged during that phase of an email program’s lifecycle.

Keep testing: Change occurs over time.

Your subscribers need to adjust when big changes are implemented, and that doesn’t happen instantly or with a single redesign. When you’re testing, you’re talking about a long-term change in the way your emails are experienced. Give it time, and don’t be discouraged if results aren’t immediately obvious.

View the full expierence on Desktop & Tablet

Or download the Design Toolkit PDF

Email Design Basics

A crash course in the fundamentals of email design

Email design is like nothing else. Here’s how it’s different...

Subscribers interact with emails in three stages. First, they see the envelope content. Then if they open, they see the body content. Then if they click, they see the landing page. Each element must in equal parts stand on its own, work with the next element, and work holistically with the other two elements to convey a single message and create a unified experience.

Email clients add another layer of complexity to coding and design. The number of inbox providers is growing in an environment where there are no standards for email coding. That makes it extra challenging to have your emails render and function the way you intend.

Emails render differently in different environments, especially on mobile. The majority of emails are now read on mobile devices. That’s fundamentally changing email design and spurring adoption of mobile-aware and responsive email design.

The images in your emails might be blocked. A picture is worth a thousand words...but often the images in your emails aren’t enabled by subscribers That means your emails can’t rely solely on images to communicate your message.

Email Coding Fundamentals

A general guide to writing HTML for email

HTML standards have long been in place for web design, but email remains a unique challenge because no universal standard exists—and subscribers increasingly open emails on more devices and in more environments. In this guide, we provide some useful tips to help you develop the fundamentals for writing HTML for email. Keep these guidelines in mind when designing your next marketing emails. Here’s a snapshot of what you’ll discover:

  • Code essentials for layout
  • Text, links, images, video, and form usage tips and tricks
  • Notes on how to tackle mobile rendering
  • Ways to troubleshoot common rendering errors

Data for Designers

Using data to inform design decisions

Email designers are the gatekeepers for how people consume emails worldwide. As an email designer, you’re constantly making decisions that affect subscribers’ emotions and ability to use and experience emails. Whether you’re handling branding elements and photography, or controlling how legible, clickable, and useful an email is, you directly impact revenue with these decisions.

Of course, this is a hefty responsibility, which requires plenty of research and data before you even open Photoshop. That’s why we’ve compiled these strategic resources to help you take a data- based approach to the way you design.

To enhance your left-brain perspective on your emails, begin asking questions like:

  • What inputs do I have available to me, and how was the data gathered? Is this survey-based data or open data?
  • Is this statistic in its proper context? What else about the send or situation was noteworthy?
  • When it comes to validity, is the data apples to apples when I compare it to my specific brand? Am I making a big decision based on someone else’s A/B test?

Pull up a seat to the strategic table, and begin honing your analytical skills along with your email marketing expertise. Let’s dig into the data.