This presentation was given by Justine Jordan, Marketing Director at Litmus, at NEDMA's 2015 Annual Conference.

1. @meladorri @litmusapp
How to Optimize Email
For All Inboxes in a
Mobile World

2. JUSTINE JORDAN
@meladorri @litmusapp
litmus.com/lp/nedma15

4. @meladorri @litmusapp

5. I HAVE SOME
BAD NEWS

6. (Y)OUR
EMAILS
SUCK.

7. @meladorri @litmusapp

8. @meladorri @litmusapp

9. @meladorri @litmusapp

10. @meladorri @litmusapp

11. @meladorri @litmusapp
#thefear

12. @meladorri @litmusapp

13. MEANWHILE…

14. “…the following vehicle has been reported towed…”

15. <no-reply@cityofboston.gov>

16. @meladorri @litmusapp

18. YOUR CAR!

19. (This actually happened to @lozzzytweets )

22. @meladorri @litmusapp

24. @meladorri @litmusapp

25. MOBILE EMAIL
REALLY SUCKS

27. email receipt
requested
from an ATM
transaction!

29. L

30. @meladorri @litmusapp
LET’S
UNSUCK
EMAIL,
SHALL WE?

31. @meladorri @litmusapp
DELIVERING
EXPERIENCES

32. @meladorri @litmusapp
EMAIL IS NOT
JPG
PPC SEO CPC
ONE-PAGE WEBSITE

33. @meladorri @litmusapp
EMAIL IS NOT

34. @meladorri @litmusapp
DIRECT
QUANTITATIVE
REAL-TIME

35. EMAIL IS A
personal
MEDIUM

36. EMAIL IS A
1-to-1
MEDIUM

40. EMAIL IS A
1-to-1
MEDIUM

41. @meladorri @litmusapp
THE CRAZY GROWTH OF MOBILE

42. @meladorri @litmusapp
THE CRAZY GROWTH OF MOBILE

43. MOBILE EMAIL
+500% since 2011
@ryanmheap @degdigital

45. @meladorri @litmusapp
80% of subscribers delete emails
that look bad on their phones…
…and 30% unsubscribe
source: BlueHornet

46. @meladorri @litmusapp
31%of marketers don’t know their
mobile email open rate
source:
marketingsherpa.com

47. @meladorri @litmusapp
KNOW YOUR AUDIENCE
70% read on mobile
15% read on mobile

48. @meladorri @litmusapp
You need an
“any inbox, any device”
email marketing strategy

49. @meladorri @litmusapp
CRUSTY
Context Relevance
Useful SimpliciTY

50. EMAIL IS A
unique
MEDIUM

51. @meladorri @litmusapp
Email
HTML
CSS
Images
Text
Design
Links
Web
HTML
CSS
Images
Text
Design
Links
✔
✔
✔
✔
✔
✔
✔
Email and web are the same

52. @meladorri @litmusapp
Web
<div>
<h1>
<p>
em
<style>
background-color
margin
Email
<table>
<td>
<td>
px
style=“font-face”
bgcolor
padding
… just kidding

53. GO WITH THE
flow

54. @meladorri @litmusapp
From name Subject line Preheader Open Tap/Click Page/Site
Inbox Email/Body Page/Site
Email user flow
Subscriber experience

55. @meladorri @litmusapp
From name Subject line Preheader Open Tap/Click Page/Site
Inbox Email/Body Page/Site
55
From name
~25 characters
25% of the inbox
Subject line
~35 characters
25% of the inbox
Preview text
~85 characters
50% of the inbox

56. @meladorri @litmusapp
From name Subject line Preheader Open Tap/Click Page/Site
Inbox Email/Body Page/Site
56
TAP, NOT CLICK!

57. @meladorri @litmusapp
“Does your iPhone fold?”

58. @meladorri @litmusapp
#EmbraceTheScroll

59. @meladorri @litmusapp
From name Subject line Preheader Open Tap/Click Page/Site
Inbox Email/Body Page/Site
59
FOLLOW THROUGH!

60. @meladorri @litmusapp
> wtfmobileweb.com

61. THINK INSIDE
the inbox

62. @meladorri @litmusapp
75% of emails are
displayed with preview text
in the inbox

64. @meladorri @litmusapp
✔
✔
✔
✘
✘

65. @meladorri @litmusapp
bit.ly/preview-text
The Ultimate Guide

66. @meladorri @litmusapp

67. UN-SUCKING
strategies
FOR MOBILE

