Mobile email best practices webinar hosted by Agile Education Marketing; presented by Litmus.

1. E-mail • Direct Mail • Digital Marketing • Sales Tools
Funding Data • Creative Services
Mobile email:
Strategies and how-tos
for the small screen

2. Mobile e-mail:
Strategies and how-tos
for the small screen
Welcome!
Mobile e-mail: Strategies and how-tos for the
small screen
Sponsored by:
Learn more about Agile at www.agile-ed.com.

3. Justine Jordan
Director of Marketing, Litmus
Justine leads content marketing, customer
education and research initiatives for Litmus‟
suite of email tracking and testing tools. Prior
to joining Litmus, Justine lead the creative
services team at ExactTarget and was
responsible for designing, building and
managing email campaigns for SMB through
Fortune 500 customers. Read her rants and
raves by following @meladorri.
Presenter Introduction

4. Got screens?

5. Mobile Email: Why
Mobile is big, but how big?

6. Email Opens: July 2013
Mobile:
Smartphones (iPhone, Android) and tablets
Desktop:
Installed email programs (Outlook, Apple
Mail)
Webmail:
Email accessed through a web browser
(Gmail, Hotmail, Yahoo!)
Desktop
34%
Webmail
22%
Mobile
44%
Source: Litmus Email Analytics

7. 0%
10%
20%
30%
40%
50%
60%
Desktop Webmail Mobile
Email Opens: 2011-now
44%
33%
10%

8. Know Your Audience
Copy, paste
& send

9. some of our major retail brands
are seeing 60% of their subscribers
viewing on a mobile device
“
—Cara Olson, Digital Evolution Group
”

10. Small Medium Large
iPhone
2.3” wide
Galaxy Note II
3.2” wide
Nexus 7
7.3” wide
BB Bold
2.6” wide
iPad Mini
5.3” wide
Excite 13
8.5” wide
Screensize-apalooza

11. The unifying characteristic?
TOUCH.

12. Experience Matters
It’s more than just metrics

13. One chance to make an impression
69.70%
18%
17.70%
9.40%
7.60%
3.50%
Delete it
Unsubscribe
View on computer
Don't know
Read anyway
File it
BlueHornet Study: Consumer Views of Email Marketing
Neutral
24.60%
Slightly
Negative
51.30%
Strongly
Negative
24.10%
How does a poorly designed email
affect your perception of the brand?
If you get a mobile email that doesn‟t look good, what do you do?

14. Mobile Triage Myth
3%
reopen on
another
client
97%
view in a single
environment

15. Consider the experience
• The mobile experience is different
than the desktop experience
• Landing pages are part of that
experience
????
Page/Site
Tap
Preview/Open
Preheader
Subject Line
From Name

16. Focus on „from name‟ and subject line

17. Focus on „from name‟
and subject line
From Name
~25 characters
Subject Line
~35 characters
Preheader
~85 characters
17

18. Preheaders = tertiary inbox content

19. Preheaders = tertiary inbox content

20. iPhone Windows Phone
Blackberry

21. iPhone:
Scales to width;
320 x 460
Android:
No scaling;
dimensions vary;
top-left corner
displayed
Inconsistent
rendering
across
devices and
operating
systems

22. Provide click/tap opportunities
22
What makes the email on the left different?

23. NO:
crowded grids
NO:
impossible
form fields

24. 24
YES:
easy to
navigate
YES:
finger friendly

25. Strategies & Approaches
How to tackle mobile email

26. As with most
things with
email, there‟s
not a one-
size-fits-all
approach
(sorry to disappoint you)

27. Mobile First
Considers the
mobile user
as a priority
|-------------------460px -------------------| |---------------------600px ---------------------|

28. Mobile First / Friendly
• One layout for all screen sizes
• Single column design
– 320-500px
• Large text & buttons
• Generous white space
• Clear calls to action
• Short, concise body copy
Agnostic / Aware / Scalable

29. Fluid
Email width
changes to
fit within the
window
|--------------------------------------------------------1166px---------------------------------------------------|
|-----------------------------525px --------------------------|

30. Fluid layout
• Percentage-based
widths
• Adapts to fill the
screen it‟s viewed on;
text wraps
automatically

31. Responsive
Design
Uses media
queries to
detect screen
size and alter
content
accordingly
|-----------320px ------------||---------------------------------------600px------------------------------------------|

