email design for all devices
Post on 13-May-2015
3.580 Views
Preview:
DESCRIPTION
TRANSCRIPT
Successful Email Design Approaches That Work For All Devices
Justine Jordan | Litmus | @meladorriJay Jhun | Engauge | @emailrocks
May 2011
Successful Email Design Approaches That Work For All Devices
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
Email is moving beyond the desktopSubscribers 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
9.29%OF OPENS ARE ON A MOBILE DEVICE
2-15% on individual campaigns30%+ for niche audiences
Source: Litmus Email Analytics, March 2011
Mobile Opens by OS
iOS86.86%
Android12.39%
Blackberry 0.46% Symbian 0.24% Windows Mobile0.04%
Source: Litmus Email Analytics, March 2011
iPhone accounts for 85.95% of iOS opens; iPad for 14.05%
Outlook 38.82%
Hotmail 13.07%
Yahoo! Mail 12.13%
Web Version 8.11%
Apple Mail 7.16%
iPhone 6.94%
Gmail 4.08%
Windows Live 2.22% Android 1.15%
iPad 1.13%
Thunderbird 1.08% AOL Mail 0.50% Others 3.61%
Top Ten Email Clients by Opens
Source: Litmus Email Analytics, March 2011
Your mileage may vary…
Apple Mail 46.31%
Outlook 20.79%
Gmail 9.46%
iPhone 8.48%
Thunderbird 3.98%
iPad 1.44%
Others 9.54%
Source: Email Analytics for Litmus Newsletter, February 2011
Android iOS Blackberry Windows Unsure0%
5%
10%
15%
20%
25%
30%
35%
26%
33%
13%
7%
18%
31%30%
11%
6%
20%2010 2011
Consumer preferences are changing
Source: The Nielsen Company, survey of U.S. mobile consumers
Next desired operating system
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%
Smartphone OS Share Predictions
Source: IDC Worldwide Quarterly Mobile Phone Tracker, March 29, 2011
Nielsen Stats
Android: 37%iOS: 27%
Blackberry at 22%
Do you have a mobile audience?
Web analytics, user agent detection, surveys and preference centers can help you decide.
• 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
OS Preview text
HTML* Images* Alt text Scale Enlarge fonts
Android 2.2 ✗ ✓ ✗ ✓ ✗ ✓Blackberry ✗ ◐ ◐ ✗ ✗ ✓‡
iOS 4.x ✓ ✓ ✓ -- ✓ ✓Symbian ✗ ✓ ✗ ✗ ✗ ✓‡
Windows Phone 7 ✓ ✓ ✗ ✗ ✗ ✓‡
Display and Support Challenges
*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
There are no mobile email standards!
Display and Support Challenges
Android alt text Symbian images off Symbian images on
Display and Support Challenges
WinMo Preview WinMo images off WinMo images on
• 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
Link to “mobile friendly” text version
email web sitemobile version
Why the extra click??
Link to “mobile friendly” text version
Mobile “friendly”
??
Consider context & subscriber experience
email mobile version landing
Consider context & subscriber experience
• More than just your plain text version
• Get to the point• Larger fonts• Basic HTML is OK• Consider CAN-SPAM
If you must…
Beware text resizing
• 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
Beware text resizing
Before (Android)
After (Android)
Link to mobile-optimized version
Link to mobile-optimized version
Scalable design
Desktop iPhone
Mobile optimized using CSS @media
Facebook Messages: Another “Device”? (1)
Facebook Messages: Another “Device”? (2)
Use caution with divider lines
FBM may cut off footers, unsubscribe information
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
• 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.
Facebook Messages
“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
• 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!
“Best Practices” in Mobile Email
• 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
44px ~ 0.3”
iOS as Inspiration
iOS as Inspiration
• 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
Add Preview Text!
Are mobile users more engaged?
49%
22%
29%
Mobile
26%
4%70%
Webmail
55%
28%
17%
Desktop
Read (>7 seconds) Skim Read (2-7 seconds) Glance/Delete (<2 seconds)
“Killing time is a killer app for mobile use.”-Nielsen Norman Group Email Newsletter Usability, 4th Edition
Source: Litmus Email Analytics, March 2011
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
Top Ten Takeaways
Get in touch!
Justine Jordan Marketing Director, Litmus
justine@litmus.com | @meladorri
Jay Jhun Email Services Director, Engauge
jjhun@engauge.com | @emailrocks
top related