It’s probably a safe bet that the percentage of your subscribers opening your emails on mobile devices is growing — and quite rapidly. Email marketers must account for the fact that we live in an always-connected world, where consumers are using their smartphones to manage their inbox while on the go. Ensure your emails don’t get lost in the mobile shuffle by getting the information you need to optimize your email program for its growing mobile subscriber base. Topics discussed include how to identify your mobile audience, how to design your emails for optimum user experience across a variety of mobile devices, tips for increasing subscriber engagement with mobile-friendly content, and much more!

1. Strategies, Tactics
+ Design Tips
for Mobile Email Success

2. Justine Jordan
Content, research, marketing
@meladorri @litmusapp
Quick Introduction
Justine has 7+ years of experience
writing, designing and coding emails.
Previously with ExactTarget.
Litmus lets you preview/QA emails
before you send and provides
detailed post-send analytics.

3. Mobile Email: Why
Mobile is big, but how big?

4. Email Opens: August 2013
Mobile:
Smartphones (iPhone, Android) and
tablets
Desktop:
Installed email programs
(Outlook, Apple Mail)
Webmail:
Email accessed through a web browser
(Gmail, Hotmail, Yahoo!)
Desktop
32%
Webmail
21%
Mobile
47%
Source: Litmus Email Analytics

5. 0%
10%
20%
30%
40%
50%
60%
Desktop Webmail Mobile
45%
33%
10%
Email Opens: 2011-now
Source: Litmus Email Analytics

6. 0%
10%
20%
30%
40%
50%
60%
Desktop Webmail Mobile
45%
33%
10%
Email Opens: 2011-now
Source: Litmus Email Analytics
+350%

7. some of our major retail brands
are seeing 60% of their subscribers
viewing on a mobile device
—Cara Olson, DEG
“
”

8. Brand/Industry A: 55% Brand/Industry B: 18%
Plan on data, not your gut

9. Know Your Audience
Copy, paste
& send

10. Small Medium Large
iPhone
2.3” wide
Galaxy Note II
3.2” wide
Nexus 7
7.3” wide
BB Bold
2.6” wide
iPad Mini
5.3” wide
Excite 13
8.5” wide
Screensize-apalooza

11. The unifying characteristic?
TOUCH.

12. Experience Matters
It’s more than just metrics

13. One Chance to Make an Impression
80.30%
30.20%
13.50%
3.80%
6.30%
Delete it
Unsubscribe
View on computer
Don't know
Read anyway
BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013
Neutral
24.60%
Slightly
Negative
51.30%
Strongly
Negative
24.10%
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?
+15%
+68%

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

15. Consider the experience
• The mobile experience is
different than the desktop
experience
• Landing pages are part of that
experience
????
Page/Site
Tap
Preview/Open
Preheader
Subject Line
From Name

16. From name and subject line are front and center

17. Focus on „from name‟
and subject line
From Name
~25 characters
Subject Line
~35 characters
Preheader
~85 characters 17

18. Preheaders Are Tertiary Inbox Content

19. iPhone Windows Phone
Blackberry

20. iPhone Windows Phone
Blackberry

21. Inconsistent
rendering
across devices
and operating
systems

22. iPhone:
Scales to width;
320 x 460
Android:
No scaling;
dimensions vary;
top-left corner
displayed
Inconsistent
rendering
across devices
and operating
systems

23. 15% two
handed
49% one handed
36% cradled
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
67% used right thumb on the screen
33% used left thumb on the screen
Provide click/tap opportunities

24. Prioritize and focus
• Identify the top 3-5 activities
– Purchase?
– Download?
– Registration?
– Social?

25. NO:
interstitial
boxes
NO:
impossible
form fields

26. YES:
easy to
navigate
YES:
finger friendly

27. Mobile Design Principles
aka ‘best practices’

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

29. Bigger is Better
• Body copy: 16px+
• Headlines: 22px+
• Buttons: 44px by 44px
• Space: 10px+

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

32. Say no to link clusters and yes to white space

33. Device targeting can
display app/OS specific
content

34. Dial up the contrast
Bright screens
kill batteries

35. Test, test, test!

37. Strategies & Approaches
how-to

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

39. Mobile First
Considers the
mobile user as
a priority
|-------------------460px -------------------| |---------------------600px ---------------------|

40. Mobile First / Friendly
• One layout for all
screen sizes
• Single column design
– 320-500px
• Large text & buttons
• Generous white space
• Clear calls to action
• Short, concise body
copy
Agnostic / Aware / Scalable

