Your SlideShare is downloading. ×
0
3 Strategies for Awesome
Mobile-Optimized Emails
January 30th 2014
Who Am I?
Justine Jordan
Marketing Director, Litmus
@meladorri @litmusapp
#KISSwebinar
Join us on Twi er
1 The crazy growth of mobile
We’ll cover…
2 Knowing your audience
3 Your subscribers on mobile
#KISSwebinar
4 Strategies +...
WATCH THIS WEBINAR RECORDING NOW
Got Screens?
image credit: helpmyhelpdesk.com
Mobile is big, but how big?
#KISSwebinar
Webmail
20%
Desktop
29%
Mobile
51%
Mobile:
Smartphones (iPhone, Android)
and tabl...
Looking back to 2011…
#KISSwebinar
Source: Litmus Email Analytics
15
30
45
60
Q
12011
Q
22011
Q
32011
Q
4
2011
Q
12012
Q
2...
400%
mobile opens have increased
since 2011
#KISSwebinar
Top Email Clients
!
#1 – iPhone
#2 – Outlook
#3 – Android
#4 – iPad
source: emailclientmarketshare.com
There’s a few options out there…
LargeMediumSmall
The unifying characteristic?

TOUCH.
31%
of marketers don’t know their
mobile email open rate
source: marketingsherpa.com
Your mileage may vary
#KISSwebinar
Litmus = 15%MapMyRun = 70%+
It’s as easy as 1, 2, 3…
Copy, paste, send!
You get ONE chance to make an impression.
Source: BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013
10%
D...
Strongly Negative
24%
Slightly Negative
51%
Neutral
25%
You get ONE chance to make an impression.
Source: BlueHornet Study...
3%
reopen on
another
client 97%
view in a single
environment
Mobile Triage Myth
The mobile email experience
???
From Name
Subject Line
Preheader
Preview/Open
Tap
Page/Site
#KISSwebinar
From and subject are front and center
???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
From and subject are front and center
???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
➡ Large and bold = 
...
???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
From and subject are front and center
???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
From and subject are front and center
➡ Second in the
hier...
???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
Preheader = tertiary inbox content
Good vs. bad preheaders
✔
✔
✔
✘
✘
???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
Each phone and app is different
???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
But be aware of the viewport
???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
Long subject lines
push conte...
#EmbraceTheScroll
???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
#EmbraceTheScroll
???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
Scrolling is a continuation.
Clicking is...
???Page/SiteTap/ClickPreview/OpenPreheaderSubject Line
I like big bu ons…
From Name
#KISSwebinar
Reduce friction
???Page/SiteTap/ClickPreview/OpenPreheaderSubject Line
Don’t forget the landing page
From Name
NO:
interstitials
horrible ...
???Page/SiteTap/ClickPreview/OpenPreheaderSubject Line
Don’t forget the landing page
From Name
YES:
Easy to use
Finger fri...
???Page/SiteTap/ClickPreview/OpenPreheaderSubject Line
Consider the conversion path
From Name
➡ What is your goal?
➡ Can t...
LOG IN WITH GOOGLE
Start Your Free KISSmetrics Trail
strategy #1
mobile first
!
aka agnostic, aware, scalable
Strategy #1: Mobile first
Considers the mobile user a priority
➡ One layout for all screen sizes
➡ Single column design
• 3...
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 t...
Strategy #2: Fluid
!
➡ Shorter learning curve
➡ Best for text-heavy emails
strategy #3
responsive
Strategy #3: Responsive
Strategy #3: Responsive
➡ Resize content: make
images fit, make text
larger
➡ Hide content on mobile
➡Stack columns
➡ move ...
Strategy #3: Responsive
➡ More than a “line of code”
➡ Set of conditional statement that enables specific styles
➡ If the s...
Responsive emails in Outlook
➡ Use tables and 

