Email Design Approaches That Work for All Devices

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

Successful Email Design Approaches That Work For All Devices

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

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

9.29%
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
iPhone accounts for 85.95%of iOSopens; iPad for 14.05%

Top Ten Email Clients by Opens

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

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

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

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

Android alt text
Symbian images off
Symbian images on

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
Why the extra click??
email
web site
mobile version

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

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 design
Desktop
iPhone

Mobile optimized using CSS @media

Facebook Messages: Another “Device”?
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.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

“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

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

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?
“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)

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

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

http://www.b2bemailmarketing.com	1299
http://emailmarketing.typepad.com	56
http://paper.li	40
http://www.emailmarketing.typepad.com	6
http://feeds.feedburner.com	5
http://twitter.com	4
http://webcache.googleusercontent.com	3
http://translate.googleusercontent.com	2
http://www.twylah.com	2
http://us-w1.rockmelt.com	1
http://cindyzeis.com	1

Email Design Approaches That Work for All Devices

by Litmus

Accessibility

Categories

Upload Details

Usage Rights

11 Embeds 1,419

Statistics

Email Design Approaches That Work for All Devices Presentation Transcript