3 Strategies For Awesome Mobile-Optimized Emails

11,880 views
10,911 views

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
51 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
11,880
On SlideShare
0
From Embeds
0
Number of Embeds
1,499
Actions
Shares
0
Downloads
191
Comments
1
Likes
51
Embeds 0
No embeds

No notes for slide

3 Strategies For Awesome Mobile-Optimized Emails

  1. 3 Strategies for Awesome Mobile-Optimized Emails January 30th 2014
  2. Who Am I? Justine Jordan Marketing Director, Litmus
  3. @meladorri @litmusapp #KISSwebinar Join us on Twi er
  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. WATCH THIS WEBINAR RECORDING NOW
  6. Got Screens? image credit: helpmyhelpdesk.com
  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. 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. 400% mobile opens have increased since 2011 #KISSwebinar
  10. Top Email Clients ! #1 – iPhone #2 – Outlook #3 – Android #4 – iPad source: emailclientmarketshare.com
  11. There’s a few options out there… LargeMediumSmall
  12. The unifying characteristic?
 TOUCH.
  13. 31% of marketers don’t know their mobile email open rate source: marketingsherpa.com
  14. Your mileage may vary #KISSwebinar Litmus = 15%MapMyRun = 70%+
  15. It’s as easy as 1, 2, 3… Copy, paste, send!
  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. 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. 3% reopen on another client 97% view in a single environment Mobile Triage Myth
  19. The mobile email experience ??? From Name Subject Line Preheader Preview/Open Tap Page/Site #KISSwebinar
  20. From and subject are front and center ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
  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. ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name From and subject are front and center
  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. ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name Preheader = tertiary inbox content
  25. Good vs. bad preheaders ✔ ✔ ✔ ✘ ✘ ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
  26. Each phone and app is different ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
  27. But be aware of the viewport ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name Long subject lines push content down in the viewport
  28. #EmbraceTheScroll ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
  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. ???Page/SiteTap/ClickPreview/OpenPreheaderSubject Line I like big bu ons… From Name #KISSwebinar
  31. Reduce friction
  32. ???Page/SiteTap/ClickPreview/OpenPreheaderSubject Line Don’t forget the landing page From Name NO: interstitials horrible forms Flash
  33. ???Page/SiteTap/ClickPreview/OpenPreheaderSubject Line Don’t forget the landing page From Name YES: Easy to use Finger friendly
  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. LOG IN WITH GOOGLE Start Your Free KISSmetrics Trail
  36. strategy #1 mobile first ! aka agnostic, aware, scalable
  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. Strategy #1: Mobile first
  39. strategy #2 fluid
  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. Strategy #2: Fluid ! ➡ Shorter learning curve ➡ Best for text-heavy emails
  42. strategy #3 responsive
  43. Strategy #3: Responsive
  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. 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. 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. 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. Email is a unique medium with unique considerations
  49. Click is now tap The finger is the new mouse
  50. Your fingers are fat image: webdesignerdepot.com
  51. Bigger is be er ➡ Body copy: 16px+ ➡ Headlines: 22px+ ➡ Bu ons: 44px by 44px ➡ Space: 10px+ ➡ Tappable touch targets
  52. Beware small font sizes -webkit-text-size-adjust: none;
  53. Dial up the contrast Bright screen = dead battery
  54. email mobile version web site Ditch the ‘mobile version’ Why the extra click?
  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. 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. 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. What to know about: Android
  59. What to know about: Windows Phone ➡ 0.17% market share ➡Mixed media query support ➡ Inconsistent font display ➡ Blocks images ➡ No ALT text
  60. Device ≠ email client
  61. Device ≠ email client Email is an application and occasionally a mobile browser
  62. Wide variety of ways to access email Rendering is inconsistent across devices and operating systems
  63. Testing is crucial #KISSwebinar
  64. Testing is crucial #KISSwebinar
  65. Resources! lit.ms/KISSresources www.responsiveemailresources.com
  66. 14-DAY TRIAL KISSMOBILE LITMUS.COM/GIFTCARD
  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. Questions? I (may) have answers.
  69. Thanks! Thanks! justine@litmus.com / @meladorri

×