0
E-mail • Direct Mail • Digital Marketing • Sales Tools
Funding Data • Creative Services
Mobile email:
Strategies and how-t...
Mobile e-mail:
Strategies and how-tos
for the small screen
Welcome!
Mobile e-mail: Strategies and how-tos for the
small sc...
Justine Jordan
Director of Marketing, Litmus
Justine leads content marketing, customer
education and research initiatives ...
Got screens?
Mobile Email: Why
Mobile is big, but how big?
Email Opens: July 2013
Mobile:
Smartphones (iPhone, Android) and tablets
Desktop:
Installed email programs (Outlook, Apple...
0%
10%
20%
30%
40%
50%
60%
Desktop Webmail Mobile
Email Opens: 2011-now
44%
33%
10%
Know Your Audience
Copy, paste
& send
some of our major retail brands
are seeing 60% of their subscribers
viewing on a mobile device
“
—Cara Olson, Digital Evol...
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
Excit...
The unifying characteristic?
TOUCH.
Experience Matters
It’s more than just metrics
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
Rea...
Mobile Triage Myth
3%
reopen on
another
client
97%
view in a single
environment
Consider the experience
• The mobile experience is different
than the desktop experience
• Landing pages are part of that
...
Focus on „from name‟ and subject line
Focus on „from name‟
and subject line
From Name
~25 characters
Subject Line
~35 characters
Preheader
~85 characters
17
Preheaders = tertiary inbox content
Preheaders = tertiary inbox content
iPhone Windows Phone
Blackberry
iPhone:
Scales to width;
320 x 460
Android:
No scaling;
dimensions vary;
top-left corner
displayed
Inconsistent
rendering
...
Provide click/tap opportunities
22
What makes the email on the left different?
NO:
crowded grids
NO:
impossible
form fields
24
YES:
easy to
navigate
YES:
finger friendly
Strategies & Approaches
How to tackle mobile email
As with most
things with
email, there‟s
not a one-
size-fits-all
approach
(sorry to disappoint you)
Mobile First
Considers the
mobile user
as a priority
|-------------------460px -------------------| |---------------------...
Mobile First / Friendly
• One layout for all screen sizes
• Single column design
– 320-500px
• Large text & buttons
• Gene...
Fluid
Email width
changes to
fit within the
window
|--------------------------------------------------------1166px--------...
Fluid layout
• Percentage-based
widths
• Adapts to fill the
screen it‟s viewed on;
text wraps
automatically
Responsive
Design
Uses media
queries to
detect screen
size and alter
content
accordingly
|-----------320px ------------||-...
Responsive Design
• More than a “line of code”
• Set of conditional statement that enables specific styles
– If the screen...
Taking Action
Try to avoid analysis paralysis
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 y...
Email is an *application*
Email is an *application*
Device ≠ email client
Plan on data, not your gut
Your audience is the most important one
Brand/Industry A: 55% Brand/Industry B: 18%
Responsive isn‟t always the answer
1. Resources
2. Data
3. Company type
4. User expectations
Company A
1. Resources: coder...
Android Observations
• Blocks images by default; supports ALT
text
• Two apps with opposing support for
media queries
• Pr...
Blackberry Observations
• Media query support
• Blocks images; supports styled ALT
text
• Does not scale/auto-zoom
• No se...
Windows Phone
Observations
• Mixed media query support
• Does weird things to fonts
• Blocks images; no ALT text
• No one ...
iPhone Observations
• Automatically scales messages to fit
the screen
• Excellent support for CSS3 and
media queries
• Ima...
Mobile Email Design
Principles
“Best practices,” if you will…
Preheader tips
• Support the subject line with a
creative, useful or helpful
preheader.
– Call-to-action
– Special offer
–...
Bigger is Better
• Body copy: 16px+
• Headlines: 22px+
– Or else face auto-resizing
• Buttons: 44px by 44px
• Space: 10px+
Dial up the contrast
Bright screens kill
batteries
Lots of links create friction
Don‟t give users a reason NOT to click by making text or other calls-to-
action impossible t...
• Tappable touch targets
• „Bulletproof‟ buttons don‟t rely on
an image
• Left-hand side
Create touch targets
Buttons can ...
Test, test, test!
Mobile email testing with Litmus
Results
Test and share for the common good!
• Rewards Network: CTR increased by more than 25%
• Deckers: 10% increase in CTR; 9% increase in mobile opens
• Crocs: 7.6...
Resources
Info + tools
Market Share Stats
http://emailclientmarketshare.com
Antwort: Responsive Layouts for Email
http://internations.github.io/antwort/
Zurb: Responsive
EmailTemplates
http://www.zurb.com/article/
1119/create-emails-for-any-
device-introducing-
*not compatib...
Responsive EmailTutorial
http://www.netmagazine.com/tutorials/build-responsive-emails
Campaign Monitor
RED Guide
http://www.campaignmonitor.com/g
uides/mobile/
Resources
litmus.com/blog
stylecampaign.com/blog
campaignmonitor.com/blog
mailchimp.com/blog
emaildesignreview.com
mobilea...
Get in touch
Justine Jordan
@meladorri @litmusapp
hello@litmus.com
Mobile email: strategies and how-tos for the small screen
Mobile email: strategies and how-tos for the small screen
Mobile email: strategies and how-tos for the small screen
Mobile email: strategies and how-tos for the small screen
Upcoming SlideShare
Loading in...5
×

Mobile email: strategies and how-tos for the small screen

959

Published on

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

Published in: Education, Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
959
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
30
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • It’s your BRAND in someone’s inbox… Data is important, but so is design.
  • From Name~25 characters Subject Line ~35 characters Preheader~85 characters
  • Support the subject line with a creative, useful or helpful preheader (NOT “having trouble…?”)Call-to-actionSpecial offerReminderClickable/measurable
  • Really long subject lines can enhance… or distract.
  • After the from/subject/preheader, you get the open.The preview pane still counts, but has a different form factor
  • Advantages: You create a single message, which provides a seamless experience for viewers no matter which screen they use. Your responsive email will be optimized for many mobile devices, especially the iPhone. Responsive design also allows you to show or hide blocks of copy in different versions of the email. Many designers have latched onto this “show-hide” capability because it allows them to customize copy, images or calls to action for different devices. You could show three offers in a desktop version, for example, and then direct the mobile version to hide all but the primary offer. Disadvantages: Responsive design requires specialized coding expertise and isn’t compatible with all devices/ OS, such as BlackBerry, older versions of Outlook and the Gmail application on an Android mobile. Also, your mobile version might have to lose some valuable content, such as a secondary offer or editorial content. This could reduce click and conversion opportunities.
  • Advantages: You create a single message, which provides a seamless experience for viewers no matter which screen they use. Your responsive email will be optimized for many mobile devices, especially the iPhone. Responsive design also allows you to show or hide blocks of copy in different versions of the email. Many designers have latched onto this “show-hide” capability because it allows them to customize copy, images or calls to action for different devices. You could show three offers in a desktop version, for example, and then direct the mobile version to hide all but the primary offer. Disadvantages: Responsive design requires specialized coding expertise and isn’t compatible with all devices/ OS, such as BlackBerry, older versions of Outlook and the Gmail application on an Android mobile. Also, your mobile version might have to lose some valuable content, such as a secondary offer or editorial content. This could reduce click and conversion opportunities.
  • Transcript of "Mobile email: strategies and how-tos for the small screen"

    1. 1. E-mail • Direct Mail • Digital Marketing • Sales Tools Funding Data • Creative Services Mobile email: Strategies and how-tos for the small screen
    2. 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. 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. 4. Got screens?
    5. 5. Mobile Email: Why Mobile is big, but how big?
    6. 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. 7. 0% 10% 20% 30% 40% 50% 60% Desktop Webmail Mobile Email Opens: 2011-now 44% 33% 10%
    8. 8. Know Your Audience Copy, paste & send
    9. 9. some of our major retail brands are seeing 60% of their subscribers viewing on a mobile device “ —Cara Olson, Digital Evolution Group ”
    10. 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. 11. The unifying characteristic? TOUCH.
    12. 12. Experience Matters It’s more than just metrics
    13. 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. 14. Mobile Triage Myth 3% reopen on another client 97% view in a single environment
    15. 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. 16. Focus on „from name‟ and subject line
    17. 17. Focus on „from name‟ and subject line From Name ~25 characters Subject Line ~35 characters Preheader ~85 characters 17
    18. 18. Preheaders = tertiary inbox content
    19. 19. Preheaders = tertiary inbox content
    20. 20. iPhone Windows Phone Blackberry
    21. 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. 22. Provide click/tap opportunities 22 What makes the email on the left different?
    23. 23. NO: crowded grids NO: impossible form fields
    24. 24. 24 YES: easy to navigate YES: finger friendly
    25. 25. Strategies & Approaches How to tackle mobile email
    26. 26. As with most things with email, there‟s not a one- size-fits-all approach (sorry to disappoint you)
    27. 27. Mobile First Considers the mobile user as a priority |-------------------460px -------------------| |---------------------600px ---------------------|
    28. 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. 29. Fluid Email width changes to fit within the window |--------------------------------------------------------1166px---------------------------------------------------| |-----------------------------525px --------------------------|
    30. 30. Fluid layout • Percentage-based widths • Adapts to fill the screen it‟s viewed on; text wraps automatically
    31. 31. Responsive Design Uses media queries to detect screen size and alter content accordingly |-----------320px ------------||---------------------------------------600px------------------------------------------|
    32. 32. 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
    33. 33. Taking Action Try to avoid analysis paralysis
    34. 34. 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
    35. 35. Email is an *application*
    36. 36. Email is an *application* Device ≠ email client
    37. 37. Plan on data, not your gut Your audience is the most important one Brand/Industry A: 55% Brand/Industry B: 18%
    38. 38. 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
    39. 39. 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
    40. 40. 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”
    41. 41. Windows Phone Observations • Mixed media query support • Does weird things to fonts • Blocks images; no ALT text • No one has them!
    42. 42. iPhone Observations • Automatically scales messages to fit the screen • Excellent support for CSS3 and media queries • Images on by default • Resizes fonts under 13px
    43. 43. Mobile Email Design Principles “Best practices,” if you will…
    44. 44. Preheader tips • Support the subject line with a creative, useful or helpful preheader. – Call-to-action – Special offer – Reminder – Clickable/measurable – NOT “having trouble…?”
    45. 45. Bigger is Better • Body copy: 16px+ • Headlines: 22px+ – Or else face auto-resizing • Buttons: 44px by 44px • Space: 10px+
    46. 46. Dial up the contrast Bright screens kill batteries
    47. 47. 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.
    48. 48. • 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.
    49. 49. Test, test, test!
    50. 50. Mobile email testing with Litmus
    51. 51. Results Test and share for the common good!
    52. 52. • 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
    53. 53. Resources Info + tools
    54. 54. Market Share Stats http://emailclientmarketshare.com
    55. 55. Antwort: Responsive Layouts for Email http://internations.github.io/antwort/
    56. 56. Zurb: Responsive EmailTemplates http://www.zurb.com/article/ 1119/create-emails-for-any- device-introducing- *not compatible with Outlook 2007+
    57. 57. Responsive EmailTutorial http://www.netmagazine.com/tutorials/build-responsive-emails
    58. 58. Campaign Monitor RED Guide http://www.campaignmonitor.com/g uides/mobile/
    59. 59. 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
    60. 60. Get in touch Justine Jordan @meladorri @litmusapp hello@litmus.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×