nedma14: fat fingers and small screens - justine jordan
DESCRIPTION
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.TRANSCRIPT
Optimizing Email for Multiscreen Delight May 14, 2014
Fat Fingers and Small Screens
Who Am I?
Justine Jordan Wearer of Many Hats, Litmus
litmus.com/lp/nedma
Sample HTML, slides, templates, frameworks, and other goodies.
@meladorri @litmusapp #NEDMA14
1 The crazy growth of mobile
We’ll cover…
2 Knowing your audience
3 Your subscribers on mobile
#NEDMA14
4 Strategies + best practices
Got Screens? image credit: helpmyhelpdesk.com
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
Looking back to 2011…
Source: Litmus Email Analytics
0%
10%
20%
30%
40%
50%
60%
70%
Desktop Webmail Mobile
10%
33%
50%
#NEDMA14
400%
mobile opens have increased
since 2011
#NEDMA14
There’s a few options out there…
Large Medium Small
The unifying characteristic?
TOUCH.
#NEDMA14
31% of marketers don’t know their
mobile email open rate
source: marketingsherpa.com
#NEDMA14
Users do not always conform to averages
< 15% read on mobile 70%+ read on mobile
#NEDMA14
It’s as easy as copy, paste, send
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
Their experiences o!en suck.
Their experiences o!en suck.
great app great site not-so-great email
great site not-so-great email
Their experiences o!en suck.
email receipt requested from an ATM transaction!
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
From and subject are front and center
??? Page/Site Tap/Click Preview/Open Preheader Subject Line From Name
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
??? Page/Site Tap/Click Preview/Open Preheader Subject Line From Name
From and subject are front and center
??? 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
??? Page/Site Tap/Click Preview/Open Preheader Subject Line From Name
Preheader = tertiary inbox content
Good vs. bad preheaders
✔
✔
✔
✘
✘
??? Page/Site Tap/Click Preview/Open Preheader Subject Line From Name
Each phone and app is different
??? Page/Site Tap/Click Preview/Open Preheader Subject Line From Name
#NEDMA14
Each phone and app is different
??? Page/Site Tap/Click Preview/Open Preheader Subject Line From Name
#NEDMA14
#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
??? Page/Site Tap/Click Preview/Open Preheader Subject Line
I like big bu#ons…
From Name
??? Page/Site Tap/Click Preview/Open Preheader Subject Line
Don’t forget the landing page
From Name
NO: interstitials horrible forms Flash
#NEDMA14
??? Page/Site Tap/Click Preview/Open Preheader Subject Line
Optimize the conversion path
From Name
YES: Easy to use Finger friendly
#NEDMA14
??? 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?
strategy #1
mobile first
aka agnostic, aware, scalable
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
Strategy #1: Mobile first
strategy #2
fluid
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
Strategy #2: Fluid
Shorter learning curve Best for text-heavy emails
strategy #3
responsive
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
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
Strategy #3: Responsive
Email is a unique medium with unique considerations
Click is now tap
The finger is the new mouse
#NEDMA14
Your users have fat fingers (we all do)
image: webdesignerdepot.com #NEDMA14
Bigger is be#er
• Body copy: 16px+
• Headlines: 22px+
• Bu#ons: 44px by 44px
• Space: 10px+
• Tappable touch
targets
#NEDMA14
Blue links on iOS
• 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
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
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
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
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
Wide variety of ways to access email
Device ≠ email client
Wide variety of ways to access email
Device ≠ email client
Email is an applica&on
Rendering is inconsistent across devices and operating systems
Wide variety of ways to access email
Testing is crucial
#NEDMA14
Testing is crucial
#NEDMA14
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
litmus.com/community
litmus.com/conference
litmus.com/lp/nedma
14-DAY TRIAL
LITMUS.COM/GIFTCARD
HELLO
Thanks!
Thanks!