the “align” property
➡ Don’t rely on floats
<table class="fullWidth" width=...
Media queries aren’t bulletproof
h p://stylecampaign.com/blog/2012/10/responsive-email-support/
iPhone'native' yes'
iPad'n...
Email
is a unique medium
with unique
considerations
Click is now tap
The finger is the new mouse
Your fingers are fat
image: webdesignerdepot.com
Bigger is be er
➡ Body copy: 16px+
➡ Headlines: 22px+
➡ Bu ons: 44px by 44px
➡ Space: 10px+
➡ Tappable touch targets
Beware small font sizes
-webkit-text-size-adjust: none;
Dial up the contrast
Bright screen = dead battery
email mobile version web site
Ditch the ‘mobile version’
Why the extra click?
What to know about: iPhone
➡ 26% market share
➡ Automatically scales messages 

to fit the screen
➡ Excellent support for C...
What to know about: BlackBerry
➡ 0.1% market share
➡ Media query support
➡ Blocks images
➡ Supports styled ALT text
➡ Does...
What to know about: Android
➡ 12% market share
➡ Blocks images by default
➡ Supports ALT text
➡ Mixed support for media qu...
What to know about: Android
What to know about: Windows Phone
➡ 0.17% market share
➡Mixed media query support
➡ Inconsistent font display
➡ Blocks ima...
Device ≠ email client
Device ≠ email client
Email is an application
and occasionally a mobile browser
Wide variety of ways to access email
Rendering is inconsistent
across devices and operating systems
Testing is crucial
#KISSwebinar
Testing is crucial
#KISSwebinar
Resources!
lit.ms/KISSresources
www.responsiveemailresources.com
14-DAY TRIAL
KISSMOBILE
LITMUS.COM/GIFTCARD
1 Know your audience
2 Design for ‘one thumb’ and 

‘one eyeball’
3 Tap your way to success
-TAKEAWAYS -
4 Rendering is ti...
Questions?
I (may) have answers.
Thanks!
Thanks!
justine@litmus.com / @meladorri
Upcoming SlideShare
Loading in...5
×

3 Strategies For Awesome Mobile-Optimized Emails

9,325

Published on

1 The crazy growth of mobile, 2 Knowing your audience, 3 Your subscribers on mobile, 4 Strategies
Mobile is big, but how big?
Looking back to 2011…
mobile opens have increased 400% since 2011 #KISSwebinar
Top Email Clients! #1 – iPhone #2 – Outlook #3 – Android #4
There’s a few options out there… Small Medium Large
The unifying characteristic?
 TOUCH.
31% of marketers don’t know their mobile email open rate source: marketingsherpa.com
Your mileage may vary MapMyRun = 70%+ Litmus = 15% #KISSwebinar
It’s as easy as 1, 2, 3… Copy, paste, send!
You get ONE chance to make an impression.
Mobile Triage Myth 3% reopen on another client 97% view in a single environment
The mobile email experience
From and subject are front and center
Preheader = tertiary inbox content
Good vs. bad preheaders
Each phone and app is different
But be aware of the viewport
#EmbraceTheScroll
I like big buttons…
Reduce friction
Don’t forget the landing page
Consider the conversion path
Strategy #1: Mobile first Considers the mobile user a priority
Strategy #2: Fluid Email width 
 changes to fit 
 within the window 
 it’s viewed in !
Strategy #3: Responsive Uses media queries to detect screen size and alter content accordingly
Responsive emails in Outlook
Media queries aren’t bulletproof
Email is a unique medium with unique considerations
Click is now tap The finger is the new mouse
Your fingers are fat image: webdesignerdepot.com
Bigger is better
Beware small font sizes
Dial up the contrast Bright screen = dead battery
Ditch the ‘mobile version’ Why the extra click?
What to know about: Android
What to know about: Windows Phone
Device ≠ email client Email is an application and occasionally a mobile browser
Wide variety of ways to access email Rendering is inconsistent across devices and operating systems
Testing

Published in: Marketing, Technology
1 Comment
50 Likes
Statistics
Notes
  • Confused with too many things to follow!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
9,325
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
187
Comments
1
Likes
50
Embeds 0
No embeds

No notes for slide

