Justine Jordan (Litmus) and Jay Jhun (Engauge) discussed how email design is evolving as subscribers view increasingly view messages on their phones and other mobile devices.

1. Successful Email Design Approaches That Work For All Devices Justine Jordan | Litmus | @meladorriJay Jhun | Engauge | @emailrocks #SPOP11

2. Successful Email Design Approaches That Work For All Devices

3. Introductions… Justine Jordan Marketing Director, Litmus justine@litmus.com | @meladorri Jay JhunEmail Services Director, Engauge jjhun@engauge.com | @emailrocks Presentation available at www.slideshare.net/litmusapp

4. Email is moving beyond the desktop Subscribers are viewing emails in a diverse ecosystem of webmail, desktop, mobile and social contexts. Today we’ll talk about: Current status and predictions for the future Options for mobile email Best practices in mobile email design Agenda

5. 9.29% OF OPENS ARE ON A MOBILE DEVICE 2-15% on individual campaigns 30%+ for niche audiences Source: Litmus Email Analytics, March 2011

6. Mobile Opens by OS iPhone accounts for 85.95%of iOSopens; iPad for 14.05% Source: Litmus Email Analytics, March 2011

7. Top Ten Email Clients by Opens Source: Litmus Email Analytics, March 2011

8. Your mileage may vary… Source: Email Analytics for Litmus Newsletter, February 2011

9. Consumer preferences are changing Next desired operating system Source: The Nielsen Company, survey of U.S. mobile consumers

10. Smartphone OS Share Predictions Source: IDC Worldwide Quarterly Mobile Phone Tracker, March 29, 2011 Nielsen Stats Android: 37% iOS: 27% Blackberry at 22%

11. Do you have a mobile audience? Web analytics, user agent detection, surveys and preference centers can help you decide.

12. The analytics make a case User agent detection Web analytics Clicks on mobile link Existing mobile site/app Existing SMS program Transactional emails for “on the go” situations In-store coupons Mobile purchases Travel updates Urgent communications Making the mobile email choice

13. Display and Support Challenges There are no mobile email standards! *HTML or images enabled by default ◐ 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 ‡ inconsistent wrapping and scaling of text

14. Display and Support Challenges Android alt text Symbian images off Symbian images on

15. Display and Support Challenges WinMo Preview WinMo images off WinMo images on

16. Link to a “mobile-friendly” text version Usually a modified plain text version Often the first step in a testing phase Requires an extra click No longer truly mobile friendly Link to mobile-specific version Requires extra resources (more design/production time) Requires an extra click CSS @media queries and scalable layouts No extra click Suitable for newer phones with HTML capability May require more advanced coding know-how Mobile Email Options

17. Link to “mobile friendly” text version Why the extra click?? email web site mobile version

18. Link to “mobile friendly” text version Mobile “friendly”??

19. Consider context & subscriber experience email mobile version landing

20. Consider context & subscriber experience

21. More than just your plain text version Get to the point Larger fonts Basic HTML is OK Consider CAN-SPAM If you must…

22. Beware text resizing

23. Beware text resizing After (Android) Before (Android) Plan for font sizes to auto-adjust (13px minimum on iOS) Use CSS “-webkit-text-size-adjust: none” for iPhone and Android, possibly BlackBerry 6

24. Link to mobile-optimized version

25. Link to mobile-optimized version

26. Scalable design Desktop iPhone

27. Mobile optimized using CSS @media

28. Facebook Messages: Another “Device”? Use caution with divider lines FBM may cut off footers, unsubscribe information

29. Facebook Messages FBM viewed on the iPhone app have functioning links and better HTML support. “Other” inbox does not appear in Android or WinMo app

30. Monitor for @facebook.comaddresses Messages are grouped together by from name (i.e. info@acme.com) No subject lines Commercial email goes in the “other” folder Text Version Tips Drop navigation bar and submessages Place the most important message first Line length < 60 characters to avoid undesirable line breaks Use capitalization, line breaks, dashed lines and other devices to visually separate different messages. Facebook Messages

31. “Best Practices” in Mobile Email “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.” - BusinessDictionary.com “The idea is that with proper processes, checks, and testing, a desired outcome can be delivered more effectively with fewer problems and unforeseen complications.” - Wikipedia

32. “Best Practices” in Mobile Email Single column design Large(r) fonts Pressable buttons & “thumb navigation” Short, direct content Clear + direct calls to action Eliminate or hide low priority content Remember subscriber experience & context is key Design for mobile first!

33. Elevate the Content People Care About Think Top Down Brand Appropriately Use UI Elements Consistently Make Targets Fingertip-Size Read the User Experience Guidelines http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design

34. 44px ~ 0.3” iOS as Inspiration

35. iOS as Inspiration

37. Important announcements

38. Another way to reinforce your call-to-action

39. Secondary subject lineAdd Preview Text!

40. Are mobile users more engaged? “Killing time is a killer app for mobile use.” -Nielsen Norman Group Email Newsletter Usability, 4th Edition Read (>7 seconds) Skim Read (2-7 seconds) Glance/Delete (<2 seconds) Source: Litmus Email Analytics, March 2011

41. Don’t panic! Mobile is changing fast, but it’s easier than you think Discovery is an accomplishment! Look for the mobile use case, use resources wisely HTML is well supported, but images are often blocked Ditch the plain text “mobile friendly” version Adapt to a single column design with touch-friendly elements Optimize text versions for Facebook messages Get inspired by your mobile OS, apps, site Readability, experience and context is key Let analytics and data be your optimization guide Top Ten Takeaways

42. Get in touch! Justine Jordan Marketing Director, Litmus justine@litmus.com | @meladorri Jay JhunEmail Services Director, Engauge jjhun@engauge.com | @emailrocks Presentation available at www.slideshare.net/litmusapp