Recently it seems as if mobile email has become the new hot topic among digital marketers. Much of this conversation centers around the on-screen experience: What's the best way to design an email so it renders well and drives opens, clicks and most importantly conversions and other desired goals on the tiny screen of a smartphone, mid-sized tablet and larger monitor on a laptop or desktop PC? While certainly important questions to ask, this is only one aspect of an effective mobile and multiscreen email marketing strategy. Before you make over the email message itself, you must first work out many other aspects of your multiscreen strategy. In this Webinar, Loren McDonald will assemble a team of some of the smartest thinkers in the mobile/multiscreen email marketing design arena. Together they will tackle some of the toughest questions and offer real-life advice for getting multiscreen email right. Among the specific topics will include the following: Learning the implications of each major screen size and device Determining what devices your subscriber base is using and how and where they are converting Discussing the different types of design approaches, such as responsive and scalable, and which is the best fit based on your resources and expertise Creating a consistent user experience across email and Web/landing pages Examples and key best practices Communicating with your designer and programmer Testing, learning, optimization and measurement/analysis Future trends and predictions - where is it all going

1. #spopwebinar
Multiscreen Email Design:
Lessons from the Pros
Webinar will start at 2 minutes after
the hour

2. Before We Get Started
• Dial in via phone or select “call using your computer”
• Tweet with us: #spopwebinar
• Chat your questions to the host
• Presentation will be emailed to you next week
#spopwebinar

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

4. Context
for
today’s
Webinar
#spopwebinar

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

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

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

8. … and
often
jumping
straight
to
tactics…

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

10. … and
then dive
in …

11. 2
additional
thoughts
#spopwebinar

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

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

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

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

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

17. The Multiscreen Challenge
#spopwebinar
17

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

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

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

21. 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)
21

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

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

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

25. The unifying characteristic?
TOUCH.
25

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

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

28. Preheaders Are Tertiary Inbox Content
28

29. Preheaders Are Tertiary Inbox Content

30. Inconsistent
rendering
across devices
and operating
Android: iPhone:
systems
No scaling; Scales to width;
dimensions vary; 320 x 460
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. Strategies & Approaches
#spopwebinar
35

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

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

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

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

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

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

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

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

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

48. Universal Principles
#spopwebinar
48

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

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

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

52. 52

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

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

56. TEST!

57. Framework / Next Steps
#spopwebinar
57

58. Your Goals
58

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

60. So much email…
60

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

62. Tackle the Problem
#spopwebinar

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

64. Test – Measure – Optimize
vs.
#spopwebinar

65. Don’t be afraid to jump in

66. ebook will
be emailed
to you next
week
#spopwebinar

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

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