Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile Email Marketing


Published on

Instructed by Karen Talavera.

  • Be the first to comment

Mobile Email Marketing

  1. 1. Mobile Email Marketing Strategy and Design Approaches for Small Screen Email Success Karen Talavera President Synchronicity Marketing
  2. 2. Today You Will Learn • The lay of the mobile landscape and how mobile device users interact with email • Design approaches and tips for mobile email rendering, visibility and usability • Considerations for increasing email conversion in the mobile environment
  3. 3. • President of Synchronicity Marketing • Nationally-known email marketing speaker, educator, coach and consultant • The industry’s premiere email marketing training instructor since 1999 • Member Email Experience Council (EEC), Florida DMA, Only Influencers • Top 100 Women in Ecommerce 2012 by Women in Ecommerce (WE) magazine • Passionate about yoga, Zumba, skiing and international travel About Me
  4. 4. Agenda • The Mobile Email Landscape • User Experience with Mobile Email • Mobile Email Design Mindset • Mobile Email Design Best Practices • The Path to Mobile Email Conversion
  5. 5. Point to Ponder • “Whenever teenage girls and corporate CEOs covet the same new technology, something elaborate is happening” – Michael Saylor, CEO of MicroStrategy and author of The Mobile Wave (2012)
  6. 6. THE MOBILE EMAIL LANDSCAPE • It just keeps growing! • Over 50% of all commercial email now opened on mobile devices (as of Nov 2013) – Return Path • “The number of mobile email users is predicted to grow 28% in 2014 and 23% in 2015” - The Radicati Group Source: Inbox Marketer,
  7. 7. Worldwide Smartphone Penetration • Ericsson forecasts 4.5 billion smartphone subscriptions worldwide by 2018 – Smart phones now make up over 56% of all mobile phones in the US (Google) – United States ranks 13th worldwide in smart phone penetration
  8. 8. Mobile Internet Subscriptions Rise • It’s not just smartphones that are connected, but also tablets and mobile- PCs – Mobile broadband will enable fast access and interaction with graphic- rich sites and email
  9. 9. Mobile device landscape • Q3 2013 Smartphone Platform Market Share comScore Reports July 2013 U.S. Smartphone Subscriber Market Share: _Smartphone_Subscriber_Market_Share Android Apple Blackberry Microsoft Symbian (52.0% ) (39.2%) ( 5.1%) ( 3.0%) (0.5%)
  10. 10. Mobile Device Landscape • Email Client Market Share Litmus blog, Apple iPhone Outlook Apple iPad Google Android Apple Mail Yahoo! Mail Gmail Windows Live Mail Windows Mail (25%) (17%) (12%) (9%) (9%) (6%) (6%) (3%) (3%)
  11. 11. Implications • In the next few years, at least 75% of the world population will have mobile Internet access • The mobile device will be (in many places in the world it already is) the sole computer connected to the Internet • Most activities possible on a laptop or desktop will be possible from a mobile device if they aren’t already • Multiple marketing and messaging channels exist in the mobile context, and some (like SMS) are unique to mobile devices
  12. 12. USER EXPERIENCE WITH EMAIL: MOBILE VS. DESKTOP Consideration Desktop Mobile Avg. screen size 600 pixels 320 pixels User interface Mouse/click Finger/tap Avg. connection speed 8.6Mbps 2.6Mbps Viewing environment Desk/lap Anywhere Avg. Connection Speed Source: • The basic differences in medium are size • How an email is viewed, i.e. on what device, is paramount to its success Portrait
  13. 13. Email Receiving Environments 15 Years Ago 7 Years Ago Today
  14. 14. How They See Your Carefully Crafted Messages • Fully opened on desktop/laptop 14
  15. 15. How They See Your Carefully Crafted Messages • In email client “preview pane” (horizontal)
  16. 16. How They See Your Carefully Crafted Messages • On tablet
  17. 17. How They See Your Carefully Crafted Messages • Smartphone
  18. 18. Wide range of viewports iPhone BB Bold 9000 Galaxy S4 Nexus 7 iPad Kindle Fire 8.9 320px 356px 360px 600px 768px 800px Tablets: iPad = A Nexus 7 = B Kindle Fire 8.9 = C iOS Android OS W = 320 px - Portrait H=450px-Portrait W = 360 px - Portrait H=499px-Portrait H=450px-Portrait C: W = 800 px - Portrait B: W = 600 px - Portrait A: W = 768 px - Portrait
  19. 19. User Experience: How Mobile Email Viewed From Line Subject Line Pre-Header Text Preview Pane / Headlines Scan Email CTA / Click Landing Page Open Email 1 2 3 4 5 6 7
  20. 20. Mobile Email User Behavior • More email is read mobile than on a desktop email client or via webmail. 55% of email is now opened on a mobile device Return Path and Litmus –”Email Analytics” (Dec 2013) • 90% of smartphone owners access the same email account on mobile and desktop. ExactTarget – “The 2012 channel preference survey” (2012) • Daily we spend 9 minutes on email via a mobile device, that is 7.6% of the total 119 minutes we use our phone per day O2 – “Mobile life report” UK (2013) • 43% of mobile email users check email four or more times per day - Merkle View from the Mobile Inbox (2011)
  21. 21. Industry Metrics Source: Marketing Profs, Email Viewership Preference by Industry Email Click-to-Open by Industry
  22. 22. MOBILE EMAIL DESIGN MINDSET • Best practices will make more sense if you understand media distinctions – Email is not the web • Everything that is possible on a web page isn’t possible in email • Don’t try to apply web design to email design • Different email platforms, clients and browsers affect the rendering of an email • If the design doesn’t consider if the email is to be responsive, it might not work at all • The solution: – Designers and Developers must work harmoniously with a common goal – Communication is vital to success You can drink java while coding, but you can’t use JavaScript in email. 1. Flash 2. JavaScript 3. Image Maps (In responsive) 4. HTML 5 (Except iOS)
  23. 23. Mobile Email Rendering Matters • 69% of consumers sort through email on a mobile device before reading on desktop • 70% of users will immediately delete an email that doesn’t render or they can’t see
  24. 24. Mobile Device Capabilities Native Email Client Support iOS Android 2.2+ Windows 8 Blackberry Preview text     Images displayed by default     ALT text     Styled ALT text     Auto-scale (width)     Media queries     Email App Support Gmail Yahoo! Preview text   Images displayed by default   ALT text   Styled ALT text   Auto-scale (width)   Media queries   Gmail Android App Scales!
  25. 25. Mobile Email Design Mindset Means • Methods of how to visualize mobile design • Mobile size parameters review • Choosing between two design approaches: – Mobile “Aware” aka “Mobile-Friendly” – Responsive Design
  26. 26. Mobile Inbox View • Approximate character limits – From line: 20 – Subject line: 35 – Preheader: 70 characters Preheader text is a user controlled setting showing none or up to 5 lines of HTML text in a given email client
  27. 27. Visualize the Grid • Think about mobile apps and how they look • This Pinterest example is a two- column grid format • Think about a grid when designing for a modular approach PRIMARY Secondary TERTIARY PREHEADER FOOTER TERTIARY HEADER Secondary NAV NAV NAV NAV
  28. 28. Visualize the Grid • This Starwood Preferred Guest email shows a single column grid structure • Notice it’s easy to read and all sections are fat- finger friendly
  29. 29. Relevancy matters Mobile Aware Means: • Mobile email requires a strong communication hierarchy and visual framework • Give your subscribers reasons to open, engage and convert.
  30. 30. Mobile-Friendly Layout • Fixed width between 480-520 pixels • Define a communication hierarchy prioritizing important content at the top and less important at the bottom • Primary messaging should fall within the viewport or the first 320 X 300 pixels PRIMARY Secondary TERTIARY PREHEADER FOOTER TERTIARY HEADER Secondary NAV NAV NAV NAV
  31. 31. Responsive Design • An email design approach (as an outgrowth of web design) that relies on media queries to sense the type of device on which email is being used and optimize display for that device • Use of media queries requires using CSS3 (Cascading Style Sheets 3) in HTML • The most resource-intensive approach to making email mobile-adaptive
  32. 32. Responsive Design Accommodates all Shapes and Sizes • Proposed responsive thresholds:  Desktop: 600 pixels  Tablet: 520 pixels  iOS Phone: 320 pixels / Android Phone: 380 pixels • Simplify or Hide navigation elements • Remove content based on communication hierarchy • Responsive layouts tend to be longer and narrower  Allows for easy scrolling  Clicks tend to be at the top and the bottom
  33. 33. Responsive Layout Patterns Pattern 1: Shrink Wrap •Msg width shrinks •Text scales up •Text reflows •Elements scale Pattern 3: Layout Shifter Pattern 2: Column Drop •Multi to single columns •Multi column elements shrink •Single column elements retain size •Layout reshapes to drop, hide or add alternate content •Most significant content transitions •Nav may disappear
  34. 34. Advantages Disadvantages Single design that works across all email viewing environments Provides a one-size-fits-all mobile experience Does not require any media query support Slightly compromises most device experiences May require horizontal scrolling on some devices Mobile-Aware Design Approach Pros & Cons
  35. 35. Advantages Disadvantages Provides a custom mobile experience when @media support is present Not fully supported across all devices Consistent experience across a wide range of devices HTML coding requires a greater level of complexity Rearrange or hide specific content Incremental level of effort (LOE) and production needed: • Planning/Project Management: +10% • Design: +25% • Development: +50% • QA/QC: +100% Collapse content areas with a finger tap Responsive Design Approach Pros & Cons
  36. 36. MOBILE EMAIL: DESIGN BEST PRACTICES • Collaboration between designers and developers is essential – Email design plus development equals higher engagement –Mobile Design + Development has many specific considerations that must be heeded from both teams
  37. 37. Design with HTML in Mind • It’s boxy - for alignment, proportion, repeatability and predictability • Aware  Header/Footer: 1-4 columns  Body Columns: 1-2 columns • Responsive  Desktop: 1-4 columns  Mobile: 1-2 columns
  38. 38. It’s Like Tetris • Content needs to fit in a pattern that can be coded into HTML
  39. 39. • As the number of columns decrease and rows increase, content must become simpler  Without simplicity, content is muddled and impossible to read  Emphasize content that is truly vital Need vs “Nice to have” Designing To a Grid Can Still Look Good
  40. 40. Copy • Use web-safe fonts – Design with pixels and not points • Do not put copy over images as it creates graphical text vs. HTML text – It also increases file size and disrupts the balance ratio • iOS + Gmail Android App scales up or down – Be sure design can stretch and allow room for wrapping and/or shrinking SCALING & TEXT SIZE • 320/email width = scale factor • 320/600 = .53% • 12px font views as 6px when scaled Design Format Text Size Aware headlines 22+ pixels body copy 16+ pixels Responsive 12 + pixels min 16-18 pixels optimal body copy 18-32 pixels headlines
  41. 41. Buttons & Links • Buttons should be sized at a minimum 44x44 pixels per Apple guidelines, or 59 pixels diagonal for one-handed thumb users (phones only) • All buttons and text links should be spaced apart • All button CTA’s should render with images off – Alternative: use stylized alt tags • Include a CTA button or link in the preview pane • Establish a CTA hierarchy Redeem Now Learn More Contact Us>
  42. 42. Images, Color & Contrast • All text and HTML buttons should appear when images are blocked • Make images clickable where appropriate • Be sure to include ALT-tags with meaningful ALT-text behind images • Background color can help make content of the email stand out more and draw users down the message • Use contrast to ensure readability across brightness levels
  43. 43. File Size Matters • Gmail will truncate message at 102K of loaded code • iOS will truncate message at 15K HTML of loaded code when using cellular data • Download time is variable based on full file and connection speed File Size Connection Low Speed Load Time 245Kb Wi-Fi 8.6Mbps .2sec 4G LTE 5Mbps .40sec 4G 3Mbps .65sec 3G 600kbps 3.2sec
  44. 44. THE PATH TO MOBILE CONVERSION • Where do you really want them to go from within your mobile email? – Browser? (Not if your site is mobile-unfriendly) – App? – Phone? – In-store (location specific email)? • Any are valid choices. More and more, email conversion path links to mobile app
  45. 45. Mobile vs. Desktop Purchases Growing • Revenues generated via mobile grew 52% in 2013 compared with only 18% growth rate for desktop- generated purchases • Number of mobile orders jumped 58% to account for 18% of ALL orders generated by marketing email messages • Revenues per click on mobile marketing emails far exceeded those on desktop, at $7.14 vs. $3.26 Source: “Email Marketing Compass: The Subscriber Domain Edition”
  46. 46. Move The Needle
  47. 47. Review Your Commercial Emails for Mobile-Readiness • Test sending your recurring or continuity email programs (like newsletters) as well as your promotional email to addresses viewable across a variety of different devices – How do your messages look on different screen sizes? – How mobile-aware is your current design approach? – What needs to be fixed for true mobile-friendliness? – How can you modify CTAs for better mobile response?
  48. 48. Key Takeaways 1. More marketing email is now opened and read on mobile than stationary devices, and growing 2. Mobile-aware, if not fully mobile-optimized, email design is essential to subscriber engagement and conversion 3. Device screen size, usability and ergonomics all influence and change subscriber mobile vs. desktop-device email and purchase behavior 4. Mobile-friendly design requires a new mindset and proactive choices 5. There ARE design best practices you should follow to ensure mobile-visible, and mobile-aware email
  49. 49. Thank You! Learn more at