42. Pros
• Prioritizes important
data, content, actions
• Easier execution
• No reliance on media query support
• Good rendering in apps and native
clients
Cons
• Desktop can suffer
• Less real estate
• Can get long
• Fixed width can be less
than ideal for Android
Mobile First / Friendly
BEST FOR:
Ready for change, testing the waters, or resource strapped

43. Fluid
Email width
changes to
fit within the
window
|--------------------------------------------------------1166px---------------------------------------------------|
|-----------------------------525px --------------------------|

44. Fluid layout
• Percentage-
based widths
• Adapts to fill
the screen it’s
viewed on; text
wraps
automatically

46. Fluid layout
BEST FOR:
Simple layouts, automated emails, mostly text/few images
Pros
• Simple execution
• No learning curve or reliance on media
queries
Cons
• Fewer design choices
• Very narrow or very wide
emails can get awkward
and hard to read

47. Responsive
Design
Uses media
queries to detect
screen size and
alter content
accordingly
|-----------320px ------------||--------------------------------------------700px------------------------------------------
|

48. Responsive Design
• 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

50. Pros
• Restyle, resize or reorder elements
• Ability to hide/show desktop or mobile
specific images/content
• Customized calls to action
• Seamless experience across a range of
screen sizes
Cons
• Coding learning curve
• Forces tough choices
• Increased production and
QA time
Responsive Design
BEST FOR:
Growing mobile audiences, travel alerts, tech companies

51. Email is an *application*

52. Device ≠ email client
Email is an *application*

53. iPhone native yes
iPad native yes
Android 2.1 native no
Android 2.2 native yes
Android 2.3 native yes
Android 4.x native yes
Gmail mobile apps no
Mailbox iOS app yes
@media support
http://stylecampaign.com/blog/2012/10/responsive-email-support/
Yahoo! mobile apps no
Windows Mobile 7 no
Windows Mobile 7.5 yes
Windows Mobile 8 no
BlackBerry OS 6 yes
BlackBerry OS 7 yes
BlackBerry Z10 yes
Kindle Fire native yes

54. • Rewards Network: CTR increased by more than 25%
• Deckers: 10% increase in CTR; 9% increase in mobile
opens
• Crocs: 7.66% lift in CTOR; 15.63% lift in iPhone ‘read’
engagement; 8.82% lift in mobile ‘read’ engagement
• SavvyMom: 3x lift in CTOR. 12% of those who opened
on mobile clicked vs. 6% who opened on desktop
More coming all the time: litmus.com/blog
Responsive Results

55. Responsive isn‟t always the answer
1. Resources
2. Data
3. Company type
4. User expectations
Company A
1. Resources: coders, designers, writer
2. Data: 55% mobile
3. Company type: Tech
4. User expectations: B2B Tech audience
Responsive
Company B
1. Resources: marketing manager, intern
2. Data: 18% mobile
3. Company type: Non-Profit/Education
4. User expectations: low sophistication
Aware

56. Android Observations
• Blocks images by default;
supports ALT text
• Two apps with opposing
support for media queries
• Primary content focus on left-
hand side
• Various screen sizes and
sometimes automatic scaling

57. Blackberry Observations
• 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”

58. Windows Phone
Observations
• Mixed media query support
• Does weird things to fonts
• Blocks images; no ALT text
• No one has them!

59. iPhone Observations
• Automatically scales
messages to fit the screen
• Excellent support for CSS3
and media queries
• Images on by default
• Resizes fonts under 13px

60. Resources
info + tools

61. http://stylecampaign.com/blog/2013/03/responsive-email-design-red/
Style Campaign
RED Webinar

62. Market Share Stats
http://emailclientmarketshare.com

63. www.litmus.com/blog
Infographics, webinars, articles

64. Antwort: Responsive Layouts for Email
http://internations.github.io/antwort/

65. Responsive Email Patterns
http://briangraves.github.io/ResponsiveEmailPatterns/

66. Responsive Email Tutorial
http://www.netmagazine.com/tutorials/build-responsive-emails

67. Campaign
Monitor
RED Guide
http://www.campaignmonitor.com/gu
ides/mobile/

69. Resources
stylecampaign.com/blog
campaignmonitor.com/blog
mailchimp.com/blog
emaildesignreview.com
mobileawesomeness.com
mediaqueri.es
Media Post Email Insider columns
A List Apart / A Book Apart
Ethan Marcotte
Luke Wroblewski
Twitter community
https://litmus.com/blog/our-favorite-responsive-and-mobile-email-resources

70. THANKS!
@meladorri
justine@litmus.com
questions?