• Like

3 Strategies For Awesome Mobile-Optimized Emails

  • 8,894 views
Uploaded on

1 The crazy growth of mobile, 2 Knowing your audience, 3 Your subscribers on mobile, 4 Strategies …

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

More in: Marketing , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Confused with too many things to follow!
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
8,894
On Slideshare
0
From Embeds
0
Number of Embeds
11

Actions

Shares
Downloads
184
Comments
1
Likes
50

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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