33. Responsive Design
• More than a “line of code”
• Set of conditional statement that enables specific styles
– If the screen size is x, then display y
– If the screen size is x, then increase headline size to y
– If screen size is x, then show image at 100%
• Detects screen size, not device type

34. Taking Action
Try to avoid analysis paralysis

35. iPhone native yes
iPad native yes
Android 2.1 native no
Android 2.2 native yes
Android 2.3 native yes
Android 4.x native yes
Gmail mobile apps no
Mailbox iOS app yes
@media support
http://stylecampaign.com/blog/2012/10/responsive-email-support/
Yahoo! mobile apps no
Windows Mobile 7 no
Windows Mobile 7.5 yes
Windows Mobile 8 no
BlackBerry OS 6 yes
BlackBerry OS 7 yes
BlackBerry Z10 yes
Kindle Fire native yes

36. Email is an *application*

37. Email is an *application*
Device ≠ email client

38. Plan on data, not your gut
Your audience is the most important one
Brand/Industry A: 55% Brand/Industry B: 18%

39. Responsive isn‟t always the answer
1. Resources
2. Data
3. Company type
4. User expectations
Company A
1. Resources: coders, designers, writer
2. Data: 55% mobile
3. Company type: Tech
4. User expectations: B2B Tech audience
Responsive
Company B
1. Resources: marketing manager, intern
2. Data: 18% mobile
3. Company type: Non-Profit/Education
4. User expectations: low sophistication
Aware

40. Android Observations
• Blocks images by default; supports ALT
text
• Two apps with opposing support for
media queries
• Primary content focus on left-hand side
• Various screen sizes and sometimes
automatic scaling

41. Blackberry Observations
• Media query support
• Blocks images; supports styled ALT
text
• Does not scale/auto-zoom
• No separate app; email joins
social, SMS and voice in the “hub”

42. Windows Phone
Observations
• Mixed media query support
• Does weird things to fonts
• Blocks images; no ALT text
• No one has them!

43. iPhone Observations
• Automatically scales messages to fit
the screen
• Excellent support for CSS3 and
media queries
• Images on by default
• Resizes fonts under 13px

44. Mobile Email Design
Principles
“Best practices,” if you will…

45. Preheader tips
• Support the subject line with a
creative, useful or helpful
preheader.
– Call-to-action
– Special offer
– Reminder
– Clickable/measurable
– NOT “having trouble…?”

46. Bigger is Better
• Body copy: 16px+
• Headlines: 22px+
– Or else face auto-resizing
• Buttons: 44px by 44px
• Space: 10px+

48. Dial up the contrast
Bright screens kill
batteries

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

50. • Tappable touch targets
• „Bulletproof‟ buttons don‟t rely on
an image
• Left-hand side
Create touch targets
Buttons can be traditional text buttons or image-based touch targets that link
back to content.

51. Test, test, test!

53. Mobile email testing with Litmus

54. Results
Test and share for the common good!

55. • Rewards Network: CTR increased by more than 25%
• Deckers: 10% increase in CTR; 9% increase in mobile opens
• Crocs: 7.66% lift in CTOR; 15.63% lift in iPhone „read‟
engagement; 8.82% lift in mobile „read‟ engagement
• SavvyMom: 3x lift in CTOR. 12% of those who opened on
mobile clicked vs. 6% who opened on desktop
More coming all the time: litmus.com/blog

56. Resources
Info + tools

58. Market Share Stats
http://emailclientmarketshare.com

59. Antwort: Responsive Layouts for Email
http://internations.github.io/antwort/

60. Zurb: Responsive
EmailTemplates
http://www.zurb.com/article/
1119/create-emails-for-any-
device-introducing-
*not compatible with
Outlook 2007+

61. Responsive EmailTutorial
http://www.netmagazine.com/tutorials/build-responsive-emails

62. Campaign Monitor
RED Guide
http://www.campaignmonitor.com/g
uides/mobile/

63. Resources
litmus.com/blog
stylecampaign.com/blog
campaignmonitor.com/blog
mailchimp.com/blog
emaildesignreview.com
mobileawesomeness.com
mediaqueri.es
Media Post Email Insider columns
A List Apart / A Book Apart
Ethan Marcotte
Luke Wroblewski
Twitter community

64. Get in touch
Justine Jordan
@meladorri @litmusapp
hello@litmus.com