No matter what the content, subscribers interact with email messages across a dizzying variety of apps, devices, programs and platforms. In fact, 50% of emails are viewed on a mobile device. How can you ensure an effective email experience across a range of screen sizes? This presentation discusses how to find out who is opening your emails on mobile, the implications of various screen sizes and operating systems, along with common pitfalls and easy wins for optimizing email for mobile devices.
This presentation will teach you:
- Examples and key best practices
- Strategies for approaching mobile-friendly emails
- Actionable advice to take back to your team and implement right away
This presentation was developed by Justine Jordan, Director of Research and Education at Litmus, and was given at NEDMA's 2014 DM Innovations Symposium.
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
#NEDMAInno14
7. Looking back to 2011…
Source: Litmus Email Analytics
0%
10%
20%
30%
40%
50%
60%
70%
Desktop Webmail Mobile
10%
33%
50%
#NEDMAInno14
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
#NEDMAInno14
15. The mobile experience is
different than the desktop
experience
Conversion
Page/Site
Click/Tap
Preview/Open
Preheader
Subject Line
From Name
The Subscriber
Experience
#NEDMAInno14
16. From and subject are front and center
???
Page/Site
Tap/Click
Preview/Open
Preheader
Subject Line
From Name
17. 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
30. 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
#NEDMAInno14
33. 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
#NEDMAInno14
36. 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
#NEDMAInno14
37. 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
44. • 24% market share
• Automatically scales to fit
• Excellent support for media queries
• Images on by default
• Resizes fonts under 13px
What to know: iPhone
#NEDMAInno14
45. 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”
#NEDMAInno14
46. 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
#NEDMAInno14
47. 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
#NEDMAInno14
48. 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
#NEDMAInno14
54. 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