Webinar held on February 26, 2013 discussing the challenges of designing emails in a mobile and multiscreen world; outlines the different design approaches; shares tips/best practices. Webinar features Justine Jordan of Litmus; Brian Sisolak of Trilogy Interactive and Loren McDonald, Silverpop

1. #spopwebinar
Multiscreen Email Design:
Lessons from the Pros

2. Today’s Moderator
Loren McDonald
VP, Industry Relations
Silverpop
lmcdonald@silverpop.com
@LorenMcDonald
#spopwebinar
2

3. Context
for
today’s
Webinar
#spopwebinar

4. Mobile
adoption
by users is
off-the-
charts …
#spopwebinar

5. Mobile
design
#1
hottest
topic …
and
question
we hear.

6. But many
marketers
are looking
for an
automagic
solution?

7. … and
often
jumping
straight
to
tactics…

8. …important
to take a
step back …
look at the
bigger
picture.

9. … and
then dive
in …

10. 2
additional
thoughts
#spopwebinar

11. 1. Multiscreen (not mobile) > Screensize-apalooza

12. 2. More than just “design” – “context”

13. What You Can Expect to Takeaway Today
How to analyze your subscriber base
Better understanding of the email design challenges
Understanding of the “design options”
A framework for tackling “multiscreen design”
Tips and generally accepted best practices
#spopwebinar

14. Today’s Presenters
Brian Sisolak Justine Jordan
Senior Strategist Marketing Director
Trilogy Interactive Litmus
brians@trilogyinteractive.com justine@litmus.com
@bsisolak @litmusapp
#spopwebinar 14

15. Agenda Multiscreen
Challenge
Strategies &
Q&A
Approaches
#spopwebinar Framework / Universal
Next Steps Principles
15

16. The Multiscreen Challenge
#spopwebinar
16

17. Email Opens: January 2013
Mobile:
Smartphones (iPhone, Android) and tablets
Desktop
Mobile 33% Desktop:
42% Installed email programs (Outlook, Apple
Mail)
Webmail Webmail:
25% Email accessed through a web browser
(Gmail, Hotmail, Yahoo!)
Source: Litmus Email Analytics
17

18. 12-Month Change
Webmail Desktop Mobile
42%
50%
38%
45%
40%
35%
30%
25%
33%
20%
Opens in Each Environment
18

19. Massive Mobile Growth
+366% +138%
since #spop11 last 18 months
+45%
last 12 months
19

20. Mobile Market Share
Other
Smartphone OS Share
1% 0.4%
Others 1.7%
Symbian 0.6%
1.2%
iPad
Microsoft 2.9%
27% 3.0%
Blackberry 6.4%
3.5%
iPhone
56% iOS 20.9%
36.3%
Android
53.4%
16% Android 69.7%
0% 20% 40% 60% 80%
Mobile Email Opens US Worldwide
Source: Litmus Email Analytics Sources: ComScore (US); Gartner (Worldwide)
20

21. 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
Excite 13
Nexus 7 8.5” wide
iPad Mini 7.3” wide
Galaxy Note II
5.3” wide
iPhone BB Bold 3.2” wide
2.3” wide 2.6” wide
Small Medium Large
22

23. 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%
Source: http://developer.android.com/about/dashboards/index.html
23

24. The unifying characteristic?
TOUCH.
24

25. From Name
No matter the screen size…
Subject Line
Subscribers view emails in
Preheader stages, making choices as
they go.
Preview/Open
Swipe/Click/Tap Landing Page/Site

26. From and Subject Matter More than Ever
From Name
~25 characters
Subject Line
~35 characters
Preheader
~85 characters
26

27. Preheaders Are Tertiary Inbox Content
27

28. Preheaders Are Tertiary Inbox Content

29. Inconsistent
rendering
across devices
and operating
systems
(see next slide
for comments)

30. Inconsistent
rendering
across devices
and operating
systems
Android: iPhone:
(slide 2 – with
No scaling; Scales to width;
build) 320 x 460
dimensions vary;
top-left corner
displayed

