@meladorri @litmusapp Email Designfor the
Non-Designer

everyone
designs

“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.

Have you ever made something
that was… @meladorri @litmusapp << open << click << conversion Read? Interacted with? Used?

Design is not art. Design
is: • a plan • a strategy • a process discover + define research + brainstorm create test + assess improve + evolve @meladorri @litmusapp

Good design is… Innovative Useful
Understandable Unobtrusive Honest Long-Lasting Thorough Aesthetic @meladorri @litmusapp 1. Helps to achieve your goals 1. Shows respect for your audience A well-designed email serves tw o purposes: 1 2 1. What do you want them to do? Problems design can help solve: 1. Who is your audience? And how will you target them? 1 2

STRATEGY @meladorri @litmusapp Who is
your audience?

TACTICS @meladorri @litmusapp What do
you want them to do?

design
tips

Alignment

Alignment Creates order and organization.
The scaffolding for your email.

Left Alignment Is natural to
read since it mirrors the way we read. It’s easy for the eye to follow.

Center Alignment Is harder to
follow from line to line. Use sparingly.

Right Alignment Is also harder
to read for Western languages. Use sparingly.

No alignment Alignment

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.

Proximity

These are related
@meladorri @litmusapp

Are these?
@meladorri @litmusapp

Proximity @meladorri @litmusapp Creates relationships
and groups between elements. Makes things easier for the reader.

@meladorri @litmusapp Note the relationships
here can be easily defined.

@meladorri @litmusapp Identify areas of
proximity improvement.

Proximity + alignment
@meladorri @litmusapp

Negative
(or ‘White’) Space

@meladorri @litmusapp Increases readability, usability,
and clarity. White Space

White space can be any
color. It’s just breathing room.

Surround something with white space
to make it stand out.

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)…

Use white space to improve
legibility + comprehension

“…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/

• Around graphics and images
• To create a margin or “gutter” • As line spacing in blocks of copy • Between columns • On buttons Use white space…

@meladorri @litmusapp The rule of
thumb 40–60 pixels between elements

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.

Hierarchy

Hierarchy @meladorri @litmusapp Has to
do with the order, number and scale of the elements in your message

ORDER: Put the important stuff
first @meladorri @litmusapp

Multiple Categories Single Category ‘design’
‘marketing’ ‘hot offthe press’ +30% clicks

@meladorri @litmusapp NUMBER: Don’t provide
too many choices.

21% CTOR 40% CTOR Many
CTAs Single CTA

@meladorri @litmusapp SCALE: Use scaling
to increase readability

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

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.

Create Hierarchy @meladorri @litmusapp By
using size, color, alignment, contrast, and position

I LIKE z BIG BUTTONS
@meladorri @litmusapp …AND I CANNOT LIE

Wine Merlot Cabernet Chardonnay Beer
Stout Amber Pale Ale @meladorri @litmusapp Wine Merlot Cabernet Chardonnay Beer Stout Amber Pale Ale

Use a grid to articulate
hierarchy @meladorri @litmusapp

Use hierarchy to… @meladorri @litmusapp
Influence user behavior Guide subscribers to click Set expectations Enhance comprehension

Email clients don’t render styles
consistently. PREVIEW NOW Be sure your hierarchy styles are functioning across inboxes.

Color

Build your brand, ensure legibility,
and enhance important elements. Color choices

Source: http://wecreatebrands.com.au/brand-strategy-2/colour-meanings-in-graphic-design/ Consider the emotional
effects of your color choices. Create synergy through color branding

Color
contrast
increases
readability.

Style your blue links to
increase legibility and brand synergy. LEARN HOW

Von Restorff Effect An isolated
item “sticks out” and is more likely to be remembered.

Color Theory ANALOGOUS MONOCHROMATIC COMPLEMENTARY
@meladorri @litmusapp

HEX VS RGB HEX RGB
Email Supported Limited Support in Email #FF6600 R(255), G(102), B(0) @meladorri @litmusapp

@meladorri @litmusapp Color blindness effects
8% of the male population. USE A COLOR BLIND FILTER

Images

Over 50% of our brains
are dedicated to processing images.

Many inboxes block images by
default. Preview your campaigns with images disabled readability with and without images.

Use styled ALT text to
communicate your message when images are disabled. CHECK OUT OUR GUIDE

@meladorri @litmusapp thenounproject.com istockphoto.com unsplash.com
stocksnap.io Stock photo sources:

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.

Fonts
(typography)

Font Guidelines @meladorri @litmusapp Don’t
use too many. Use them consistently.

Choosing Type

Serif No extra stroke features
at the end of characters. Sans-serif Stroke added to the ends of characters.

Comic Sans Papyrus Brush Script@meladorri
@litmusapp

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.

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

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 cow chuck venison flank sausage picanha prosciutto. Line Length 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 cow chuck venison flank sausage picanha prosciutto. 50-75 characters

There’s more to typography than
meets the eye. GET THE DETAILS  Learn how to make your typography responsive.

Emphasis

Emphasize the important stuff @meladorri
@litmusapp

When you emphasize @meladorri @litmusapp
EVERYTHING, you emphasize nothing.

Repetition

Keep it consistent Develop an
email style guide and use type, color, and structure the same way consistently.

Use a style guide @meladorri
@litmusapp Headlines: 22px+ Subheads: 18-20px Body copy: 13px minimum 15-16px is better

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

Now that you’ve mastered the
design basics… CHECK OUT THE GUIDE It’s time to learn how to get responsive!

Data driven
design

70% read on mobile 15%read
on mobile Design based on your audience

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

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.