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.

Fundamentals of Mobile-Friendly Emails

Presentation from the 2013 MarketingSherpa Email Summit Roundtable discussion, "Mobile Email Design: 5 Fundamentals of Mobile-Friendly Emails."

With more than one-third of emails being opened on smartphones and tablets, designing emails for mobile is crucial. In this presentation, Justine discusses the topic of mobile-friendly emails, including:

• The fundamentals of what makes an email mobile-friendly
• Different strategies for approaching mobile emails
• Quick wins that you can implementing changes to your program right away
• Myths, rumors and things to avoid

  • Login to see the comments

Fundamentals of Mobile-Friendly Emails

  1. 1. MOBILE EMAIL DESIGN
  2. 2. Mobile opens up 120% in 18 months
  3. 3. 42% of email opens are on a mobile device in 2014! Desktop 33% Webmail 25% Mobile 42% iPhone: 25% iPad: 12% iOS: 37% Android: 8%
  4. 4. iOS and Android dominate opens on mobile iPhone 56% Android 16% iPad 27% Other 1%
  5. 5. Mobile trends don’t stop there. Learn about recent increases. CHECK IT OUT Updated data surrounding mobile trends is available in our 2015 industry report.
  6. 6. Strategies for tackling mobile… 1. Do nothing 2. Mobile text version 3. Mobile aware 4. Skinny template 5. Fluid layout 6. Responsive design SIMPLE COMPLEX
  7. 7. Mobile aware Creating email designs that consider the mobile experience but aren’t specially constructed for it. Best when you want to increase mobile usability without making radical changes or specializing. • Single column primary content • Big images • Big text • Big buttons
  8. 8. One column primary content, and easy to press buttons. Visual style works well on mobile without special setup.
  9. 9. Fluid layout Email width that adapts to screens both large and small. Best used in situations where the structure is basic, readability is key, and scaling would destroy usability. • Use percentages for widths • Most effective for simple layouts • Heavy reliance on text content
  10. 10. ~740 pixels ~320 pixels Email width scales rather than text size, ensuring readability in any environment.
  11. 11. Test email designs on iPhone and android mobile devices. RUN A QUICK TEST Guarantee your emails look great in every inboxes.
  12. 12. Responsive design Using CSS3 @media queries to detect screen size, and display specific content or elements in different types of viewing environments. The most advanced way to deliver a specialized mobile email experience. • Detects large vs. small screen size • Rolls back to standard version when @media isn’t supported • Hide or remove content on small screens
  13. 13. Learn more about responsive design —combat rendering differences. CHECK OUT OUR GUIDE
  14. 14. QUICK WINS
  15. 15. The finger is the new mouse Design for tappable touch targets; not text links 44 x 44px minimum
  16. 16. Text Buttons Image “Buttons” Create touch targets
  17. 17. Bigger fonts are better • Body copy < 13px will be resized • Recommended minimums • Body copy: 14px • Headlines: 22px • CSS fix: “-webkit-text-size-adjust: none;” Beware minimum font sizes; automatic resizing
  18. 18. Bigger fonts are better
  19. 19. Streamline, be aware Single column layout = simplified content • Short, direct copy • Eliminate or hide low priority content • Links • Copy • Images • Clear and direct calls to action • Make it obvious
  20. 20. Preview pane still counts!
  21. 21. The iPhone 6 + 6 Plus demands attention be paid to Preview panes. FIND OUT MORE With a larger screen, the iPhone 6 requires changes to media queries, preview text, and more.
  22. 22. THINGS TO SKIP
  23. 23. Lots of links create friction Don’t give users a reason NOT to click by making text or other calls-to-action impossible to tap.
  24. 24. email web sitemobile version The “mobile” version
  25. 25. You can’t predict where users will open! Mobile versioning Distinctions between environments – mobile and desktop – drive behavior more than distinctions between email clients. Focus on viewing environment rather than specific devices or email clients. iPhone Version Android Version
  26. 26. Resources stylecampaign.com/blog campaignmonitor.com/blog litmus.com/blog exacttarget.com/sff mobileawesomeness.com cssiphone.com androidpatterns.com mobilepatterns.com mediaqueri.es
  27. 27. 53% of opens occurred on mobile devices in 2014. Ensure your emails are mobile friendly. GET MOBILE FRIENDLY

×