Strategies, Tactics and Design Tips for Mobile Email Success

2,442 views
2,290 views

Published on

It’s probably a safe bet that the percentage of your subscribers opening your emails on mobile devices is growing — and quite rapidly. Email marketers must account for the fact that we live in an always-connected world, where consumers are using their smartphones to manage their inbox while on the go. Ensure your emails don’t get lost in the mobile shuffle by getting the information you need to optimize your email program for its growing mobile subscriber base.

Topics discussed include how to identify your mobile audience, how to design your emails for optimum user experience across a variety of mobile devices, tips for increasing subscriber engagement with mobile-friendly content, and much more!

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,442
On SlideShare
0
From Embeds
0
Number of Embeds
94
Actions
Shares
0
Downloads
40
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • One-handed use seems to be highly correlated with users’ simultaneously performing other tasks. Many of those using one hand to hold their phone were carrying out other tasks such as carrying bags, steadying themselves when in transit, climbing stairs, opening doors, holding babies, and so on. Left handedness in the general population: 10%
  • Strategies, Tactics and Design Tips for Mobile Email Success

    1. 1. Strategies, Tactics + Design Tips for Mobile Email Success
    2. 2. Justine Jordan Content, research, marketing @meladorri @litmusapp Quick Introduction Justine has 7+ years of experience writing, designing and coding emails. Previously with ExactTarget. Litmus lets you preview/QA emails before you send and provides detailed post-send analytics.
    3. 3. Mobile Email: Why Mobile is big, but how big?
    4. 4. Email Opens: August 2013 Mobile: Smartphones (iPhone, Android) and tablets Desktop: Installed email programs (Outlook, Apple Mail) Webmail: Email accessed through a web browser (Gmail, Hotmail, Yahoo!) Desktop 32% Webmail 21% Mobile 47% Source: Litmus Email Analytics
    5. 5. 0% 10% 20% 30% 40% 50% 60% Desktop Webmail Mobile 45% 33% 10% Email Opens: 2011-now Source: Litmus Email Analytics
    6. 6. 0% 10% 20% 30% 40% 50% 60% Desktop Webmail Mobile 45% 33% 10% Email Opens: 2011-now Source: Litmus Email Analytics +350%
    7. 7. some of our major retail brands are seeing 60% of their subscribers viewing on a mobile device —Cara Olson, DEG “ ”
    8. 8. Brand/Industry A: 55% Brand/Industry B: 18% Plan on data, not your gut
    9. 9. Know Your Audience Copy, paste & send
    10. 10. Small Medium Large iPhone 2.3” wide Galaxy Note II 3.2” wide Nexus 7 7.3” wide BB Bold 2.6” wide iPad Mini 5.3” wide Excite 13 8.5” wide Screensize-apalooza
    11. 11. The unifying characteristic? TOUCH.
    12. 12. Experience Matters It’s more than just metrics
    13. 13. One Chance to Make an Impression 80.30% 30.20% 13.50% 3.80% 6.30% Delete it Unsubscribe View on computer Don't know Read anyway BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013 Neutral 24.60% Slightly Negative 51.30% Strongly Negative 24.10% How does a poorly designed email affect your perception of the brand? If you get a mobile email that doesn’t look good, what do you do? +15% +68%
    14. 14. Mobile Triage Myth 3% reopen on another client 97% view in a single environment
    15. 15. Consider the experience • The mobile experience is different than the desktop experience • Landing pages are part of that experience ???? Page/Site Tap Preview/Open Preheader Subject Line From Name
    16. 16. From name and subject line are front and center
    17. 17. Focus on „from name‟ and subject line From Name ~25 characters Subject Line ~35 characters Preheader ~85 characters 17
    18. 18. Preheaders Are Tertiary Inbox Content
    19. 19. iPhone Windows Phone Blackberry
    20. 20. iPhone Windows Phone Blackberry
    21. 21. Inconsistent rendering across devices and operating systems
    22. 22. iPhone: Scales to width; 320 x 460 Android: No scaling; dimensions vary; top-left corner displayed Inconsistent rendering across devices and operating systems
    23. 23. 15% two handed 49% one handed 36% cradled http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php 67% used right thumb on the screen 33% used left thumb on the screen Provide click/tap opportunities
    24. 24. Prioritize and focus • Identify the top 3-5 activities – Purchase? – Download? – Registration? – Social?
    25. 25. NO: interstitial boxes NO: impossible form fields
    26. 26. YES: easy to navigate YES: finger friendly
    27. 27. Mobile Design Principles aka ‘best practices’
    28. 28. Preheader Practices • Support the subject line with a creative, useful or helpful preheader. – Call-to-action – Special offer – Reminder – Clickable/measurable – NOT “having trouble…?”
    29. 29. Bigger is Better • Body copy: 16px+ • Headlines: 22px+ • Buttons: 44px by 44px • Space: 10px+
    30. 30. • Tappable touch targets • Bulletproof buttons that don’t rely on an image • Left-hand side
    31. 31. Say no to link clusters and yes to white space
    32. 32. Device targeting can display app/OS specific content
    33. 33. Dial up the contrast Bright screens kill batteries
    34. 34. Test, test, test!
    35. 35. Strategies & Approaches how-to
    36. 36. As with most things with email, there‟s not a one- size-fits-all approach (sorry to disappoint you)
    37. 37. Mobile First Considers the mobile user as a priority |-------------------460px -------------------| |---------------------600px ---------------------|
    38. 38. Mobile First / Friendly • One layout for all screen sizes • Single column design – 320-500px • Large text & buttons • Generous white space • Clear calls to action • Short, concise body copy Agnostic / Aware / Scalable
    39. 39. Pros • Prioritizes important data, content, actions • Easier execution • No reliance on media query support • Good rendering in apps and native clients Cons • Desktop can suffer • Less real estate • Can get long • Fixed width can be less than ideal for Android Mobile First / Friendly BEST FOR: Ready for change, testing the waters, or resource strapped
    40. 40. Fluid Email width changes to fit within the window |--------------------------------------------------------1166px---------------------------------------------------| |-----------------------------525px --------------------------|
    41. 41. Fluid layout • Percentage- based widths • Adapts to fill the screen it’s viewed on; text wraps automatically
    42. 42. Fluid layout BEST FOR: Simple layouts, automated emails, mostly text/few images Pros • Simple execution • No learning curve or reliance on media queries Cons • Fewer design choices • Very narrow or very wide emails can get awkward and hard to read
    43. 43. Responsive Design Uses media queries to detect screen size and alter content accordingly |-----------320px ------------||--------------------------------------------700px------------------------------------------ |
    44. 44. Responsive Design • 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
    45. 45. Pros • Restyle, resize or reorder elements • Ability to hide/show desktop or mobile specific images/content • Customized calls to action • Seamless experience across a range of screen sizes Cons • Coding learning curve • Forces tough choices • Increased production and QA time Responsive Design BEST FOR: Growing mobile audiences, travel alerts, tech companies
    46. 46. Email is an *application*
    47. 47. Device ≠ email client Email is an *application*
    48. 48. 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 @media support http://stylecampaign.com/blog/2012/10/responsive-email-support/ 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
    49. 49. • Rewards Network: CTR increased by more than 25% • Deckers: 10% increase in CTR; 9% increase in mobile opens • Crocs: 7.66% lift in CTOR; 15.63% lift in iPhone ‘read’ engagement; 8.82% lift in mobile ‘read’ engagement • SavvyMom: 3x lift in CTOR. 12% of those who opened on mobile clicked vs. 6% who opened on desktop More coming all the time: litmus.com/blog Responsive Results
    50. 50. Responsive isn‟t always the answer 1. Resources 2. Data 3. Company type 4. User expectations Company A 1. Resources: coders, designers, writer 2. Data: 55% mobile 3. Company type: Tech 4. User expectations: B2B Tech audience Responsive Company B 1. Resources: marketing manager, intern 2. Data: 18% mobile 3. Company type: Non-Profit/Education 4. User expectations: low sophistication Aware
    51. 51. Android Observations • Blocks images by default; supports ALT text • Two apps with opposing support for media queries • Primary content focus on left- hand side • Various screen sizes and sometimes automatic scaling
    52. 52. Blackberry Observations • 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”
    53. 53. Windows Phone Observations • Mixed media query support • Does weird things to fonts • Blocks images; no ALT text • No one has them!
    54. 54. iPhone Observations • Automatically scales messages to fit the screen • Excellent support for CSS3 and media queries • Images on by default • Resizes fonts under 13px
    55. 55. Resources info + tools
    56. 56. http://stylecampaign.com/blog/2013/03/responsive-email-design-red/ Style Campaign RED Webinar
    57. 57. Market Share Stats http://emailclientmarketshare.com
    58. 58. www.litmus.com/blog Infographics, webinars, articles
    59. 59. Antwort: Responsive Layouts for Email http://internations.github.io/antwort/
    60. 60. Responsive Email Patterns http://briangraves.github.io/ResponsiveEmailPatterns/
    61. 61. Responsive Email Tutorial http://www.netmagazine.com/tutorials/build-responsive-emails
    62. 62. Campaign Monitor RED Guide http://www.campaignmonitor.com/gu ides/mobile/
    63. 63. Resources stylecampaign.com/blog campaignmonitor.com/blog mailchimp.com/blog emaildesignreview.com mobileawesomeness.com mediaqueri.es Media Post Email Insider columns A List Apart / A Book Apart Ethan Marcotte Luke Wroblewski Twitter community https://litmus.com/blog/our-favorite-responsive-and-mobile-email-resources
    64. 64. THANKS! @meladorri justine@litmus.com questions?

    ×