3 Strategies For Awesome Mobile-Optimized Emails
51 likes•15,175 views
The document presents strategies for creating effective mobile-optimized emails, emphasizing the importance of understanding the mobile landscape with over 51% of emails opened on mobile devices. It outlines three main approaches: mobile-first design, fluid layout, and responsive design, each with specific types of optimizations for mobile viewing. Key takeaways include the significance of user experience, simple interfaces, and the necessity for thorough testing across various devices and email clients.
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
- 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
- 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
- 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
- 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.