2. Who am I?
• 5+ years in email
marketing
• Design & production
• A “left-brained”
creative
• I’m a marketer, too!
Justine Jordan Marketing Director, Litmus
@meladorri + @litmusapp
Presentation available at www.slideshare.net/litmusapp
3. Let’s talk about…
• What’s happening with email + mobile
• How each mobile OS handles email
• How to create usable and beautiful
experiences in both mobile & desktop
environments
6. Consider context
People check email…
• In bed
• At the gym
• In the bathroom
• While intoxicated
• At their desk
• To kill time
7. Knowing Your Audience
• 15% of opens are
on a mobile device Mobile
15%
• 2-20% on individual
campaigns
• 30%+ for niche
Desktop
audiences Webmail 53%
32%
http://litmus.com/blog/email-client-market-share-infograph
8. Mobile Opens by Platform
Other
1%
Majority of mobile opens
in Android, iOS (iPad +
iPhone) iPad
19%
Android iPhone
17% 63%
http://litmus.com/blog/email-client-market-share-infograph
9. WHAT SHOULD
I DO ABOUT IT?
[My emails could use some optimization
help!]
10. Doing nothing is OK.
Not optimizing for mobile may be a valid
strategy when it doesn’t make sense for
your audience, brand, or business.
For instance:
• Your mobile audience is very small
• Resources aren’t available to implement
• Quicker wins exist
11. The “aware” approach
Being mobile aware involves email designs that
consider the mobile experience but aren’t
specially constructed for it.
• Single column primary content
• Big images
• Big text
• Big buttons
• Skinny layout
12. One column primary content, and easy to press buttons. Visual style works
well on mobile without special setup.
13. Responsive email design
Using CSS3 @media queries to detect screen
size, displaying specific content or elements in
different types of viewing environments.
• Detects large vs. small screen size
• Rolls back to standard version when @media isn’t
supported
• Hide or remove content on small screens
• Not for the faint of heart: CSS ninja skills required
15. The finger is the new mouse
Design for tappable touch targets; not text links
44 x 44px minimum
16. Create touch targets
Buttons can be traditional text buttons or image-based touch targets that link
back to content.
Text Buttons Image “Buttons”
17. Bigger fonts are better
Beware minimum font sizes; automatic resizing
• Font sizes at 600px scaled to 320px are roughly
50% smaller!
• Body copy < 13px will be resized
• Recommended minimums
• Body copy: 14px
• Headlines: 22px
• CSS fix: “-webkit-text-size-adjust: none;”
18. Bigger fonts are better
Too-small navigation will be negatively affected by text scaling on iPhone
and iPad.
19. Streamline
Single column layout; simplified content
• Short, direct copy: “Twitterize”
• Eliminate or hide low priority content
• Links
• Copy
• Images
• Clear and direct calls to action
• Make it obvious
20. Got apps?
When sending email regarding mobile apps, consider that users may be
reading email on mobile, too.
DO DON’T
21. Consider “mobile first”
Simple copy + big headlines = an email that is mobile aware will also be
more usable in a desktop environment
24. Lots of links create friction
Don’t give users a reason NOT to click by making text or other calls-to-
action impossible to tap.
25. The “mobile” version
Don’t waste clicks on a less-than-optimal text version when a mobile
email
optimized website exists. mobile version web site
26. Mobile versioning
You can’t predict where users will open!
Distinctions between
environments –
Android mobile and desktop
iPhone
Version
Version – drive behavior
more than
distinctions between
email clients.
Focus on viewing environment rather than
specific devices or email clients.
27. First impressions still count
• What is recognizable, trustworthy and relevant?
• Does the subscriber have a relationship with a
person, or the brand?
• Use language they are familiar with
29. Display and support challenges
There are no mobile email standards!
OS Preview HTML* Images* Alt text Scale Enlarge
text fonts
Android 2.3 ✗ -- ✗
Android Gmail ✗ ✗ ✗
iOS 5 --
‡
Symbian ✗ ✗ ✗ ✗
‡
Windows Phone 7 ✗ ✗ ✗
‡
Blackberry 6 ✗ ✗ ✗
*HTML or images enabled by default
‡ inconsistent wrapping and scaling of text
Blackberry HTML email 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
30. Display and support challenges
Plan for an “images off” environment in most mobile operating systems. on
Android alt text Symbian images off Symbian images
Android supports alt text.
31. Display and support challenges
Windows Mobile 7 blocks images, butimages off
WinMo Preview WinMo
offers preview text and many on
WinMo images
opportunities to download images.
32. Blackberry 6 supports HTML email well, but doesn’t zoom or display images
by default.