31. Click is Now Tap
Old mouse New mouse
31

32. NO:
interstitial
boxes
NO:
impossible
form fields
32

33. YES:
easy to
navigate
YES:
finger friendly
33

34. iPhone Windows Phone
Blackberry
34

35. iPhone Windows Phone
Blackberry
35

36. Strategies & Approaches
#spopwebinar
36

37. As with most
things with
email, there’s
not a one-size-
fits-all
approach
(sorry to disappoint you)

38. Mobile 64% higher CTR
Segment and A/B
test mobile-
optimized version to
frequent mobile
openers
Best For
Getting started
and testing the
waters
38

40. Agnostic/Scalable/Aware
• One layout for all screen sizes
• Single column design
Best For
– 320-500px
• Large text & buttons When you’re
• Generous white space ready for change,
• Clear calls to action but don’t have
tons of resources
• Short, concise body copy
40

42. Fluid Design/Layout
• Use percentages for widths
• Adapts to fill the screen it’s
Best For
viewed on; text wraps
automatically
• Most effective for simple Lots of text and
layouts just a few images;
automated
campaigns
42

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

45. Responsive design is not universally
supported. Notable detractors:
• Android Gmail
• Windows Phone
Best For
Heavy mobile audiences;
travel alerts; mobile app; tech
companies
Source: http://stylecampaign.com/blog/2012/10/responsive-email-support/

46. Device Targeting
Device-specific
content served
at time of open
Relies on
images
enabled
Source: Moveable Ink

47. Best For
Link to specific app
store, localization, timers
47

48. Your ideal
solution may
be a
combination:
Scalable +
Responsive
Text + Device
Targeting?

49. Universal Principles
#spopwebinar
49

50. Scannable
Singular calls to action
Larger fonts
Single columns
Bullet-proof / large CTA buttons
Design for touch …

51. • Support the subject line with
a creative, useful or helpful
preheader.
– Call-to-action
– Special offer
– Reminder
– Clickable/measurable
– NOT “having trouble…?”
51

52. Big Buttons & Text
• Body copy: 14px+
• Headlines: 22px+
• Buttons: 44px by 44px
52

53. 53

54. • Optimize the left-hand
side for Android.
• Pertinent
information
• Call-to-action
• Links
http://stylecampaign.com/blog/2012/08/android-grid-of-grim/
54

56. • Tappable touch targets
• Bulletproof buttons that don’t rely
on an image
• Left-hand side
56

57. TEST!

58. Framework / Next Steps
#spopwebinar
58

59. Your Goals
59

60. How Do Your Users Consume Your Messages?
#spopwebinar
60

61. So much email…
61

62. Tackle the Problem
1366x768 320x480
1280x800 1920x1200
1024x768 1280x720
1440x900 1280x768
1280x1024 1152x864
1920x1080 1093x614
768x1024 1024x600
1680x1050 800x600

63. Tackle the Problem
#spopwebinar

64. Quirks & Unknowns
table[class=callout] {
width: 50% !important;
max-width: 50% !important;
height: auto !important;
padding: 0 0 3% 3%;
}
display: none;
#spopwebinar

65. Test – Measure – Optimize
vs.
#spopwebinar

66. Don’t be afraid to jump in

67. Download ebook:
http://www.silverpop.com/marketing-resources/white-papers/download/multiscreen-
email-design-strategy.html

68. Q & A / Contact Information
Brian Sisolak Justine Jordan Loren McDonald
Senior Strategist Marketing Director VP, Industry Relations
Trilogy Interactive Litmus Silverpop
brians@trilogyinteractive.com justine@litmus.com lmcdonald@silverpop.com
@bsisolak @litmusapp @LorenMcDonald
#spopwebinar 68

70. Interested In Learning More?
silverpop.com
silverpop.com/marketing-resources
www.slideshare.net/silverpop
Twitter.com/silverpop
Facebook.com/silverpop
#spopwebinar