Ad:Tech NYC - Mobile-Friendly Email Design

1,771 views

Published on

Mobile email design slides from Justine Jordan's portion of "Email Marketing: Reaching Customers on the Mobile Front" presented on Nov. 9th, 2011 at Ad:Tech NYC.

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

No Downloads
Views
Total views
1,771
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • If you have a nicely optimized website, why bother with the extra click to the sub-optimal “mobile version”? Instead link directly to the mobile site from the preheader, or link to a page on the mobile site. Unless you have a signficant audience of older BlackBerry users, this text-heavy “mobile version” isn’t doing you any favors.
  • Ad:Tech NYC - Mobile-Friendly Email Design

    1. 1. EMAIL MARKETING Reaching Customers on the Mobile Front Designing Mobile-Friendly Emails Justine Jordan Marketing Director, Litmus @meladorri | @litmusapp
    2. 2. Designing Mobile-Friendly Emails <ul><li>Is all about… </li></ul><ul><li>Knowing your audience. </li></ul><ul><li>Optimizing content & design for context. </li></ul><ul><li>Creating usable and beautiful experiences in both mobile & desktop environments. </li></ul>
    3. 3. Knowing Your Audience http://litmus.com/blog/email-client-market-share-infograph
    4. 4. Mobile Opens by Platform <ul><li>Majority of mobile opens in Android, iOS (iPad + iPhone) </li></ul>http://litmus.com/blog/email-client-market-share-infograph
    5. 5. DOs and DON’Ts
    6. 6. DO: Consider Context <ul><li>People check email… </li></ul><ul><li>In bed </li></ul><ul><li>At the gym </li></ul><ul><li>In the bathroom </li></ul><ul><li>While intoxicated </li></ul><ul><li>During exercise </li></ul><ul><li>To kill time </li></ul>
    7. 7. DO: Bigger is Better <ul><li>Body copy < 13px will be resized </li></ul><ul><li>Recommended minimums </li></ul><ul><ul><li>Body copy: 14px </li></ul></ul><ul><ul><li>Headlines: 22px </li></ul></ul><ul><li>CSS fix: “-webkit-text-size-adjust: none;” </li></ul>Beware minimum font sizes; automatic resizing
    8. 8. DO: Bigger is Better Beware minimum font sizes; automatic resizing
    9. 9. DO: Touch Targets The finger is the new mouse Design for tappable touch targets; not text links 44 x 44px minimum
    10. 10. DO: Touch Targets Text Buttons Image “Buttons”
    11. 11. DO: Streamline <ul><li>Get skinny: 320-550px wide </li></ul><ul><li>Short, direct copy </li></ul><ul><li>Eliminate or hide low priority content </li></ul><ul><ul><li>Links </li></ul></ul><ul><ul><li>Copy </li></ul></ul><ul><ul><li>Images </li></ul></ul><ul><li>Clear and direct calls to action </li></ul><ul><ul><li>Make it obvious </li></ul></ul>Single column layout; simplified content
    12. 12. DO: Streamline
    13. 13. DON’T: Create friction
    14. 14. DON’T: “ View on Mobile ” Link Why the extra click? email web site mobile version
    15. 15. ADVANCED: Use Media Queries
    16. 16. ADVANCED: Use Media Queries
    17. 17. ADVANCED: Use Media Queries campaignmonitor.com/blog stylecampaign.com/blog
    18. 18. INSPIRATION: Apps + sites Site: Yes Email: No
    19. 19. More examples… DO DON’T
    20. 20. More examples…
    21. 21. Your Takeaways <ul><li>Know your audience. Discovery is an accomplishment! </li></ul><ul><li>Quick wins: </li></ul><ul><ul><li>Bigger text </li></ul></ul><ul><ul><li>Touch targets (big buttons) </li></ul></ul><ul><ul><li>Streamline content </li></ul></ul><ul><ul><li>Ditch the plain text “mobile friendly” version (or test it) </li></ul></ul><ul><ul><li>Explore media queries </li></ul></ul>

    ×