Email Design for All Devices

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

Successful Email DesignApproaches That WorkFor All Devices

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

AgendaEmail is moving beyond the desktopSubscribers are viewing emails in a diverse ecosystem ofwebmail, 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

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

Mobile Opens by OS Symbian 0.24% Android 12.39% Windows Mobile Other 0.04% 0.74% iOS86.86% Blackberry 0.46% iPhone accounts for 85.95% of iOS opens; iPad for 14.05% Source: Litmus Email Analytics, March 2011

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

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

Consumer preferences are changing Next desired operating system35% 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

Smartphone OS Share PredictionsOS 2011 Share 2015 Share ChangeAndroid 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%

Do you have a mobile audience?Web analytics, user agentdetection, surveys and preferencecenters can help you decide.

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

Display and Support ChallengesThere are no mobile email standards!OS Preview HTML* Images* Alt text Scale Enlarge text fontsAndroid 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 downloadimages automatically is an option. Blackberry 6 has webkit support and displays HTML email bydefault, but a prompt appears to download external images‡ inconsistent wrapping and scaling of text

Display and Support ChallengesAndroid alt text Symbian images off Symbian images on

Display and Support ChallengesWinMo Preview WinMo images off WinMo images on

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

Link to “mobile friendly” text versionWhy the extra click??email mobile version web site

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

Consider context & subscriber experienceemail mobile version landing

Consider context & subscriber experience

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

Beware text resizing

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

Link to mobile-optimized version

Scalable designDesktop 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 MessagesFBM viewed on the iPhone app have functioning links and better HTML support. “Other” inbox does not appear in Android or WinMo app

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” folderText 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.

“Best Practices” in Mobile Email“Methods and techniques that have consistently shown resultssuperior than those achieved with other means, and which are usedas benchmarks to strive for. There is, however, no practice that isbest for everyone or in every situation, and no best practiceremains best for very long as people keep on finding better ways ofdoing things.” - BusinessDictionary.com“The idea is that with proper processes, checks, and testing, adesired outcome can be delivered more effectively with fewerproblems and unforeseen complications.”- Wikipedia

“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 keyDesign for mobile first!

Read the User Experience Guidelineshttp://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

iOS as Inspirationls 44 pixelsls 44 pixels 44px ~ 0.3”

iOS as Inspiration44 pixels44 pixels 44 pixels 44 pixels44 pixels

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

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 DesktopRead (>7 seconds) Skim Read (2-7 seconds) Glance/Delete (<2 seconds) Source: Litmus Email Analytics, March 2011

Top Ten Takeaways1 Don’t panic! Mobile is changing fast, but it’s easier than you think2 Discovery is an accomplishment!3 Look for the mobile use case, use resources wisely4 HTML is well supported, but images are often blocked5 Ditch the plain text “mobile friendly” version6 Adapt to a single column design with touch-friendly elements7 Optimize text versions for Facebook messages8 Get inspired by your mobile OS, apps, site9 Readability, experience and context is key10 Let analytics and data be your optimization guide

Get in touch!Justine Jordan Marketing Director, Litmusjustine@litmus.com | @meladorriJay Jhun Email Services Director, Engaugejjhun@engauge.com | @emailrocks

Email Design for All Devices

by Silverpop on Jan 04, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Email Design for All Devices — Presentation Transcript