your inbox yourr inbox NEW YORK MEMBER NA ... - LIRealtor.com
NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan
-
Upload
new-england-direct-marketing-association -
Category
Marketing
-
view
336 -
download
0
description
Transcript of NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan
Tips and Tricks for Small Screen Success March 13, 2014
The Mobile Inbox
Who Am I?
Justine Jordan Wearer of Many Hats, Litmus
@meladorri @litmusapp #NEDMAInno14
Join us on Twi!er
@meladorri @litmusapp #NEDMAInno14
1 The crazy growth of mobile
We’ll cover…
2 Knowing your audience
3 Your subscribers on mobile
#NEDMAInno14
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
#NEDMAInno14
Looking back to 2011…
Source: Litmus Email Analytics
0%
10%
20%
30%
40%
50%
60%
70%
Desktop Webmail Mobile
10%
33%
50%
#NEDMAInno14
400%
mobile opens have increased
since 2011
#NEDMAInno14
There’s a few options out there…
Large Medium Small
The unifying characteristic?
TOUCH.
#NEDMAInno14
31% of marketers don’t know their
mobile email open rate
source: marketingsherpa.com
#NEDMAInno14
Your mileage may vary
Litmus = 15% MapMyRun = 70%+ #NEDMAInno14
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
#NEDMAInno14
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
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
#NEDMAInno14
Each phone and app is different
??? Page/Site Tap/Click Preview/Open Preheader Subject Line From Name
#NEDMAInno14
#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
#NEDMAInno14
??? 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
#NEDMAInno14
??? Page/Site Tap/Click Preview/Open Preheader Subject Line
Optimize the conversion path
From Name
YES: Easy to use Finger friendly
#NEDMAInno14
??? Page/Site Tap/Click Preview/Open Preheader Subject Line
Optimize the conversion path
From Name
#NEDMAInno14
• 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
#NEDMAInno14
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
#NEDMAInno14
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
#NEDMAInno14
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
#NEDMAInno14
Your users have fat fingers (we all do)
image: webdesignerdepot.com #NEDMAInno14
Bigger is be!er
• Body copy: 16px+
• Headlines: 22px+
• Bu!ons: 44px by 44px
• Space: 10px+
• Tappable touch
targets
#NEDMAInno14
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
#NEDMAInno14
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
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
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
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
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
#NEDMAInno14
Testing is crucial
#NEDMAInno14
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
Thanks!
Thanks!