Transcript of "3 Strategies For Awesome Mobile-Optimized Emails"

  1. 1. 3 Strategies for Awesome Mobile-Optimized Emails January 30th 2014
  2. 2. Who Am I? Justine Jordan Marketing Director, Litmus
  3. 3. @meladorri @litmusapp #KISSwebinar Join us on Twi er
  4. 4. 1 The crazy growth of mobile We’ll cover… 2 Knowing your audience 3 Your subscribers on mobile #KISSwebinar 4 Strategies + best practices 5 Examples!
  5. 5. WATCH THIS WEBINAR RECORDING NOW
  6. 6. Got Screens? image credit: helpmyhelpdesk.com
  7. 7. Mobile is big, but how big? #KISSwebinar Webmail 20% Desktop 29% Mobile 51% 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
  8. 8. Looking back to 2011… #KISSwebinar Source: Litmus Email Analytics 15 30 45 60 Q 12011 Q 22011 Q 32011 Q 4 2011 Q 12012 Q 22012 Q 32012 Q 4 2012 Q 12013 Q 22013 Q 32013 Q 4 2013 Desktop Mobile Webmail 10% 50% 33%
  9. 9. 400% mobile opens have increased since 2011 #KISSwebinar
  10. 10. Top Email Clients ! #1 – iPhone #2 – Outlook #3 – Android #4 – iPad source: emailclientmarketshare.com
  11. 11. There’s a few options out there… LargeMediumSmall
  12. 12. The unifying characteristic?
 TOUCH.
  13. 13. 31% of marketers don’t know their mobile email open rate source: marketingsherpa.com
  14. 14. Your mileage may vary #KISSwebinar Litmus = 15%MapMyRun = 70%+
  15. 15. It’s as easy as 1, 2, 3… Copy, paste, send!
  16. 16. You get ONE chance to make an impression. Source: BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013 10% Delete it Unsubscribe View on computer Don't know Read anyway 0 25 50 75 100 If you get a mobile email that doesn’t look good, what do you do? 80.3% 30.2% 13.5% 3.8% 6.3% +68% +15%
  17. 17. Strongly Negative 24% Slightly Negative 51% Neutral 25% You get ONE chance to make an impression. Source: BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013 How does a poorly designed email affect your perception of the brand? 75% ‘negative’
  18. 18. 3% reopen on another client 97% view in a single environment Mobile Triage Myth
  19. 19. The mobile email experience ??? From Name Subject Line Preheader Preview/Open Tap Page/Site #KISSwebinar
  20. 20. From and subject are front and center ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
  21. 21. From and subject are front and center ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name ➡ Large and bold = 
 top hierarchy in 
 the mobile inbox ➡ Cuts off a er ~25 characters
  22. 22. ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name From and subject are front and center
  23. 23. ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name From and subject are front and center ➡ Second in the hierarchy ➡ Android wraps to the next line ➡ iPhone cuts off at ~35 characters
  24. 24. ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name Preheader = tertiary inbox content
  25. 25. Good vs. bad preheaders ✔ ✔ ✔ ✘ ✘ ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
  26. 26. Each phone and app is different ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
  27. 27. But be aware of the viewport ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name Long subject lines push content down in the viewport
  28. 28. #EmbraceTheScroll ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
  29. 29. #EmbraceTheScroll ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name Scrolling is a continuation. Clicking is a decision. ! Hundreds or thousands of decisions taken together add up to real friction. @bokardo
  30. 30. ???Page/SiteTap/ClickPreview/OpenPreheaderSubject Line I like big bu ons… From Name #KISSwebinar
  31. 31. Reduce friction
  32. 32. ???Page/SiteTap/ClickPreview/OpenPreheaderSubject Line Don’t forget the landing page From Name NO: interstitials horrible forms Flash
  33. 33. ???Page/SiteTap/ClickPreview/OpenPreheaderSubject Line Don’t forget the landing page From Name YES: Easy to use Finger friendly
  34. 34. ???Page/SiteTap/ClickPreview/OpenPreheaderSubject Line Consider the conversion path From Name ➡ 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?
  35. 35. LOG IN WITH GOOGLE Start Your Free KISSmetrics Trail
  36. 36. strategy #1 mobile first ! aka agnostic, aware, scalable
  37. 37. Strategy #1: Mobile first Considers the mobile user a priority ➡ One layout for all screen sizes ➡ Single column design • 320-500px ➡ Large text & bu ons ➡ Generous white space ➡ Clear calls to action ➡ Short, concise body copy
  38. 38. Strategy #1: Mobile first
  39. 39. strategy #2 fluid
  40. 40. 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
  41. 41. Strategy #2: Fluid ! ➡ Shorter learning curve ➡ Best for text-heavy emails
  42. 42. strategy #3 responsive
  43. 43. Strategy #3: Responsive
  44. 44. 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 h ps://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic
  45. 45. Strategy #3: Responsive ➡ 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 Uses media queries to detect screen size and alter content accordingly
  46. 46. Responsive emails in Outlook ➡ Use tables and 
 the “align” property ➡ Don’t rely on floats <table class="fullWidth" width=“620">! ! <tr>! ! ! <td>! ! ! ! <table width="50%" align=“left”>! ! ! ! ! <tr>! ! ! ! ! ! <td>Left Column</td>! ! ! ! ! </tr>! ! ! ! </table>! ! ! ! <table width="50%" align=“right">! ! ! ! ! <tr>! ! ! ! ! ! <td>Right Column</td>! ! ! ! ! </tr>! ! ! ! </table>! ! ! </td> ! ! </tr>! </table> Remember: media queries aren’t intended to be viewed on a desktop— they’re intended for a smartphone or tablet.
  47. 47. Media queries aren’t bulletproof h p://stylecampaign.com/blog/2012/10/responsive-email-support/ 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' 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'
  48. 48. Email is a unique medium with unique considerations
  49. 49. Click is now tap The finger is the new mouse
  50. 50. Your fingers are fat image: webdesignerdepot.com
  51. 51. Bigger is be er ➡ Body copy: 16px+ ➡ Headlines: 22px+ ➡ Bu ons: 44px by 44px ➡ Space: 10px+ ➡ Tappable touch targets
  52. 52. Beware small font sizes -webkit-text-size-adjust: none;
  53. 53. Dial up the contrast Bright screen = dead battery
  54. 54. email mobile version web site Ditch the ‘mobile version’ Why the extra click?
  55. 55. What to know about: iPhone ➡ 26% market share ➡ Automatically scales messages 
 to fit the screen ➡ Excellent support for CSS3 and media queries ➡ Images on by default ➡ Resizes fonts under 13px
  56. 56. What to know about: BlackBerry ➡ 0.1% market share ➡ 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”
  57. 57. What to know about: Android ➡ 12% market share ➡ Blocks images by default ➡ Supports ALT text ➡ Mixed support for media queries ➡ Various screen sizes and sometimes automatic scaling ➡ Primary content focus on le - hand side
  58. 58. What to know about: Android
  59. 59. What to know about: Windows Phone ➡ 0.17% market share ➡Mixed media query support ➡ Inconsistent font display ➡ Blocks images ➡ No ALT text
  60. 60. Device ≠ email client
  61. 61. Device ≠ email client Email is an application and occasionally a mobile browser
  62. 62. Wide variety of ways to access email Rendering is inconsistent across devices and operating systems
  63. 63. Testing is crucial #KISSwebinar
  64. 64. Testing is crucial #KISSwebinar
  65. 65. Resources! lit.ms/KISSresources www.responsiveemailresources.com
  66. 66. 14-DAY TRIAL KISSMOBILE LITMUS.COM/GIFTCARD
  67. 67. 1 Know your audience 2 Design for ‘one thumb’ and 
 ‘one eyeball’ 3 Tap your way to success -TAKEAWAYS - 4 Rendering is tied to app, not device
  68. 68. Questions? I (may) have answers.
  69. 69. Thanks! Thanks! justine@litmus.com / @meladorri
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×