In a word where 50% of emails are opened on a mobile device and 80% of consumers delete emails that look bad on smartphones, it's crucial to account for fat fingers and small screens. Through this presentation, you will learn how to find out who is opening your emails on mobile, the implications of various screen sizes and operating systems, and easy wins for optimizing email for mobile devices. his presentation was given by Justine Jordan, Director of Research & Education at Litmus, at NEDMA's Annual Conference on May 14, 2014.

1. Optimizing Email for
Multiscreen Delight
May 14, 2014
Fat Fingers and Small Screens

2. Who Am I?
Justine Jordan
Wearer of Many Hats, Litmus

3. litmus.com/lp/nedma
Sample HTML, slides, templates, frameworks, and other goodies.
@meladorri @litmusapp
#NEDMA14

4. 1
The crazy growth of mobile
We’ll cover…
2
Knowing your audience
3
Your subscribers on mobile
#NEDMA14
4
Strategies + best practices

5. Got Screens?image credit: helpmyhelpdesk.com

6. Mobile is big, but how big?
Mobile:
Smartphones (iPhone, Android)
and tablets
Desktop:
Installed email programs
(Outlook, Apple Mail)
Webmail:
Email accessed through a web
browser (Gmail, Hotmail,
Yahoo!)
Source: Litmus Email Analytics
25%
Webmail
48%
Mobile
27%
Desktop
#NEDMA14

7. Looking back to 2011…
Source: Litmus Email Analytics
0%
10%
20%
30%
40%
50%
60%
70%
Desktop Webmail Mobile
10%
33%
50%
#NEDMA14

8. 400%
mobile opens have increased
since 2011
#NEDMA14

9. There’s a few options out there…
Large
Medium
Small

10. The unifying characteristic?
TOUCH.
#NEDMA14

11. 31%of marketers don’t know their
mobile email open rate
source:
marketingsherpa.com
#NEDMA14

12. Users do not always conform to averages
< 15% read on mobile70%+ read on mobile
#NEDMA14

13. It’s as easy as copy, paste, send

14. How does a poorly designed email
affect your perception of the
brand?
If you get a mobile email that doesn’t look good, what do you do?
BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013
80.30%
30.20%
13.50%
3.80%
6.30%
Delete it
Unsubscribe
View on computer
Don't know
Read anyway
+68%
+15%
75%
‘negative’
One chance to make an impression
51%
Slightly
negative
25%
Neutral
24%
Strongly
negative
#NEDMA14

15. Their experiences o en suck.

16. Their experiences o en suck.
great app great site not-so-great email

17. great site not-so-great email
Their experiences o en suck.
email receipt
requested from an
ATM transaction!

18. The mobile experience is
different than the desktop
experience
Conversion
Page/Site
Click/Tap
Preview/Open
Preheader
Subject Line
From Name
The Subscriber
Experience
#NEDMA14

19. From and subject are front and center
???
Page/Site
Tap/Click
Preview/Open
Preheader
Subject Line
From Name

20. From and subject are front and center
???
Page/Site
Tap/Click
Preview/Open
Preheader
Subject Line
From Name
• Large and bold =
top hierarchy in
the mobile inbox
• Cuts off a er ~25
characters

21. ???
Page/Site
Tap/Click
Preview/Open
Preheader
Subject Line
From Name
From and subject are front and center

22. ???
Page/Site
Tap/Click
Preview/Open
Preheader
Subject Line
From Name
From and subject are front and center
• Second in the
hierarchy
• Android wraps to the
next line
• iPhone cuts off at ~35
characters

23. ???
Page/Site
Tap/Click
Preview/Open
Preheader
Subject Line
From Name
Preheader = tertiary inbox content

24. Good vs. bad preheaders
✔
✔
✔
✘
✘
???
Page/Site
Tap/Click
Preview/Open
Preheader
Subject Line
From Name

25. Each phone and app is different
???
Page/Site
Tap/Click
Preview/Open
Preheader
Subject Line
From Name
#NEDMA14

26. Each phone and app is different
???
Page/Site
Tap/Click
Preview/Open
Preheader
Subject Line
From Name
#NEDMA14

27. #EmbraceTheScroll
???
Page/Site
Tap/Click
Preview/Open
Preheader
Subject Line
From Name
Scrolling is easier than clicking.
Scrolling is a continuation.
Clicking is a decision.
Hundreds or thousands of
decisions taken together add up
to real friction.
@bokardo
#NEDMA14