68. @meladorri @litmusapp
strategy #1
mobile first
aka agnostic, aware, scalable

69. @meladorri @litmusapp
Considers the mobile user a priority
• One layout for all screen sizes
• 320-500px
• Large text & buttons
• Generous white space
• Clear calls to action
• Short, concise body copy

71. @meladorri @litmusapp
strategy #2
fluid

72. @meladorri @litmusapp
Email width
changes to fit
within the window
it’s viewed in
Percentage-based
widths adapts to fit
the screen; text wraps
automatically

73. @meladorri @litmusapp
Shorter learning curve
Best for text-heavy emails

74. @meladorri @litmusapp
strategy #3
responsive

75. @meladorri @litmusapp
• 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
https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic

76. @meladorri @litmusapp
• 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

79. @meladorri @litmusapp
Responsive design results in a
15% increase in unique clicks for
mobile users.
https://litmus.com/blog/the-science-of-email-clicks-the-impact-of-responsive-design-inbox-testing

80. @meladorri @litmusapp
Rendering is inconsistent
across devices and operating systems

81. @meladorri @litmusapp
Responsive design
is not supported
everywhere.

82. @meladorri @litmusapp
Device ≠ email client

83. @meladorri @litmusapp
You can’t say “responsive
email works on an iPhone.”
When clients say “it looks
like crap on my Android.”
You should ask “what email
app are you using?”

84. @meladorri @litmusapp
• Automatically scales to fit
• Responsive design support
• Images on by default
• Resizes fonts under 13px
iPhone Mail app

85. @meladorri @litmusapp
• Enlarges fonts in a ‘modified view’
• No responsive design support
• Mail sorted into tabs that mirrors
desktop/browser experience
• Images on automatically
Gmail app

86. @meladorri @litmusapp
‘modified’ ‘original’

87. @meladorri @litmusapp
• No responsive design support
• Displays a sender icon/image in the
inbox—sometimes
• Emails bundled into categories
• Images on automatically
Inbox by Gmail

88. @meladorri @litmusapp

89. @meladorri @litmusapp
• Samsung Hell
• Support for ALT text
• Various screen sizes, OS and app
versions
• Mixed support for media queries
• Some auto-scale, some do not
Android Gmail

90. @meladorri @litmusapp
• Sometimes responsive works
• Inconsistent font display
• Blocks images
• No ALT text
Windows Phone

91. @meladorri @litmusapp
• Support for responsive design
• Blocks images; supports ALT text
• Does not scale/auto-zoom
• No separate app; email joins social,
SMS and voice in the “hub”
BlackBerry

92. TACTICS
for less suckage

93. @meladorri @litmusapp

96. UGH

98. Body copy: 16px+
Headlines: 22px+
Buttons: 44px by 44px
White space: 40px+

99. @meladorri @litmusapp
I LIKE
BIG BUTTONS
… AND I CANNOT LIE

101. @meladorri @litmusapp
320px 375px 414px

102. @meladorri @litmusapp
iPhone 5 iPhone 6 iPhone 6 Plus

103. WATCH
yourself

104. @meladorri @litmusapp
Apple Watch
shows the plain
text version.

105. @meladorri @litmusapp
CRUSTY
Context Relevance
Useful SimpliciTY

108. @meladorri @litmusapp
No text
version?
No email.

109. @meladorri @litmusapp
Links are
disabled.
(no browser)

110. @meladorri @litmusapp
A personal
device that
favors personal
messages.
>> bit.ly/watch-email

111. EMAIL IS A
personal
MEDIUM

112. BONUS
tips

113. @meladorri @litmusapp
vs.

114. @meladorri @litmusapp
OS-specific
content

115. @meladorri @litmusapp
bit.ly/gifs-email

116. @meladorri @litmusapp
bit.ly/bulletproof-buttons
Defensive design: Image Blocking

117. @meladorri @litmusapp
Defensive design: Image Blocking

118. @meladorri @litmusapp
Defensive design: Image Blocking

119. @meladorri @litmusapp
Defensive design: Image Blocking
Guide to styled ALT text >> bit.ly/styledALT
Guide to image blocking >> bit.ly/image-block
!

120. BONUS
goodies

121. litmus.com/lp/2015-state-of-email-report

122. litmus.com/conference

123. RESPONSIVE EMAIL TEMPLATES
bit.ly/slate-templates

124. LITMUS TESTING + ANALYTICS
litmus.com/giftcard coupon code: NEDMA15

125. litmus.com/lp/nedma15
@meladorri