The challenges of email design approaches continues to grow dramatically as the number of mobile platforms increases. In this session from Silverpop's 2011 client summit you'll learn from email design experts Justine Jordan, Litmus and Jay Jhun, Engauge, the critical best practices and emerging approaches to designing emails that render well across all platforms – mobile, Web and desktop.

1. Successful Email Design Approaches
That Work For All Devices
Justine Jordan | Litmus | @meladorri
Jay Jhun | Engauge | @emailrocks
May 2011

2. Successful Email Design
Approaches That Work
For All Devices

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

4. Agenda
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

5. 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
Symbian 0.24%
Android
12.39%
Windows
Mobile
Other 0.04%
0.74%
iOS
86.86%
Blackberry 0.46%
iPhone accounts for 85.95% of iOS opens; iPad for 14.05%
Source: Litmus Email Analytics, March 2011

7. Top Ten Email Clients by Opens
AOL Mail 0.50%
iPad 1.13% Thunderbird
1.08% Others 3.61%
Android 1.15%
Windows Live 2.22%
Gmail 4.08%
Outlook 38.82%
iPhone 6.94%
Apple Mail 7.16%
Web Version 8.11%
Yahoo! Mail 12.13%
Hotmail 13.07%
Source: Litmus Email Analytics, March 2011

8. Your mileage may vary…
Others 9.54%
iPad 1.44%
Thunderbird 3.98%
iPhone 8.48% Apple Mail 46.31%
Gmail 9.46%
Outlook 20.79%
Source: Email Analytics for Litmus Newsletter, February 2011

9. Consumer preferences are changing
Next desired operating system
35% 33%
31%
30%
30%
26%
25%
20%
20% 2010 2011 18%
15% 13%
11%
10%
7%
6%
5%
0%
Android iOS Blackberry Windows Unsure
Source: The Nielsen Company, survey of U.S. mobile consumers

10. Smartphone OS Share Predictions
OS 2011 Share 2015 Share Change
Android 39.5% 45.4% 16.4%
Blackberry 14.9% 13.7% -8%
iOS 15.7% 15.3% -2.5%
Symbian 20.9% 0.2% -99%
Windows Phone 5.5% 20.9% 280%
Others 3.5% 4.6% 31%
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. Making the mobile email choice
• 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

13. Display and Support Challenges
There are no mobile email standards!
OS Preview HTML* Images* Alt text Scale Enlarge
text fonts
Android 2.2 ✗ ✗ ✗
‡
Blackberry ✗ ◐ ◐ ✗ ✗
iOS 4.x --
‡
Symbian ✗ ✗ ✗ ✗
‡
Windows Phone 7 ✗ ✗ ✗
*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. Mobile Email Options
• 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

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

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

19. Consider context & subscriber experience
email mobile version landing

20. Consider context & subscriber experience

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

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”? (1)

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

30. 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

31. Facebook Messages
• Monitor for @facebook.com
addresses
• 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.

32. “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 long as 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

33. “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!

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

35. iOS as Inspiration
ls
44 pixels
ls
44 pixels
44px ~ 0.3”

36. iOS as Inspiration
44 pixels
44 pixels
44 pixels
44 pixels
44 pixels

37. Add Preview Text!
• Outlook, Gmail, iPhone and WinMo pulls in
the preheader or first few lines of text in the
email as a “snippet” or AutoPreview
• Maximize subject line (35 characters),
preview text (90 characters)
• Leverage this feature to extend your
message:
• Time-sensitive deadlines
• Important announcements
• Another way to reinforce your call-to-
action
• Secondary subject line

38. Are mobile users more engaged?
“Killing time is a killer app for mobile use.”
-Nielsen Norman Group Email Newsletter Usability, 4th Edition
17%
29% 26%
49%
28% 55%
70% 4%
22%
Mobile Webmail Desktop
Read (>7 seconds) Skim Read (2-7 seconds) Glance/Delete (<2 seconds)
Source: Litmus Email Analytics, March 2011

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

40. Get in touch!
Justine Jordan Marketing Director, Litmus
justine@litmus.com | @meladorri
Jay Jhun Email Services Director, Engauge
jjhun@engauge.com | @emailrocks