You are on page 1of 24

Multiscreen Email Design

:
Lessons from the Pros
#spopwebinar
Today’s Moderator
2
Loren McDonald
VP, Industry Relations
Silverpop
lmcdonald@silverpop.com
@LorenMcDonald
#spopwebinar
Context
for
today’s
Webinar
#spopwebinar
Mobile
adoption
by users is
off-the-
charts …
#spopwebinar
Mobile
design
#1
hottest
topic …
and
question
we hear.
But many
marketers
are looking
for an
automagic
solution?
…and
often
jumping
straight
to
tactics…
…important
to take a
step back …
look at the
bigger
picture.
…and
then dive
in …
2
additional
thoughts
#spopwebinar
1. Multiscreen (not mobile) > Screensize-apalooza
2. More than just “design” – “context”
What You Can Expect to Takeaway Today
#spopwebinar
Today’s Presenters
14
Brian Sisolak
Senior Strategist
Trilogy Interactive
brians@trilogyinteractive.com
@bsisolak
Justine Jordan
Marketing Director
Litmus
justine@litmus.com
@litmusapp
#spopwebinar
Agenda
15
#spopwebinar
16
The Multiscreen Challenge
#spopwebinar
Email Opens: January 2013
Mobile:
Smartphones (iPhone, Android) and tablets
Desktop:
Installed email programs (Outlook, Apple
Mail)
Webmail:
Email accessed through a web browser
(Gmail, Hotmail, Yahoo!)
17
Source: Litmus Email Analytics
18
42%
38%
33%
12-Month Change
Massive Mobile Growth
+138%
last 18 months
+45%
last 12 months
19
+366%
since #spop11
20
Mobile Market Share
Source: Litmus Email Analytics
Sources: ComScore (US); Gartner (Worldwide)
Know Your Audience
What percentage of customers/prospects
interact with your organization’s mobile
email messages?
•31%of marketers don’t
know their mobile email
open rate
•33%don’t know their
mobile click rate
21
22
Screensize-apalooza
iPhone
2.3” wide
Galaxy Note II
3.2” wide
Nexus 7
7.3” wide
BB Bold
2.6” wide
iPad Mini
5.3” wide
Excite 13
8.5” wide
Android Screen Sizes & Densities
ldpi mdpi hdpi xhdpi
small 1.7% 1%
normal 0.4% 11% 50.1% 25.1%
large 0.1% 2.4% 3.6%
xlarge 4.6%
23
Source: http://developer.android.com/about/dashboards/index.html
24
The unifying characteristic?
TOUCH.
No matter the screen size…
Subscribers view emails in
stages, making choices as
they go.
Landing Page/Site Landing Page/Site Swipe/Click/Tap Swipe/Click/Tap
Preview/Open Preview/Open
Preheader Preheader
Subject Line Subject Line
From Name From Name
From Name
~25 characters
Subject Line
~35 characters
Preheader
~85 characters
26
From and Subject Matter More than Ever
27
Preheaders Are Tertiary Inbox Content
Preheaders Are Tertiary Inbox Content
Inconsistent
rendering
across devices
and operating
systems
(see next slide
for comments)
iPhone:
Scales to width;
320 x 460
iPhone:
Scales to width;
320 x 460
Android:
No scaling;
dimensions vary;
top-left corner
displayed
Android:
No scaling;
dimensions vary;
top-left corner
displayed
Inconsistent
rendering
across devices
and operating
systems
(slide 2 – with
build)
Click is Now Tap
31
Old mouse New mouse
32
NO:
interstitial
boxes
NO:
impossible
form fields
33
YES:
easy to
navigate
YES:
finger friendly
34
iPhone Windows Phone
Blackberry
35
iPhone Windows Phone
Blackberry
36
Strategies & Approaches
#spopwebinar
As with most
things with
email, there’s
not a one-size-
fits-all
approach
(sorry to disappoint you)
38
Segment and A/B
test mobile-
optimized version to
frequent mobile
openers
Mobile 64% higher CTR Mobile 64% higher CTR
Best For Best For
Getting started
and testing the
waters
Agnostic/Scalable/Aware
• One layout for all screen sizes
• Single column design
– 320-500px
• Large text & buttons
• Generous white space
• Clear calls to action
• Short, concise body copy
40
Best For Best For
When you’re
ready for change,
but don’t have
tons of resources
Fluid Design/Layout
• Use percentages for widths
• Adapts to fill the screen it’s
viewed on; text wraps
automatically
• Most effective for simple
layouts
42
Best For Best For
Lots of text and
just a few images;
automated
campaigns
Responsive Design
• Uses media queries or @media
• Not a “line of code”, more like a conditional statement that
enables alternate styles
– If the screen size is x, then display y
– If the screen size is x, then increase headline size to y
– If screen size is x, then show image at 100%
• Detects screen size of the device being read on and enables
alternate styles accordingly
44
Responsive design is not universally
supported. Notable detractors:
•Android Gmail
•Windows Phone
Best For Best For
Heavy mobile audiences;
travel alerts; mobile app; tech
companies
Source: http://stylecampaign.com/blog/2012/10/responsive-email-support/
Device-specific
content served
at time of open
Relies on
images
enabled
Device Targeting
Source: Moveable Ink
47
Best For Best For
Link to specific app store,
localization, timers
Your ideal
solution may
be a
combination:
Scalable +
Responsive
Text + Device
Targeting?
49
Universal Principles
#spopwebinar
51
• Support the subject line with
a creative, useful or helpful
preheader.
– Call-to-action
– Special offer
– Reminder
– Clickable/measurable
– NOT “having trouble…?”
Big Buttons & Text
• Body copy: 14px+
• Headlines: 22px+
• Buttons: 44px by 44px
52
53
54
http://stylecampaign.com/blog/2012/08/android-grid-of-grim/
• Optimize the left-hand
side for Android.
• Pertinent
information
• Call-to-action
• Links
56
• Tappable touch targets
• Bulletproof buttons that don’t rely
on an image
• Left-hand side
TEST!
58
Framework / Next Steps
#spopwebinar
Your Goals
59
How Do Your Users Consume Your Messages?
60
#spopwebinar
So much email…
61
Tackle the Problem
4
8
0
p
x
1366x768
1280x800
1024x768
1440x900
1280x1024
1920x1080
768x1024
1680x1050
320x480
1920x1200
1280x720
1280x768
1152x864
1093x614
1024x600
800x600
Tackle the Problem
#spopwebinar
Quirks & Unknowns
table[class=callout] {
width: 50% !important;
max-width: 50% !important;
height: auto !important;
padding: 0 0 3% 3%;
}
display: none;
#spopwebinar
Test – Measure – Optimize
#spopwebinar
vs.
Don’t be afraid to jump in
Download ebook:
http://www.silverpop.com/marketing-resources/white-papers/download/multiscreen-
email-design-strategy.html
Q & A / Contact Information
68
Brian Sisolak
Senior Strategist
Trilogy Interactive
brians@trilogyinteractive.com
@bsisolak
Justine Jordan
Marketing Director
Litmus
justine@litmus.com
@litmusapp
Loren McDonald
VP, Industry Relations
Silverpop
lmcdonald@silverpop.com
@LorenMcDonald
#spopwebinar
E
m
a
il
M
a
r
k
e
tin
g
M
o
b
ile
S
o
c
ia
l
M
a
r
k
e
t
in
g

A
u
t
o
m
a
t
io
n
Interested In Learning More?
silverpop.com
silverpop.com/marketing-resources
www.slideshare.net/silverpop
Twitter.com/silverpop
Facebook.com/silverpop
#spopwebinar