(UK Version) Email Design Approaches That Work for All Devices

4,660 views
4,497 views

Published on

Published in: Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,660
On SlideShare
0
From Embeds
0
Number of Embeds
1,361
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • Stats and figuresNo best practices!! No silver bullet!! OMG!!How different smart phones handle HTML email (examples)Start with a plan: Design and content strategy – it’s always mattered but it REALLY matters nowOptions for mobile email (text version, dedicated, scalable, css @media) (examples)Scalable layouts – can responsive web design make the leap to email? What’s the future hold? We don’t know, but we can speculate.
  • Smartphone vendors shipped a total of 99.6 million units in 1Q11, nearly double from the 55.4 million units in the first quarter of 2010.Mobile web browsing is dominated by devices that are web-friendly
  • Now it’s time to start figuring out how/when YOUR subscribers are using mobile email. Instead of guessing if mobile should be an important focus for your business, instead of guessing which devices your audience is using for mobile communication – find out with real, hard data. Tools for doing so – web analytics, litmus, pv, returnpathpercentmobile.com
  • Key questions to consider when you are looking at developing a mobile strategy. Audience size – This is a business decision that is going to be unique to everyone. List size also comes into consideration – 5% of 3 million subscribers Do you include a “view on mobile device” link in emails? If so, how many people are consistently clicking this? Does it represent a large enough population?Talk about the decision framework What are the inputs for you to consider making a decision about your mobile plight?Audience, goals, content, etc.Hypothetical use cases for “if you fit xyz profile, try this...”Do I create a separate mobile version?Do I include a view on mobile link?
  • Snapshot of the challenges and diversity of devicesNokia Remote Device Access is a great way to experience Symbian first hand.
  • Snapshot of the challenges and diversity of devicesNokia Remote Device Access is a great way to experience Symbian first hand.
  • Snapshot of the challenges and diversity of devicesNokia Remote Device Access is a great way to experience Symbian first hand.
  • “Other” inbox does not show up on Android app
  • (UK Version) Email Design Approaches That Work for All Devices

    1. 1. Successful Email Design Approaches That Work For All Devices<br />Justine Jordan | Litmus | @meladorri<br />#SPOP11<br />
    2. 2. Successful Email Design Approaches That Work For All Devices<br />
    3. 3. Introductions…<br />Justine Jordan Marketing Director, Litmus<br />justine@litmus.com | @meladorri<br />Presentation available at www.slideshare.net/litmusapp<br />
    4. 4. Email is moving beyond the desktop<br />Subscribers are viewing emails in a diverse ecosystem of webmail, desktop, mobile and social contexts.<br />Today we’ll talk about:<br />Current status and predictions for the future<br />Options for mobile email<br />Best practices in mobile email design<br />Agenda<br />
    5. 5. 9.29%<br />OF OPENS ARE ON A MOBILE DEVICE<br />2-15% on individual campaigns<br />30%+ for niche audiences<br />Source: Litmus Email Analytics, March 2011<br />
    6. 6. Mobile Opens by OS<br />iPhone accounts for 85.95%of iOSopens; iPad for 14.05% <br />Source: Litmus Email Analytics, March 2011<br />
    7. 7. Top Ten Email Clients by Opens<br />Source: Litmus Email Analytics, March 2011<br />
    8. 8. Your mileage may vary…<br />Source: Email Analytics for Litmus Newsletter, February 2011<br />
    9. 9. Smartphone OS Share Predictions<br />Source: IDC Worldwide Quarterly Mobile Phone Tracker, March 29, 2011<br />
    10. 10. Do you have a mobile audience?<br />Web analytics, user agent detection, surveys and preference centers can help you decide.<br />
    11. 11. The analytics make a case<br />User agent detection<br />Web analytics<br />Clicks on mobile link<br />Existing mobile site/app<br />Existing SMS program<br />Transactional emails for “on the go” situations<br />In-store coupons<br />Mobile purchases<br />Travel updates<br />Urgent communications<br />Making the mobile email choice<br />
    12. 12. Display and Support Challenges<br />There are no mobile email standards!<br />*HTML or images enabled by default<br />◐ Blackberry HTML email may be enabled, but is not on by default in 4.5/5. The ability to download images automatically is an option. Blackberry 6 has webkit support and displays HTML email by default, but a prompt appears to download external images<br />‡ inconsistent wrapping and scaling of text<br />
    13. 13. Display and Support Challenges<br />Android alt text<br />Symbian images off<br />Symbian images on<br />
    14. 14. Display and Support Challenges<br />WinMo Preview<br />WinMo images off<br />WinMo images on<br />
    15. 15. Link to a “mobile-friendly” text version<br />Usually a modified plain text version<br />Often the first step in a testing phase<br />Requires an extra click<br />No longer truly mobile friendly<br />Link to mobile-specific version<br />Requires extra resources (more design/production time)<br />Requires an extra click<br />CSS @media queries and scalable layouts<br />No extra click<br />Suitable for newer phones with HTML capability<br />May require more advanced coding know-how<br />Mobile Email Options<br />
    16. 16. Link to “mobile friendly” text version<br />Why the extra click??<br />web site<br />mobile version<br />email<br />
    17. 17. Link to “mobile friendly” text version<br />Mobile “friendly”??<br />
    18. 18. Link to mobile-optimised version<br />
    19. 19. Scalable design<br />
    20. 20. Scalable design elements<br /><ul><li>Single column
    21. 21. Larger fonts
    22. 22. Finger-sized targets</li></li></ul><li>Mobile optimised using CSS @media<br />
    23. 23. Consider context & subscriber experience<br />
    24. 24. Consider context & subscriber experience<br />Nice touch!<br />Direct to mobile site<br />
    25. 25. Consider context & subscriber experience<br />
    26. 26. Facebook Messages<br />FBM viewed on the iPhone app have functioning links and better HTML support.<br />“Other” inbox does not appear in Android or WinMo app<br />
    27. 27. Facebook Messages: Another “Device”?<br />Use caution with divider lines<br />FBM may cut off footers, <br />unsubscribe information<br />
    28. 28. Monitor for @facebook.comaddresses<br />Messages are grouped together by from name (i.e. info@acme.com)<br />No subject lines<br />Commercial email goes in the “other” folder<br />Text Version Tips<br />Drop navigation bar and submessages<br />Place the most important message first<br />Line length < 60 characters to avoid undesirable line breaks<br />Use capitalisation, line breaks, dashed lines and other devices to visually separate different messages. <br />Facebook Messages<br />
    29. 29. “Best Practices” in Mobile Email<br />“Methods and techniques that have consistently shown results superior than those achieved with other means, and which are used as benchmarks to strive for. There is, however, no practice that is best for everyone or in every situation, and no best practice remains best for very longas people keep on finding better ways of doing things.”<br /> - BusinessDictionary.com<br />“The idea is that with proper processes, checks, and testing, a desired outcome can be delivered more effectively with fewer problems and unforeseen complications.”<br />- Wikipedia<br />
    30. 30. “Best Practices” in Mobile Email<br />Single column design<br />Large(r) fonts<br />Pressable buttons & “thumb navigation”<br />Short, direct content<br />Clear + direct calls to action<br />Eliminate or hide low priority content<br />Remember subscriber experience & context is key<br />Design for mobile first!<br />
    31. 31. Beware text resizing<br />
    32. 32. Beware text resizing<br />After (Android)<br />Before (Android)<br />Plan for font sizes to auto-adjust (13px minimum on iOS)<br />Use CSS “-webkit-text-size-adjust: none” for iPhone and Android, possibly BlackBerry 6<br />
    33. 33. Elevate the Content People Care About<br />Think Top Down<br />Brand Appropriately<br />Use UI Elements Consistently<br />Make Targets Fingertip-Size<br />Read the User Experience Guidelines<br />http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design<br />
    34. 34. 44px ~ 0.3”<br />iOS as Inspiration<br />
    35. 35. iOS as Inspiration<br />
    36. 36. Outlook, Gmail, iPhone and WinMo pulls in the preheader or first few lines of text in the email as a “snippet” or AutoPreview<br />Maximise subject line (35 characters), preview text (90 characters)<br />Leverage this feature to extend your message:<br /><ul><li>Time-sensitive deadlines
    37. 37. Important announcements
    38. 38. Another way to reinforce your call-to-action
    39. 39. Secondary subject line</li></ul>Add Preview Text!<br />
    40. 40. Are mobile users more engaged?<br />“Killing time is a killer app for mobile use.”<br />-Nielsen Norman Group Email Newsletter Usability, 4th Edition<br />Read (>7 seconds)<br />Skim Read (2-7 seconds)<br />Glance/Delete (<2 seconds)<br />Source: Litmus Email Analytics, March 2011<br />
    41. 41. Don’t panic! Mobile is changing fast, but it’s easier than you think<br />Discovery is an accomplishment!<br />Look for the mobile use case, use resources wisely<br />HTML is well supported, but images are often blocked<br />Ditch the plain text “mobile friendly” version <br />Adapt to a single column design with touch-friendly elements<br />Optimise text versions for Facebook messages<br />Get inspired by your mobile OS, apps, site<br />Readability, experience and context is key<br />Let analytics and data be your optimisation guide<br />Top Ten Takeaways<br />
    42. 42. Get in touch!<br />Justine Jordan Marketing Director, Litmus<br />justine@litmus.com | @meladorri<br />Presentation available at www.slideshare.net/litmusapp<br />

    ×