This document summarizes strategies for creating effective mobile-optimized emails. It discusses the growth of mobile email usage and importance of designing for mobile. Three main strategies are covered: mobile-first, fluid, and responsive. Mobile-first involves a single column layout optimized for small screens. Fluid design adapts content width based on screen size. Responsive design uses media queries to dynamically change content for different screen widths. The document provides tips for each device type and stresses the importance of testing across email clients due to rendering inconsistencies.

1. 3 Strategies for Awesome
Mobile-Optimized Emails
January 30th 2014

2. Who Am I?
Justine Jordan
Marketing Director, Litmus

3. Join us on Twi er
@meladorri @litmusapp
#KISSwebinar

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

5. Got Screens?
image credit: helpmyhelpdesk.com

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

7. Looking back to 2011…
Desktop
Mobile
Webmail
50%
60
45
30
13
20
Q
4
01
3
32
22
Q
Q
01
3
3
Q
12
01
12
20
4
Q
01
2
32
Q
Q
22
2
Q
12
01
11
20
4
Q
32
Q
22
Q
Q
12
01
1
01
1
10%
01
1
15
01
2
33%
Source: Litmus Email Analytics
#KISSwebinar

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

9. Top Email Clients
!
#1 – iPhone
#2 – Outlook
#3 – Android
#4 – iPad
source: emailclientmarketshare.com

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

11. The unifying characteristic?
TOUCH.

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

13. Your mileage may vary
MapMyRun = 70%+
Litmus = 15%
#KISSwebinar

14. It’s as easy as 1, 2, 3…
Copy, paste, send!

15. You get ONE chance to make an impression.
If you get a mobile email that
doesn’t look good, what do you do?
+15%
Delete it
+68%
Unsubscribe
80.3%
30.2%
13.5%
View on computer
3.8%
Don't know
10%
6.3%
Read anyway
0
25
50
75
Source: BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013
100

16. You get ONE chance to make an impression.
How does
Strongly Negative
Neutral
24%
25%
a poorly
designed email
affect your
perception
75%
‘negative’
of the brand?
Slightly Negative
51%
Source: BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013

17. Mobile Triage Myth
3%
reopen on
another
client
97%
view in a single
environment

18. The mobile email experience
From Name
Subject Line
Preheader
Preview/Open
Tap
Page/Site
???
#KISSwebinar

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

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

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

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

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

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

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

26. But be aware of the viewport
From Name
Subject Line
Preheader
Preview/Open
Tap/Click
Page/Site
Long subject lines
push content down in
the viewport
???

27. #EmbraceTheScroll
From Name
Subject Line
Preheader
Preview/Open
Tap/Click
Page/Site
???

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

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

30. Reduce friction

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

32. Don’t forget the landing page
From Name
Subject Line
Preheader
Preview/Open
Tap/Click
Page/Site
???
YES:
Easy to use
Finger friendly
#KISSwebinar

33. Consider the conversion path
From Name
Subject Line
Preheader
Preview/Open
Tap/Click
Page/Site
???
➡ 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?
#KISSwebinar

34. strategy #1
mobile first
!
aka agnostic, aware, scalable

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

36. Strategy #1: Mobile first

37. strategy #2
fluid

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

39. Strategy #2: Fluid
!
➡ Shorter learning curve
➡ Best for text-heavy emails

40. strategy #3
responsive

41. Strategy #3: Responsive

42. 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
h ps://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic

43. Strategy #3: Responsive
Uses media queries to detect screen size and alter
content accordingly
➡ More than a “line of code”
➡ Set of conditional statement 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

44. Responsive emails in Outlook
<table class="fullWidth" width=“620">!
!
<tr>!
!
!
<td>!
!
!
!
<table width="50%" align=“left”>!
!
!
!
!
<tr>!
!
!
!
!
!
<td>Left Column</td>!
!
!
!
!
</tr>!
!
!
!
</table>!
!
!
!
<table width="50%" align=“right">!
!
!
!
!
<tr>!
!
!
!
!
!
<td>Right Column</td>!
!
!
!
!
</tr>!
!
!
!
</table>!
!
!
</td> !
!
</tr>!
</table>
➡ Use tables and
the “align” property
➡ Don’t rely on floats
Remember: media queries aren’t intended to be viewed on a desktop—
they’re intended for a smartphone or tablet.

45. Media queries aren’t bulletproof
iPhone'native'
yes'
Yahoo!'mobile'apps'
no'
iPad'native'
yes'
Windows'Mobile'7'
no'
Android'2.1'native'
no'
Windows'Mobile'7.5'
yes'
Android'2.2'native'
yes'
Windows'Mobile'8'
no'
Android'2.3'native'
yes'
BlackBerry'OS'6'
yes'
Android'4.x'native'
yes'
BlackBerry'OS'7'
yes'
Gmail'mobile'apps'
no'
BlackBerry'Z10'
yes'
Mailbox'iOS'app'
yes'
Kindle'Fire'native'
yes'
h p://stylecampaign.com/blog/2012/10/responsive-email-support/

46. Email
is a unique medium
with unique
considerations

47. Click is now tap
The finger is the new mouse

48. Your fingers are fat
image: webdesignerdepot.com

49. Bigger is be er
➡ Body copy: 16px+
➡ Headlines: 22px+
➡ Bu ons: 44px by 44px
➡ Space: 10px+
➡ Tappable touch targets
#KISSwebinar

50. Beware small font sizes
-webkit-text-size-adjust: none;
#KISSwebinar

51. Dial up the contrast
Bright screen = dead battery

52. Ditch the ‘mobile version’
Why the extra click?
email
mobile version
web site

53. What to know about: iPhone
➡ 26% market share
➡ Automatically scales messages
to fit the screen
➡ Excellent support for CSS3
and media queries
➡ Images on by default
➡ Resizes fonts under 13px
#KISSwebinar

54. What to know about: BlackBerry
➡ 0.1% market share
➡ Media query support
➡ Blocks images
➡ Supports styled ALT text
➡ Does not scale/auto-zoom
➡ No separate app; email joins social, SMS
and voice in the “hub”
#KISSwebinar

55. What to know about: Android
➡ 12% market share
➡ Blocks images by default
➡ Supports ALT text
➡ Mixed support for media queries
➡ Various screen sizes and
sometimes automatic scaling
➡ Primary content focus on le hand side
#KISSwebinar

56. What to know about: Android

57. What to know about: Windows Phone
➡ 0.17% market share
➡Mixed media query support
➡ Inconsistent font display
➡ Blocks images
➡ No ALT text
#KISSwebinar

58. Device ≠ email client

59. Device ≠ email client
Email is an application
and occasionally a mobile browser

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

61. Testing is crucial
#KISSwebinar

62. Testing is crucial
#KISSwebinar

63. Resources!
lit.ms/KISSresources
www.responsiveemailresources.com

64. 14-DAY TRIAL
KISSMOBILE
LITMUS.COM/GIFTCARD

65. -TAKEAWAYS -
1
Know your audience
2
Design for ‘one thumb’ and
‘one eyeball’
3
Tap your way to success
4
Rendering is tied to app, not
device

66. Questions?
I (may) have answers.

67. Thanks!
Thanks!
justine@litmus.com / @meladorri