28. ???
Page/Site
Tap/Click
Preview/Open
Preheader
Subject Line
I like big bu ons…
From Name

29. ???
Page/Site
Tap/Click
Preview/Open
Preheader
Subject Line
Don’t forget the landing page
From Name
NO:
interstitials
horrible forms
Flash
#NEDMA14

30. ???
Page/Site
Tap/Click
Preview/Open
Preheader
Subject Line
Optimize the conversion path
From Name
YES:
Easy to use
Finger
friendly
#NEDMA14

31. ???
Page/Site
Tap/Click
Preview/Open
Preheader
Subject Line
Optimize the conversion path
From Name
#NEDMA14
• What is your goal?
• Can the CTA be achieved on mobile?
• Is it tappable?
• How many clicks/taps/actions are required?
• Is the landing page optimized? Should it be?

32. strategy #1
mobile first
aka agnostic, aware, scalable

33. Strategy #1: Mobile first
Considers the mobile user a priority
• One layout for all screen sizes
• 320-500px
• Large text & bu ons
• Generous white space
• Clear calls to action
• Short, concise body copy
#NEDMA14

34. Strategy #1: Mobile first

35. strategy #2
fluid

36. Strategy #2: Fluid
Email width
changes to fit
within the window
it’s viewed in
Percentage-based widths
Adapts to fit the screen
Text wraps automatically
#NEDMA14

37. Strategy #2: Fluid
Shorter learning curve
Best for text-heavy emails

38. strategy #3
responsive

39. Strategy #3: Responsive
• More than a “line of code”
• Set of conditional statements that enables specific 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, not device type
Uses media queries to detect screen size and alter
content accordingly
#NEDMA14

40. Strategy #3: Responsive
• Resize content: make images
fit, make text larger
• Hide content on mobile
• Stack columns
• Move a two-column design to a
one-column design
• Learning curve; but plenty of
pre-tested templates exist
• Mixed support for media
queries across mobile
h ps://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic

41. Strategy #3: Responsive

42. Email
is a unique medium
with unique
considerations

43. Click is now tap
The finger is the new mouse
#NEDMA14

44. Your users have fat fingers (we all do)
image: webdesignerdepot.com #NEDMA14

45. Bigger is be er
• Body copy: 16px+
• Headlines: 22px+
• Bu ons: 44px by 44px
• Space: 10px+
• Tappable touch
targets
#NEDMA14

46. Blue links on iOS

47. • 24% market share
• Automatically scales to fit
• Excellent support for media queries
• Images on by default
• Resizes fonts under 13px
What to know: iPhone
#NEDMA14

48. What to know: BlackBerry
• 0.097% market share
• Media query support
• Blocks images; supports ALT text
• Does not scale/auto-zoom
• No separate app; email joins social,
SMS and voice in the “hub”
#NEDMA14

49. What to know: Windows Phone
• 0.163% market share
• Mixed media query support
• Inconsistent font display
• Blocks images
• CTAs require 2 clicks for image-based
emails
• No ALT text
#NEDMA14

50. What to know: Android
• 9% market share
• Support for ALT text
• Various screen sizes, OS and app
versions
• Mixed support for media queries
• Some auto-scale, some do not
#NEDMA14

51. What to know: Tablets
• iPad: 12% market share
• Touch screen considerations
apply, but with more screen
real estate
• Consider tablet-specific
media queries for unique
audiences
• 68% of US owners use
tablets while watching TV
• Conversion rates are
typically higher for tablets
than smartphones
#NEDMA14

52. Wide variety of ways to access email
Device ≠ email client

53. Wide variety of ways to access email
Device ≠ email client
Email is an applica&on

54. Rendering is inconsistent
across devices and operating systems
Wide variety of ways to access email

55. Testing is crucial
#NEDMA14

56. Testing is crucial
#NEDMA14

57. 1
Know your audience & consider
the mobile users’ needs
2
3
Tap your way to success
-TAKEAWAYS -
4
Rendering is tied to app,
not device
Responsive is not impossible,
but it’s not a silver bullet, either

58. litmus.com/community

59. litmus.com/conference

60. litmus.com/lp/nedma

61. 14-DAY TRIAL
LITMUS.COM/GIFTCARD
HELLO

62. Thanks!
Thanks!