Webinar presented on Nov. 15th with Chris Studabaker from ExactTarget.

1. EMAIL + MOBILE
[2011 EDITION]
+

2. Introductions…
Justine Jordan
Marketing Director, Litmus
@meladorri + @litmusapp
Chris Studabaker
Global Practice Manager, Design Solutions
@cstudabaker + @ExactTarget
Ask questions, discuss and interact on Twitter
using #LitmusChat

3. Designing mobile-friendly emails
…is all about…
• Knowing your audience
• Optimizing content & design for context
• Creating usable and beautiful experiences
in both mobile & desktop environments

4. So, what is “mobile email”?
Email + mobile.
It’s about developing email for small
screens, touch interfaces, multi-
device users and considering mobile
user needs.

5. from
to

6. KNOW YOUR
AUDIENCE
[You should know more than anyone else]

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

10. CONSIDER
CONTEXT
[An extension of knowing your audience]

11. Context comes first
People check email…
• In bed
• At the gym
• In the bathroom
• While intoxicated
• During exercise
• To kill time

12. Environment vs. devices
The distinctions between viewing environments – i.e.
mobile and desktop – drive behavior more than distinctions
between email clients.
Focus on viewing environment
rather than specific devices or
email clients.

13. Optimizing design: 6 approaches
SIMPLE 1. Do nothing
2. Mobile text version
3. Mobile aware
4. Skinny template
5. Fluid layout
COMPLEX 6. Responsive design

14. 1. Do nothing
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

15. 2. Mobile text version
Creating a “view on mobile”
version that is linked from the
HTML email makes sense
when you have a large
BlackBerry audience.
• Plain text
• Single column
• Simple rich text
• Minimal color
• Few small images
Single column, plain or rich text, very basic imagery.

16. When to ditch mobile text…
Don’t waste clicks on a less-than-optimal text version when a mobile
email
optimized website exists. mobile version web site

17. 3. Mobile aware
Creating email designs that consider the
mobile experience but aren’t specially
constructed for it. Best when you want to
increase mobile usability without making radical
changes or specializing.
• Single column primary content
• Big images
• Big text
• Big buttons

18. One column primary content, and easy to press buttons. Visual style works
well on mobile without special setup.

19. 4. Skinny template
Designed to have a smaller width than
standard practices, thus becoming easier to
read and navigate on mobile.
• Best when you’re starting out, or want
to balance desktop & mobile usability.
• Single Column
• 320px – 520px

20. ~420 pixels
Skinny single column and large, readable text create a style that translates
seamlessly across environments.

21. 5. Fluid layout
Email width that adapts to screens both large
and small. Best used in situations where the
structure is basic, readability is key, and
scaling would destroy usability.
• Use percentages for widths
• Most effective for simple layouts
• Heavy reliance on text content

22. ~740 pixels ~320 pixels
Email width scales rather than text size, ensuring readability in any
environment.

23. 6. Responsive design
Using CSS3 @media queries to detect screen
size, and display specific content or elements in
different types of viewing environments. The most
advanced way to deliver a specialized mobile
email experience.
• Detects large vs. small screen size
• Rolls back to standard version when @media isn’t
supported
• Hide or remove content on small screens

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

25. Specific desktop & mobile styles create a simple, readable and sustainable
template.

26. Which should you use?
1. Do nothing
When there are better things to do
2. Create a mobile text version
When you have a large BlackBerry audience: data, highly regulated
industries or companies that use BB exclusively.
3. Demonstrate awareness with big buttons & big text
When testing, avoiding radical change, balancing dual environments
4. Try a skinny template
When the data comes back and says you’re ready for the next step
5. Implement a fluid layout
For transactional emails, auto-news, and when when basic structure
and readability is key
6. Go responsive with media queries
When you’re trying to impress, or you have a specialized use case
(such as an urgent and “on the go” scenarios)

27. DESIGNING FOR ALL
ENVIRONMENTS
[Since you can’t predict where users open]

28. Display and Support Challenges
There are no mobile email standards!
OS Preview HTML* Images* Alt text Scale Enlarge
text fonts
Android 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 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

29. 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.

30. 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.

31. Blackberry 6 supports HTML email well, but doesn’t zoom or display images
by default.

32. The finger is the new mouse
Design for tappable touch targets; not text links
44 x 44px minimum

33. Create touch targets
Buttons can be traditional text buttons or image-based touch targets that link
back to content.
Text Buttons Image “Buttons”

34. Bigger fonts are better
Beware minimum font sizes; automatic resizing
• Body copy < 13px will be resized
• Recommended minimums
• Body copy: 14px
• Headlines: 22px
• CSS fix: “-webkit-text-size-adjust: none;”

35. Bigger fonts are better
Too-small navigation will be negatively affected by text scaling on iPhone
and iPad.

36. Bigger fonts are better
600px scaled to 320px on an iPhone is roughly 50% smaller - plan
accordingly!

37. Streamline, be aware
Single column layout = simplified content
• Short, direct copy
• Eliminate or hide low priority content
• Links
• Copy
• Images
• Clear and direct calls to action
• Make it obvious

38. Streamline, be aware
Single column layout, simple copy, touch targets, clear calls to action and
minimal fluff = mobile aware.

39. Don’t create friction
Don’t give users a reason NOT to click by making text or other calls-to-
action impossible to tap.

40. Get inspired by sites + apps
Layouts that contain more than three columns will be difficult to use.
Site: Yes Email: No

41. Don’t forget about context!
When sending email regarding mobile apps, consider that users may be
reading email on mobile, too.
DO DON’T

42. Consider “mobile first”
Simple copy + big headlines = an email that is mobile aware will also be
more usable in a desktop environment

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

44. DOES ENVIRONMENT
AFFECT ACTION?
[Do subscribers click while they’re mobile?]

45. How does mobile affect clicks?
% of total clicks by environment for 3 samples
90 80
80
70 67
62
60
50 Desktop Only
40 34 Mobile Only
28
30
17 Multi Device
20
10 3 5 4
0
Newsletter Retail 1 Retail 2
Learning: clicks mostly match to open environments.

46. How does mobile affect clicks?
Environment CTO rate for 3 environments
45
38.9
40
35 33.6
30
25 Desktop Only
20 16.6 17.6 16.1 Mobile Only
15
9.4 7.4 7.4 6.9 Multi Device
10
5
0
Newsletter Retail 1 Retail 2
Likelihood to click doesn’t vary radically across environments, but readability
plays a role. Multi device users have chosen to engage.

47. I LOVE IT.
TELL ME MORE!
[More information and valuable resources]

48. Resources
stylecampaign.com/blog
campaignmonitor.com/blog
litmus.com/blog
exacttarget.com/sff
mobileawesomeness.com
cssiphone.com
androidpatterns.com
mobilepatterns.com
mediaqueri.es

49. QA
&

50. Thanks!
Justine Jordan
Marketing Director, Litmus
@meladorri + @litmusapp
Chris Studabaker
Global Practice Manager, Design Solutions
@cstudabaker + @ExactTarget
Presentation available at www.slideshare.net/litmusapp
Recording will be posted at www.litmus.com/blog/email-mobile-webinar-2011