Multiscreen Email Design:

Lessons from the Pros

#spopwebinar
Todays Moderator
2
Loren McDonald
VP, Industry Relations
Silverpop
lmcdonald@silverpop.com
@LorenMcDonald
#spopwebinar
Context
for
todays
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
Todays 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 organizations mobile
email messages?
31%of marketers dont
know their mobile email
open rate
33%dont 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, theres
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 youre
ready for change,
but dont have
tons of resources
Fluid Design/Layout
Use percentages for widths
Adapts to fill the screen its
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 dont 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.
Dont 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