Creating Email Campaigns that Work: A Focus on Design Elements

Creating Email
Campaigns that Work
A Focus on Design Elements
@johnethies | @EmailonAcid

Hello, my name is John.

Tweet this session!
@johnethies @EmailonAcid
#DENStartupWeek

The feeling you
get after a day
of working with
Outlook…

EMAIL TESTING

ADVANCED ANALYTICS
ENGAGEMENT
ACTIVITY
GEOLOCATION
REPORTING
CLIENT & DEVICE
INFORMATION

Why is email
so important?
01.

marketing emails
are sent each day
billion
93

EMAIL delivers
the highest ROI
for Marketers
@johnethies | @EmailonAcid*According to VentureBeat, email is the channel generating the highest ROI for marketers.

68%OF TEENS OF MILLENNIALS
Prefer to receive communication from a business via email.
Source: Adestra
73%

RESOURCES are shifting…

BUDGETS are following future needs

We read email everywhere
Source: Adobe

..and these places as well
Source: Adobe

$40 return for every $1 spent
in Email Marketing…

if done CORRECTLY

V
S
DELIVERABILITY
DELIVERY

Whether or not a recipient accepts your message.
DELIVERY

Where the message ends up once its accepted:
inbox, spam folder or another folder.
DELIVERABILITY

Email design and content can have an
EFFECT on inbox placement

AVOID using an
all image design

Keep email size
BELOW 100kb

BITLY is
for email

From Name,
Subject Line +
Preheader Text03.

3
opportunities to
encourage a
subscriber to open
your email.

USE A TRUSTWORTHY & RECOGNIZABLE “FROM NAME”

v
SUBJECT LINES
of email recipients open
an email based on
subject line alone.35%

Subject lines with 61-70 characters get more reads.
KEEP THE SUBJECT
SIMPLE

WHAT ABOUT
EMOJI?Brands using emoji’s in
their subject lines saw a
45%
increase in their unique
open rates.

EMOJI’s
[continued]
*Represents activity on Appboy’s platform, broader industry metrics may vary.
Appboy, “The Appboy Emoji Study: The Rise and Rise of Emoji Marketing,” July 14, 2016

Preheaders are an EASY win!

NO BUENO!

CHARACTE
R
LIMITS

Preheader Text: CODE EXAMPLE

v
PERSONALIZED MESSAGE
Personalization,
increases opens by
26%

No standards, every client is DIFFERENT

Coding like it’s 1999

Is the email width rule of 600px still a
best practice?

640px

ALIGNMENT
Creates order and organization

Left Alignment:
mirrors how we read and is
easy to follow

Center Alignment:
harder to follow from line to line

Right Alignment:
hard to read for
Western Languages

FONTS

Arial
Arial Black
Times New Roman
Comic Sans MS
Verdana
Impact
Courier New
Georgia
Trebuchet MS
Webdings
Email Safe
FONTS

Limited web font support, if used, have a fallback

FONT SIZE:
minimum 12px
preferred body text size is 16px

NEGATIVE
[white] SPACE

INCREASE Legibility + Usability

Surround call to
actions with white
space to make it
STAND OUT

Negative space
can be ANY color

Put the MOST important message first

You have approximately 8.25 seconds
to capture someone’s attention.
Emails are open, on average, 5-15 seconds.
Keep it SIMPLE

ONE audience
ONE goal
The Rule of
ONE

v
GRANDMA TEST:
Write in plain
language.

50% of all emails are
opened on
mobile devices.

v
80%
of emails are
deleted if they don’t
render correctly
of those people
will unsubscribe30%
DID YOU
KNOW…

DESIGNfor
“every inbox, every device”

Mobile Friendly
Mobile First
SCALABLE

</STYLE>
Gmail doesn’t like your

Gmail SUPPORTS your fluidity!

@johnethies | @EmailonAcidSource: @actionrocket

Make the BEST experience for each user
@johnethies | @EmailonAcidSource: @actionrocket

simple
Styled ALT text
Animated GIFs
Button enhancements
CSS animation
Carousels, Hot spot animation
COMPLEX

of users view email
with images off
Styled ALT TEXT
43%

Free shipping
No styling or background color
Free shipping
Background color
Free shipping
Styled alt text
Free shipping
Background color + styled alt text
Styled
ALT TEXT
[continued]

<img src="logo.jpg" width="400"
height="149" alt="Email on Acid"
style="font-family: Georgia;
color: #697c52; font-style:
italic; font-size: 30px;">
STYLED ALT TEXT [continued]

MOZIFY
[original email] [no Mozify] [with Mozify]

Outlook 2007+ shows the 1st frame Other programs show the animation
Animated GIFS
[continued]

NOT supported in
Outlook 2007,
2010, 2013, 2016
for Windows
First frame
should include
crucial info &
CTA
Animated
GIFS[continued]

26%
GIF emails increase a
click through rate up to

Rounded cornersI am a button ➝
I am a button ➝
I am a button ➝I am a button ➝ Borders
I am a button ➝ Gradients
I am a button ➝ Web fonts
Hover effects
Button ENHANCEMENTS

I am a button ➝
Progressively enhanced: Apple Mail
I am a button ➝
Graceful degradation: Outlook 2010
I am a button ➝
Lotus Notes
I am a button ➝
Scale to fit: iPhone
Button ENHANCEMENTS [continued]

RULE OF THUMB:
40px height for buttons

CSS
ANIMATION

FALLBACKINTERACTIVE
CAROUSE
L {
Creative by RebelMail

Incorporate RESPONSIVE Design

Know the PLATFORM of the visitor

Low conversions on Mobile?

BOTTOM LINE:
Email is an AMAZING channel for marketers,
if done correctly.

Our PANEL
• ANTHONY CHIULLI - Senior Consultant, Deliverability
Services, Salesforce (@anthonychiulli)
• JILL GUEST - Engagement Marketing Manager, SendGrid
(@jillpguest)
• JAMES EINSPAHR - Digital Creative Director, FURNITURE
ROW DIGITAL
• CHESTER BULLOCK - Vice President, Digital Marketing
Technology / Salesforce MVP, Trendline Interactive
(@coskier)

THANK YOU!
@johnethies @emailonacid
@DENStarupWeek

Creating Email Campaigns that Work: A Focus on Design Elements

More Related Content

What's hot

Viewers also liked

Similar to Creating Email Campaigns that Work: A Focus on Design Elements

Recently uploaded

Creating Email Campaigns that Work: A Focus on Design Elements

Editor's Notes