Think you’re not a designer? Think again!
Design doesn’t require innate talent or a fancy degree—in fact, there’s a method to the design madness. This presentation breaks down the design process, exploring the use of white space, content hierarchy, color, images, and more. Marketers of any skill level can learn basic design principles, using these foundations as a framework to create effective communications and demand more clicks and conversions from their email program.
3. “Everyone designs who devises
courses of action aimed at changing
existing situations into preferred ones.”
@meladorri @litmusapp
—Herbert Simon (1969)
The Sciences of the Artificial. Cambridge: MIT Press.
4. Have you ever made
something that was…
@meladorri @litmusapp
<< open
<< click
<< conversion
Read?
Interacted with?
Used?
5. Design is not art.
Design is:
• a plan
• a strategy
• a process
discover +
define
research +
brainstorm
create
test +
assess
improve +
evolve
@meladorri @litmusapp
17. Email services such as Yahoo!
don’t support alignment
strategies equally.
RUN A QUICK TEST
Preview your emails before every
send to ensure they look great in
every inbox.
30. Cheap: less white space Luxury: more white space
h"p://alistapart.com/ar0cle/whitespace
Use white
space to set
the tone.
Same content
(copy and image)…
32. “…good use of white space between
paragraphs and in the left and right
margins increases comprehension
by almost 20%...”
@meladorri @litmusapp
h"p://www.smashingmagazine.com/2009/09/24/10-‐useful-‐usability-‐findings-‐and-‐guidelines/
33. • Around graphics and images
• To create a margin or “gutter”
• As line spacing in blocks of
copy
• Between columns
• On buttons
Use white space…
35. White space in all the wrong
places can reduce clarity and
readability.
PREVIEW YOUR EMAILS
Preview tests allow you to see and
fix any quirks before sending.
44. Use actionable insights to send smarter emails
Knowing your audience is key to building emails that look great
and drive performance. With the addition of Email Analytics to
your account, you have access to rich audience insights that will
help you optimize, target and track trends in your campaigns.
Optimize conversion rates
Act-On saw a 130% increase in clicks and 93% increase in sales-
ready leads by optimizing emails for their growing mobile
audience.
@meladorri @litmusapp
45. Use actionable insights to send smarter emails
Knowing your audience is key to building emails that look great
and drive performance. With the addition of Email Analytics to
your account, you have access to rich audience insights that will
help you optimize, target and track trends in your campaigns.
@meladorri @litmusapp
Optimize conversion rates
Act-On saw a 130% increase in clicks and 93% increase in sales-ready leads by optimizing
emails for their growing mobile audience.
68. 43% of Gmail users preview
emails with images off.
TEST WITH IMAGES OFF
In addition, various inboxes
automatically block images. Be
confident your emails look great
even with images off.
74. Display
Decorative, adds accent visual interest. Usually needs to be
captured as an image.
Web-Safe
Type that’s supported online and most operating
systems.
Arial, Helvetica, Times New Roman, Courier, Palatino, Garamond,
Bookman, Verdana, Georgia, Comic Sans, Trebuchet, Arial Black,
Impact.
75. Turkey pig tongue jowl
meatloaf meatball, shankle
Bacon ipsum dolor amet
spare ribs turkey flank
boudin, pastrami turducken
rump cupim chuck jowl
alcatra ham hock doner.
Turkey pig tongue jowl
meatloaf meatball, shankle
Bacon ipsum dolor amet
spare ribs turkey flank
boudin, pastrami turducken
rump cupim chuck jowl
alcatra ham hock doner.
Line Height/Spacing
1.4–1.6
font size
85. Keep it consistent
Develop an email style guide and
use type, color, and structure the
same way consistently.
86. Use a style guide
@meladorri @litmusapp
Headlines: 22px+
Subheads: 18-20px
Body copy: 13px minimum
15-16px is better
87. From name
~25 characters
25% of the inbox
Subject line
~35 characters
25% of the inbox
Preview text
~85 characters
50% of the inbox
@meladorri @litmusapp
88. Now that you’ve mastered
the design basics…
CHECK OUT THE GUIDE
It’s time to learn how to get responsive!
90. 70% read on mobile
15%read on mobile
Design based on your
audience
91. Data-driven design
Outlook-heavy audience Adjust design for preview pane, code for limited support
Image-blocking email clients Code with styled alt text and bgcolors to create interest
Large Blackberry environment Code using a fluid layout for legibility
Large number of retina devices Adjust photoshop file for retina sizing
Large Lotus notes audience Start looking for another job
92. Better data means better
design.
GET BETER DATA
Find out which platforms and email
clients your recipients are using.
Start measuring the success of your
responsive designs.