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
![Page 1: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/1.jpg)
Tips and Tricks for Small Screen Success March 13, 2014
The Mobile Inbox
![Page 2: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/2.jpg)
Who Am I?
Justine Jordan Wearer of Many Hats, Litmus
![Page 3: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/3.jpg)
@meladorri @litmusapp #NEDMAInno14
Join us on Twi!er
@meladorri @litmusapp #NEDMAInno14
![Page 4: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/4.jpg)
1 The crazy growth of mobile
We’ll cover…
2 Knowing your audience
3 Your subscribers on mobile
#NEDMAInno14
4 Strategies + best practices
![Page 5: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/5.jpg)
Got Screens? image credit: helpmyhelpdesk.com
![Page 6: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/6.jpg)
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
![Page 7: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/7.jpg)
Looking back to 2011…
Source: Litmus Email Analytics
0%
10%
20%
30%
40%
50%
60%
70%
Desktop Webmail Mobile
10%
33%
50%
#NEDMAInno14
![Page 8: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/8.jpg)
400%
mobile opens have increased
since 2011
#NEDMAInno14
![Page 9: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/9.jpg)
There’s a few options out there…
Large Medium Small
![Page 10: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/10.jpg)
The unifying characteristic?
TOUCH.
#NEDMAInno14
![Page 11: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/11.jpg)
31% of marketers don’t know their
mobile email open rate
source: marketingsherpa.com
#NEDMAInno14
![Page 12: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/12.jpg)
Your mileage may vary
Litmus = 15% MapMyRun = 70%+ #NEDMAInno14
![Page 13: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/13.jpg)
It’s as easy as copy, paste, send
![Page 14: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/14.jpg)
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
![Page 15: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/15.jpg)
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
![Page 16: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/16.jpg)
From and subject are front and center
??? Page/Site Tap/Click Preview/Open Preheader Subject Line From Name
![Page 17: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/17.jpg)
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 18: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/18.jpg)
??? Page/Site Tap/Click Preview/Open Preheader Subject Line From Name
From and subject are front and center
![Page 19: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/19.jpg)
??? 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 20: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/20.jpg)
??? Page/Site Tap/Click Preview/Open Preheader Subject Line From Name
Preheader = tertiary inbox content
![Page 21: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/21.jpg)
Good vs. bad preheaders
✔
✔
✔
✘
✘
??? Page/Site Tap/Click Preview/Open Preheader Subject Line From Name
![Page 22: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/22.jpg)
Each phone and app is different
??? Page/Site Tap/Click Preview/Open Preheader Subject Line From Name
#NEDMAInno14
![Page 23: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/23.jpg)
Each phone and app is different
??? Page/Site Tap/Click Preview/Open Preheader Subject Line From Name
#NEDMAInno14
![Page 24: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/24.jpg)
#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 25: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/25.jpg)
??? Page/Site Tap/Click Preview/Open Preheader Subject Line
I like big bu!ons…
From Name
![Page 26: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/26.jpg)
??? Page/Site Tap/Click Preview/Open Preheader Subject Line
Don’t forget the landing page
From Name
NO: interstitials horrible forms Flash
#NEDMAInno14
![Page 27: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/27.jpg)
??? Page/Site Tap/Click Preview/Open Preheader Subject Line
Optimize the conversion path
From Name
YES: Easy to use Finger friendly
#NEDMAInno14
![Page 28: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/28.jpg)
??? 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?
![Page 29: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/29.jpg)
strategy #1
mobile first
aka agnostic, aware, scalable
![Page 30: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/30.jpg)
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
![Page 31: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/31.jpg)
Strategy #1: Mobile first
![Page 32: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/32.jpg)
strategy #2
fluid
![Page 33: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/33.jpg)
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
![Page 34: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/34.jpg)
Strategy #2: Fluid
Shorter learning curve Best for text-heavy emails
![Page 35: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/35.jpg)
strategy #3
responsive
![Page 36: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/36.jpg)
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
![Page 37: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/37.jpg)
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
![Page 38: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/38.jpg)
Strategy #3: Responsive
![Page 39: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/39.jpg)
Email is a unique medium with unique considerations
![Page 40: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/40.jpg)
Click is now tap
The finger is the new mouse
#NEDMAInno14
![Page 41: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/41.jpg)
Your users have fat fingers (we all do)
image: webdesignerdepot.com #NEDMAInno14
![Page 42: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/42.jpg)
Bigger is be!er
• Body copy: 16px+
• Headlines: 22px+
• Bu!ons: 44px by 44px
• Space: 10px+
• Tappable touch
targets
#NEDMAInno14
![Page 43: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/43.jpg)
Blue links on iOS
![Page 44: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/44.jpg)
• 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
![Page 45: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/45.jpg)
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
![Page 46: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/46.jpg)
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
![Page 47: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/47.jpg)
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
![Page 48: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/48.jpg)
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
![Page 49: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/49.jpg)
Wide variety of ways to access email
Device ≠ email client
![Page 50: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/50.jpg)
Wide variety of ways to access email
Device ≠ email client
Email is an applica&on
![Page 51: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/51.jpg)
Rendering is inconsistent across devices and operating systems
Wide variety of ways to access email
![Page 52: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/52.jpg)
Testing is crucial
#NEDMAInno14
![Page 53: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/53.jpg)
Testing is crucial
#NEDMAInno14
![Page 54: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/54.jpg)
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
![Page 55: NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Justine Jordan](https://reader033.fdocuments.us/reader033/viewer/2022052619/5552952ab4c905e8128b4b9b/html5/thumbnails/55.jpg)
Thanks!
Thanks!