e
Design
Toolkit
Design tips, code, and data
for better email design
2
salesforce.com/marketingcloud
2
e Design Toolkit
Whether you’re a tech-savvy coder, an engagement-focused marketer, or have a background in
illustration and design, we’re betting that you want to build better emails.
The perfect marketing email should do three things:
1. Look good.
2. Work well.
3. Get results.
This three-part Design Toolkit addresses all three, with proven tips and advice from five email
experts: Chad White, Ann Marie Judson-Patrick, Tom Deeter, Kristina Huffman, and Schuyler
Wareham. Read a bit more about their expertise next, and then get ready for an email foundation
that will take your conversions and functionalities to the next level.
Welcome, designers!
Table of Contents
Email Design Basics | Chad White 4
Email Coding Fundamentals | Ann Marie Judson-Patrick and Tom Deeter 13
Data for Designers | Kristina Huffman and Schuyler Wareham 19
3
salesforce.com/marketingcloud
3
e Design Toolkit
Kristina Huffman
Global Practice Lead, Design Consulting
Salesforce Marketing Cloud
@krudz
Kristina Huffman leads Creative Services at the Marketing Cloud—
she and her team execute on cross-channel campaigns for leading
digital marketers, and have a deep specialty in data-driven email
design and mobile optimization.
Schuyler Wareham
Global Practice Lead, Data Analytics
Salesforce Marketing Cloud
@sky_wareham
Schuyler Wareham handles all things analytics as part of the
Marketing Cloud’s strategic services consulting group. His foremost
objective: seeking data to provide greater clarity on consumer
behavior across digital channels. Schuyler weaves these insights
into strategic recommendations that help marketers and consumers
alike.
Contributors
Chad White
Lead Research Analyst
Salesforce Marketing Cloud
@chadswhite
Author of the book Email Marketing Rules and 2,600+ blog posts on
digital marketing, Chad is a champion of best practices and a retail
industry watcher. He’s also a former journalist.
Ann Marie Judson-Patrick
Production Consultant, Campaign Services
Salesforce Marketing Cloud
@amjudsonpatrick
With over 15 years of HTML and design experience, Ann Marie
has worn multiple hats, with the ultimate goal of helping Marketing
Cloud clients and partners develop multiple strategic marketing
campaigns—then execute those campaigns.
Tom Deeter
Production Consultant, Campaign Services
Salesforce Marketing Cloud
@tomdeeter
Tom works with Marketing Cloud clients and design consultants to
code effective email communications, landing pages, and branded
email templates, all while implementing industry best practices and
adhering to associated brand standards.
Email Design
Basics
A crash course in the essentials
of email design
5
salesforce.com/marketingcloud
5
e Design Toolkit
5
Email Design Basics
Email Design Basics
A crash course in the essentials of email design
salesforce.com/marketingcloud
by Chad White
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.
6
salesforce.com/marketingcloud
6
e Design ToolkitEmail Design Basics6 salesforce.com/marketingcloud
Before an email is opened, subscribers see the envelope content,
which is the from name, subject line, and, in some cases,
snippet text.
The from name is the text that says who sent the email. The from
name has the greatest impact on whether your emails get opened,
deleted, or reported as spam, so your from name should be instantly
recognizable by subscribers. Usually, this is the name of the brand
the subscriber signed up to hear from.
The subject line tells subscribers what your email is about. Although
creativity has its place (check out our roundup of 100 Inspiring
Subject Lines), the most effective subject lines are straightforward
and predispose openers to engage with the content of an email.
They should be 20-40 characters long ideally, but testing is
highly advised.
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 comprised of the first characters of HTML
text in the email. Most often, it’s pulled from preheader text, which
is HTML text that comes before the header of the email. This text
should extend or reinforce the subject line, giving subscribers more
information about the content of the email.
The 3 Stages of Email Interaction
Emails are a gateway, not the destination. Opens and clicks play a role, but the ultimate
goal is conversions. To get to that point, it’s important to understand each of the three stages
of email interaction.
Stage 1: Envelope Content
7
salesforce.com/marketingcloud
7
e Design Toolkit
When an email is opened, subscribers then see the body content of the email. Most marketing
emails are a mix of text and images, with promotional messages being more image-heavy and
transactional messaging more text-heavy. Also, lifestyle brands tend to lean more toward images,
while value brands tend toward more text.
Generally speaking, 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
5. A secondary message block for an additional call to action or two
6. A social media bar, with links to your pages on Facebook, Twitter, and other social networks
7. 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. So pay extra attention to headlines,
use bullet points and sentence fragments to communicate quickly, and make call-to-action links and
buttons clear and obvious. At a glance, subscribers should know what you want them to do next
and what’s in it for them.
Landing pages are the web pages where subscribers arrive when clicking on the calls to action in
your emails. There should be a strong connection between the email content and the landing page
to reassure subscribers that they’ve arrived at the right place. For instance, consider repeating
headlines or images from the email on the landing page.
Stage 3: Landing Page
Stage 2: Body Content
7
Email Design Basicssalesforce.com/marketingcloud
Email Formatting
This example shows the wireframe of a
typical email.
header
navigation bar
preheader text
secondary message
social media bar
primary message
footer
8
salesforce.com/marketingcloud
8
e Design ToolkitEmail Design Basics8 salesforce.com/marketingcloud
Gmail, Outlook, AOL, Yahoo, Lotus Notes, and Beyond
Website developers have it relatively easy. They only have to deal with a number of environments
equal to the number of device types times the number of operating systems times the number
of browsers.
Email designers and coders have all of that, times the number of email clients—of which there are an
increasing number. That means email coding is an extreme exercise in finding the lowest common
denominator coding that works across all platforms.
Because your emails could potentially look different in Gmail using Firefox and Gmail using Internet
Explorer, 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 the way the email “client”
or “reader” (AOL, Yahoo, Gmail,
Outlook.com, Outlook, Lotus Notes,
etc.) accepts HTML code. There are
no consistent standards across these
clients, so email design and code need
to acknowledge these differences. It’s
important to know what’s supported
and keep testing over time to keep tabs
on any rendering errors or changes.
Website Complexity Multiplied by X
A lack of standards around email coding makes consistent rendering of an email very challenging.
9
salesforce.com/marketingcloud
9
e Design Toolkit
“e web’s moved beyond
the desktop, and it’s not
looking back. e number
of devices we’re designing
for is growing just as
quickly as mobile trac.”
Ethan Marcotte
Designer, Developer, Author:
Responsive Web Design
9
Email Design Basicssalesforce.com/marketingcloud
Desktop-Centric Design
Representing the pre-mobile status quo, desktop-centric email design is optimized for viewing on
large monitors and has 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.
The Challenge of Mobile Email Design
Mobile is currently the biggest design challenge for email marketers because emails have typically
been designed for desktop viewing, not for smartphone viewing. But desktop-centric email design
is gradually being replaced by mobile-aware design and responsive design.
Emails that use desktop-centric design look good on desktops, but suffer in legibility and usability on tablets and,
especially, smartphones.
10
salesforce.com/marketingcloud
10
e Design Toolkit
Mobile-Aware Design
Mobile-aware design uses basic techniques to create a single email that functions well across a
range of screen sizes, but is deferential to smartphones.
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 navigation, social, and administrative bars—
so they can be accurately tapped
Email Design Basics10 salesforce.com/marketingcloud
Examples of mobile-aware design
from the Email Swipe File
Amazon.com
Reiss
Vizify
Emails that use mobile-aware design are finger-friendly and use large text and images so they still look good when
scaled down for tablet and smartphone screens.
11
salesforce.com/marketingcloud
11
e Design Toolkit
Emails that use responsive design techniques can look different—even radically different—when viewed on
a desktop, tablet, or smartphone, creating an experience that’s ideal for each of those platforms.
11
Email Design Basicssalesforce.com/marketingcloud
Responsive Design
Responsive design has become a general term for a basket of advanced techniques that serve
up versions or renderings of an email that are optimized for particular screen resolutions or email
clients.
Whether it’s fluid, liquid, scalable, adaptive, or truly responsive design or 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. But the result is email messaging that looks good and functions properly on a
range of devices.
Examples of responsive design
from the Email Swipe File
Foursquare
Toms
AT&T
12
salesforce.com/marketingcloud
12
e Design Toolkit
Dealing with Image Blocking
A significant number of inbox providers still block the images of emails by default. That means that
subscribers have to 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. First, use HTML text whenever possible rather than
graphical text, where text is part of an image.
Second, 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.
And third, use 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.
Now for Something More Advanced
Now that you have these basic email design concepts under your belt, you’re ready to take a deeper
dive into coding and data-driven design.
Examples of defensive design
from the Email Swipe File
Orbitz
Twitter
Mothercare
Email Design Basics12 salesforce.com/marketingcloud
Email Coding
Fundamentals
A general guide to writing HTML for email
14
salesforce.com/marketingcloud
14
e Design Toolkit
Email Coding Fundamentals
A general guide to writing HTML for email
by Ann Marie Judson-Patrick and Tom Deeter
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
“As email marketers,
we’re able to continually
learn, tinker, change,
and nd better ways
to do things.”
Andrea Smith
Design Lead,
Content Marketing & Research
Salesforce Marketing Cloud
Email Coding Fundamentals14 salesforce.com/marketingcloud
15
salesforce.com/marketingcloud
15
e Design Toolkit
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. See Example A.
• 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 inOutlook 07/10, Outlook.com, and Lotus Notes. Use a
1x1 spacer GIF in empty table cells instead of a (non-breaking space) to preventempty
cells from collapsing and breaking the layout. To remove the extra space (line-height) added to
spacer GIFs, use style =”fo nt-siz e: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. See Example B.
Example A
<td style=”font-family:
Arial, Helvetica, sans-
serif; font-size: 12px;
color:#666666;
padding-bottom: 5px;”
align=”center”>
Example B
Use this nested table structure:
Instead of this:
15
Email Coding Fundamentalssalesforce.com/marketingcloud
16
salesforce.com/marketingcloud
16
e Design Toolkit
Example C
<a href=”” alias=””
target=” _ blank”
style=”text-decoration:
underline;”></a>
Example D
<img alt=”” src=”spacer.
gif” width=”1”
height=”20” border=”0”
style=”display:block” />
Example E
<img style=”display:
block;” alt=”Salesforce
Marketing Cloud“
src=”http://image.jpg”
width=”20” height=”10” />
Example F
Use this:
<td align=”left”
style =”font-fa m ily: Arial,
Helvetica, sans-serif;
color: #000001;
fo nt-size: 20 px;”>
Instead of this:
<td align=”left”
style=”font: Arial,
Helvetica, sans-serif
#000001 20px;”>
Text, Links, Images, Videos, and Forms
• Use inline CSS to force links to display with or without an underline. See Example C.
• Use inline CSS to specify a link color other than default “web” blue.
• Block level elements such <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.com and Gmail in Firefox.
See Example D.
• Use absolute URL references for the image path rather than relative paths. See Example E.
• 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, inline 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. See Example F.
• 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.
Email Coding Fundamentals16 salesforce.com/marketingcloud
17
salesforce.com/marketingcloud
17
e Design Toolkit
• 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 < b o d y style =”-we bk it-te xt-siz e -adjust:non e;”> 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.
Mobile Rendering
Your subscribers want emails to work just as well on their mobile devices as they do on their larger
screens. To enhance the way an email looks and works on a smaller screen, you can adjust the
standard version of the email with a few code enhancements. 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, to name a few. This approach is called responsive 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.com) as well as native email apps (like iOS Mail and
Android email) behave differently.
• For some techniques, responsive code must be placed in <style> as well as inline.
Email clients are always evolving, so it’s important to continually keep tabs (no Gmail pun intended)
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.
Additional Code, Testing,
and Analytics Resources
To deepen your email coding
education, bookmark these
helpful links.
Responsive
Template Shells
Code in Color AMPscript
and HTML Editor
Litmus Email Testing
and Analytics
Return Path Inbox
Tools Suite
17
Email Coding Fundamentalssalesforce.com/marketingcloud
18
salesforce.com/marketingcloud
18
e Design Toolkit
18
Email Coding Fundamentals18
Troubleshooting Common Rendering Errors
After all that coding, what could be more frustrating than an error?! Use this table to fix common
issues in HTML for email.
Error Fix Email Clients Affected
Extra space
below images
Add style=“display:
blo ck;” to <img>
Outlook.com (non-IE),
Gmail, Yahoo
Embedded CSS not
displaying properly
Use inline CSS Gmail, Lotus Notes
CSS-based layout not
displaying properly
Use tables for layout; “clear” and
“float” attributes are not
always supported
Outlook 07/10,
Lotus Notes
Link color not displaying properly
Nest a <span style=“color:
#CCCCCC;”>Link</span>
within the <a>
Yahoo
Blue border appearing around
linked image
Add b order=“0”
to image tags
Multiple clients
Animated GIF not displaying
Ensure first frame of the GIF
conveys enough, as only the
first frame will display in Outlook
07/10/13
Outlook 07/10
Background
image missing
Use an HTML background
instead of the CSS background-
image property
Gmail and Outlook.com (need fix);
Outlook 07/10 and
Lotus Notes (no support)
Content misaligned
Specify accurate widths and
align attributes on all <table>
and <td> tags
Multiple clients,
primarily Outlook 07/10
and Internet Explorer
Layout broken
Verify correct syntax and no
missing closing tags
Multiple clients,
primarily Gmail
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
iOS Mail, Gmail, Yahoo
Testing: A Designer’s Best Friend
As you’re building a new email or
even revamping an existing code
shell, leave plenty of time to test for
proper rendering in your audience’s
top email clients. Testing software
is hugely beneficial, and additional
native testing through test email ac-
counts can be a great way to trouble-
shoot specific display errors. Using
both can be an important part of a
successful QA process.
Ready for more?
Explore your
email potential at
salesforce.com/
marketingcloud
salesforce.com/marketingcloud
19
salesforce.com/marketingcloud
19
e Design Toolkit
Data for
Designers
Using data to inform design decisions
20
salesforce.com/marketingcloud
20
e Design Toolkit
Data for Designers
Using data to inform design decisions
by Kristina Huffman and Schuyler Wareham
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.
“e magic formula for
your brand will dier from
the magic formula for your
competitors.”
Jay Baer
President, Convince & Convert
Data for Designers20 salesforce.com/marketingcloud
21
salesforce.com/marketingcloud
21
e Design Toolkit
Device-Based Inputs
As you already know, subscribers increasingly prefer to read emails on mobile devices, and that fact
must inform your email design decisions. 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.
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.
Data Inputs Available to Designers
As a designer, you have two primary inputs (or sources and types) of data to consider:
device-based inputs and performance-based inputs.
Market Share Isn’t Everything
While Android apps may have
dominated the market in terms
of downloads, Apple still made
56% of profits in the mobile
device market in Q3 of 2013.
3
Depending what sources you consult
(and when), market share data is
different; look at all inputs to make
the best decisions.
Global Shipments of Mobile Phones, by Device Type
1
13%79%
Amount of Website Browsing on Mobile Phones, by Device Type
2
65%30%
App Downloads by Device Type
3
18%75%
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/
Android iPhone Other
21
Data for Designerssalesforce.com/marketingcloud
22
salesforce.com/marketingcloud
22
e Design Toolkit
Performance-Based Inputs
When you think about how your emails perform, you probably think about conversion—your
audience’s actual response to your emails, whether you measure conversion by purchases,
sign-ups, shares, or something else. Performance-based data can help you make decisions
and increase conversions based on how your emails are performing, but be sure your brand
knows exactly what results you’re seeking from email marketing, or else performance-based
data won’t be as useful.
One excellent way to visualize performance-based data about your email program 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 check if subscribers clicked
(or tapped) where you designed them to take 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. For example, use a 40px brush size to show
40% of clicks, and so on. Are those the areas you intended?
Click Overlays
Based on your goals, an overlay
can illuminate the weaknesses and
strengths of your email design, and
help you find areas for improving
conversion. Did they click where
you designed them to? Were there
any surprises?
Data for Designers22 salesforce.com/marketingcloud
23
salesforce.com/marketingcloud
23
e Design Toolkit
One Open, One Click
For one customer’s send to a one-
million-plus group, 72% of opens
were unique and 81% of clicks were
unique. You only get one open and
one click. What will you use it on?
Human Behavior “Benchmarks”
While designing, remember a few essentials about human behavior in regard to email.
True, there’s no magical industry benchmark. But you may want to consider these key truths:
• People click without opening. For one brand we studied, 16% of click-throughs were from
people who didn’t even open or download images!
• People don’t open later on desktop. Unfortunately, mobile triage is a myth, according to our
data. 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.
User Experience
and Human Behavior
In addition to your own conversion stats as explained in the
previous section, your email design and user experience should
factor in data about basic subscriber behavior. At the other side
of every email, there’s a real human—a human interacting with
devices, channels, and content in his or her own way, but we do
see many similarities in how people interact.
23
Data for Designerssalesforce.com/marketingcloud
24
salesforce.com/marketingcloud
24
e Design Toolkit
How People Use Mobile Devices
Subscribers’ relationships with their mobile devices are constantly evolving, but ponder these early
learnings and the implications for your emails.
According to one retailer and one send, with a one-million-plus dataset, we found the following
email behavior and mobile breakdown by device:
74%
52%
Email Opens
40%
Email Clicks
Web Conversions
Desktop
Mobile: Android
Mobile Email Opens
4
76.7%
Opens vs. Conversion
As shown in the charts here, peo-
ple opened more on mobile, but
clicked and purchased less in
these instances. Recall that email
opens aren’t necessarily a good
indicator of conversions. We still
see most conversion activity
coming from desktop users. As
an email designer, if you see this
trend, you need to make sure this
is because of user preference—
not because of a limitation of the
mobile experience.
19.3%
4
Research data: emailclientmarketshare.com, Litmus
Note: Percentages may not equal 100% due to rounding.
iPhone Other
19.3% 76.7%
26.6% 72.5%
33% 66%
40%
Data for Designers24
60%
48%
26%
salesforce.com/marketingcloud
25
salesforce.com/marketingcloud
25
e Design Toolkit
Platform Affinity
Even though there are still plenty of desktop-only subscribers out there, we have to treat the mobile
platform as a stand-alone brand experience as the preference for mobile rises. 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
Remember the Ultimate Goal
Although it’s an amazing tool for
securing ROI, email is merely the
vehicle to guide your subscribers
to a site where they can convert.
Ensure click or conversion dropoff
is not due to reduced content op-
tions within the email or a poor user
experience—on mobile or desktop.
Regardless of an email’s quality in
and of itself, that message is only
as good as the site or landing page
experience that’s delivered.
The biggest takeaways about plat-
form affinity: many people (perhaps
60% or more) are mobile only, and
those who switch back and forth
between platforms prefer desktop
for clicking.
5
Salesforce Marketing Cloud research: one customer, one-million-plus dataset, daily sends over 30 days
60% 20%20%
60%
of people who open emails are
opening only on mobile, according
to data based on one customer’s
daily sends for 30 days
60% 30%10%
60%
of people who click emails are
clicking only on mobile, according
to data based on one customer’s
daily sends for 30 days
25
Data for Designerssalesforce.com/marketingcloud
26
salesforce.com/marketingcloud
26
e Design Toolkit
Your experience with your brand and 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:
• Overall aesthetics
• Typefaces
• Brand voice and tone
• Color palette
• Photography choices
• User interface elements
These, and other branding elements, fall under your own capable expertise—so don’t be afraid to
make a decision based on what you already know about your brand.
Workflow
As you know better than anyone,
an email campaign doesn’t depend
solely on an email designer,
but also on people in roles like
campaign manager, production
specialist, deployment specialist,
and so on. But you have a unique
skillset that can be beneficial in
planning and decision-making for
the larger team’s overall success,
so speak up, and use your expertise!
Making Decisions with Data
ere are two ways to make design decisions: based on your own expertise, and based on data.
A healthy mix of each will ensure both eective campaigns and a sustainable workow for you.
1
Making Decisions with Your Expertise
Data for Designers26 salesforce.com/marketingcloud
27
salesforce.com/marketingcloud
27
e Design Toolkit
“Sure, go ahead and test
what’s testable. But the
real victories come when
you have the guts to
launch the untestable.”
Seth Godin
Author,
Linchpin and Permission Marketing
Of course, while some decisions are clear to you without research and outside statistics, other
choices should be driven by data—either to confirm an approach, or change something wholesale.
Common testable elements include:
• Subject lines
• Button color language
• Opt-in form layout
• Opt-in form content
• Responsive design techniques
When making a design decision, consider the difference between optimization and design
innovation, as explained by Joshua Porter
6
:
Optimization means:
What works best in the current model?
Design innovation means:
What is the best possible model?
Just as you must make expertise- and data-based decisions, you’ll need to both optimize and
innovate for progress in your email program.
Seth Godin wisely said, “Sure, go ahead and test what’s testable. But the real victories come when
you have the guts to launch the untestable.” So go forth, create, and innovate!
6
Metrics Driven Design: Joshua Porter, slideshare.net/andrew_null/metrics-driven-design-by-joshua-porter
2
Making Decisions with Data
27
Data for Designerssalesforce.com/marketingcloud
28
salesforce.com/marketingcloud
28
e Design Toolkit
Testing Considerations
Before you run off to test every single element in your email design, wait a moment—there’s a better
way. Follow these steps to a truly strategic testing plan.
• Recall that you have a large dormant audience. They’re masking 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 petri dish for testing, because
they haven’t been tainted by past messaging and marketing efforts. A welcome email campaign
is a great place to start, as statistically, those subscribers are the most engaged during that
phase of an email program’s lifecycle.
• Keep testing; change occurs over time. Your subscribers need to be retrained when big
changes are implemented, and that doesn’t happen instantly or with a single redesign. When
you’re talking about testing, you’re talking about a long-term change in the way your emails are
experienced. Give it time, and don’t expect immediately obvious results.
The ideas in this guide are your foundation to a data-based approach to email design.
Take advantage of the inputs you have, and use data to drive change and seek ever-greater ROI—
while using your creative eye and right brain to make sure everything looks beautiful in the process.
Discover the Data
Want to explore your analytics
and draw data-based conclusions
even more quickly?
Salesforce Marketing Cloud
Discover reports can help.
Learn more at
salesforce.com/
marketingcloud
Data for Designers28 salesforce.com/marketingcloud
Real Conversations Start Here
e customer journey like never before.
Journey Builder is a new way of doing business. It transforms our already-trusted solutions
into an intuitive 1:1 marketing engine, so you can create an exceptional brand experience—
with results to prove it.
Check out salesforce.com/marketingcloud to learn more!
