Presented on Nov. 29th at Social Fresh Baltimore.

1. OPTIMIZING
EMAIL + MOBILE

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

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

4. KNOW YOUR
AUDIENCE
[Because knowledge is power!]

5. from
to

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

14. Simple layout, selectively removing content & spacing adjustments create a
@media query case study.

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

22. Consider “mobile first”
Featured products also serve as large, tappable buttons in a mobile
environment.

23. THINGS
TO SKIP
[AKA what NOT to do]

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

28. SUPPORT FOR
MOBILE EMAIL
[How do mobile devices affect display?]

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.

33. Resources
litmus.com/blog
stylecampaign.com/blog
campaignmonitor.com/blog

34. Thanks!
Justine Jordan
Marketing Director, Litmus
@meladorri + @litmusapp
Presentation available at www.slideshare.net/litmusapp