Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Strategies, Tactics
+ Design Tips
for Mobile Email Success
Justine Jordan
Content, research, marketing
@meladorri @litmusapp
Quick Introduction
Justine has 7+ years of experience
wr...
Mobile Email: Why
Mobile is big, but how big?
Email Opens: August 2013
Mobile:
Smartphones (iPhone, Android) and
tablets
Desktop:
Installed email programs
(Outlook, App...
0%
10%
20%
30%
40%
50%
60%
Desktop Webmail Mobile
45%
33%
10%
Email Opens: 2011-now
Source: Litmus Email Analytics
0%
10%
20%
30%
40%
50%
60%
Desktop Webmail Mobile
45%
33%
10%
Email Opens: 2011-now
Source: Litmus Email Analytics
+350%
some of our major retail brands
are seeing 60% of their subscribers
viewing on a mobile device
—Cara Olson, DEG
“
”
Brand/Industry A: 55% Brand/Industry B: 18%
Plan on data, not your gut
Know Your Audience
Copy, paste
& send
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
80.30%
30.20%
13.50%
3.80%
6.30%
Delete it
Unsubscribe
View on computer
Don't know
Read a...
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
...
From name and subject line are front and center
Focus on „from name‟
and subject line
From Name
~25 characters
Subject Line
~35 characters
Preheader
~85 characters 17
Preheaders Are Tertiary Inbox Content
iPhone Windows Phone
Blackberry
iPhone Windows Phone
Blackberry
Inconsistent
rendering
across devices
and operating
systems
iPhone:
Scales to width;
320 x 460
Android:
No scaling;
dimensions vary;
top-left corner
displayed
Inconsistent
rendering
...
15% two
handed
49% one handed
36% cradled
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-dev...
Prioritize and focus
• Identify the top 3-5 activities
– Purchase?
– Download?
– Registration?
– Social?
NO:
interstitial
boxes
NO:
impossible
form fields
YES:
easy to
navigate
YES:
finger friendly
Mobile Design Principles
aka ‘best practices’
Preheader Practices
• Support the subject line with a
creative, useful or helpful
preheader.
– Call-to-action
– Special of...
Bigger is Better
• Body copy: 16px+
• Headlines: 22px+
• Buttons: 44px by 44px
• Space: 10px+
• Tappable touch targets
• Bulletproof buttons that
don’t rely on an image
• Left-hand side
Say no to link clusters and yes to white space
Device targeting can
display app/OS specific
content
Dial up the contrast
Bright screens
kill batteries
Test, test, test!
Strategies & Approaches
how-to
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...
Pros
• Prioritizes important
data, content, actions
• Easier execution
• No reliance on media query support
• Good renderi...
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
Fluid layout
BEST FOR:
Simple layouts, automated emails, mostly text/few images
Pros
• Simple execution
• No learning curv...
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...
Pros
• Restyle, resize or reorder elements
• Ability to hide/show desktop or mobile
specific images/content
• Customized c...
Email is an *application*
Device ≠ email client
Email is an *application*
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...
• Rewards Network: CTR increased by more than 25%
• Deckers: 10% increase in CTR; 9% increase in mobile
opens
• Crocs: 7.6...
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...
Resources
info + tools
http://stylecampaign.com/blog/2013/03/responsive-email-design-red/
Style Campaign
RED Webinar
Market Share Stats
http://emailclientmarketshare.com
www.litmus.com/blog
Infographics, webinars, articles
Antwort: Responsive Layouts for Email
http://internations.github.io/antwort/
Responsive Email Patterns
http://briangraves.github.io/ResponsiveEmailPatterns/
Responsive Email Tutorial
http://www.netmagazine.com/tutorials/build-responsive-emails
Campaign
Monitor
RED Guide
http://www.campaignmonitor.com/gu
ides/mobile/
Resources
stylecampaign.com/blog
campaignmonitor.com/blog
mailchimp.com/blog
emaildesignreview.com
mobileawesomeness.com
m...
THANKS!
@meladorri
justine@litmus.com
questions?
Strategies, Tactics and Design Tips for Mobile Email Success
Strategies, Tactics and Design Tips for Mobile Email Success
Strategies, Tactics and Design Tips for Mobile Email Success
Strategies, Tactics and Design Tips for Mobile Email Success
Strategies, Tactics and Design Tips for Mobile Email Success
Strategies, Tactics and Design Tips for Mobile Email Success
Próxima SlideShare
Cargando en…5
×

Strategies, Tactics and Design Tips for Mobile Email Success

3.047 visualizaciones

Publicado el

It’s probably a safe bet that the percentage of your subscribers opening your emails on mobile devices is growing — and quite rapidly. Email marketers must account for the fact that we live in an always-connected world, where consumers are using their smartphones to manage their inbox while on the go. Ensure your emails don’t get lost in the mobile shuffle by getting the information you need to optimize your email program for its growing mobile subscriber base.

Topics discussed include how to identify your mobile audience, how to design your emails for optimum user experience across a variety of mobile devices, tips for increasing subscriber engagement with mobile-friendly content, and much more!

Publicado en: Tecnología
  • Sé el primero en comentar

Strategies, Tactics and Design Tips for Mobile Email Success

  1. 1. Strategies, Tactics + Design Tips for Mobile Email Success
  2. 2. Justine Jordan Content, research, marketing @meladorri @litmusapp Quick Introduction Justine has 7+ years of experience writing, designing and coding emails. Previously with ExactTarget. Litmus lets you preview/QA emails before you send and provides detailed post-send analytics.
  3. 3. Mobile Email: Why Mobile is big, but how big?
  4. 4. Email Opens: August 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 32% Webmail 21% Mobile 47% Source: Litmus Email Analytics
  5. 5. 0% 10% 20% 30% 40% 50% 60% Desktop Webmail Mobile 45% 33% 10% Email Opens: 2011-now Source: Litmus Email Analytics
  6. 6. 0% 10% 20% 30% 40% 50% 60% Desktop Webmail Mobile 45% 33% 10% Email Opens: 2011-now Source: Litmus Email Analytics +350%
  7. 7. some of our major retail brands are seeing 60% of their subscribers viewing on a mobile device —Cara Olson, DEG “ ”
  8. 8. Brand/Industry A: 55% Brand/Industry B: 18% Plan on data, not your gut
  9. 9. Know Your Audience Copy, paste & send
  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 80.30% 30.20% 13.50% 3.80% 6.30% Delete it Unsubscribe View on computer Don't know Read anyway BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013 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? +15% +68%
  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. From name and subject line are front and center
  17. 17. Focus on „from name‟ and subject line From Name ~25 characters Subject Line ~35 characters Preheader ~85 characters 17
  18. 18. Preheaders Are Tertiary Inbox Content
  19. 19. iPhone Windows Phone Blackberry
  20. 20. iPhone Windows Phone Blackberry
  21. 21. Inconsistent rendering across devices and operating systems
  22. 22. iPhone: Scales to width; 320 x 460 Android: No scaling; dimensions vary; top-left corner displayed Inconsistent rendering across devices and operating systems
  23. 23. 15% two handed 49% one handed 36% cradled http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php 67% used right thumb on the screen 33% used left thumb on the screen Provide click/tap opportunities
  24. 24. Prioritize and focus • Identify the top 3-5 activities – Purchase? – Download? – Registration? – Social?
  25. 25. NO: interstitial boxes NO: impossible form fields
  26. 26. YES: easy to navigate YES: finger friendly
  27. 27. Mobile Design Principles aka ‘best practices’
  28. 28. Preheader Practices • Support the subject line with a creative, useful or helpful preheader. – Call-to-action – Special offer – Reminder – Clickable/measurable – NOT “having trouble…?”
  29. 29. Bigger is Better • Body copy: 16px+ • Headlines: 22px+ • Buttons: 44px by 44px • Space: 10px+
  30. 30. • Tappable touch targets • Bulletproof buttons that don’t rely on an image • Left-hand side
  31. 31. Say no to link clusters and yes to white space
  32. 32. Device targeting can display app/OS specific content
  33. 33. Dial up the contrast Bright screens kill batteries
  34. 34. Test, test, test!
  35. 35. Strategies & Approaches how-to
  36. 36. As with most things with email, there‟s not a one- size-fits-all approach (sorry to disappoint you)
  37. 37. Mobile First Considers the mobile user as a priority |-------------------460px -------------------| |---------------------600px ---------------------|
  38. 38. 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
  39. 39. Pros • Prioritizes important data, content, actions • Easier execution • No reliance on media query support • Good rendering in apps and native clients Cons • Desktop can suffer • Less real estate • Can get long • Fixed width can be less than ideal for Android Mobile First / Friendly BEST FOR: Ready for change, testing the waters, or resource strapped
  40. 40. Fluid Email width changes to fit within the window |--------------------------------------------------------1166px---------------------------------------------------| |-----------------------------525px --------------------------|
  41. 41. Fluid layout • Percentage- based widths • Adapts to fill the screen it’s viewed on; text wraps automatically
  42. 42. Fluid layout BEST FOR: Simple layouts, automated emails, mostly text/few images Pros • Simple execution • No learning curve or reliance on media queries Cons • Fewer design choices • Very narrow or very wide emails can get awkward and hard to read
  43. 43. Responsive Design Uses media queries to detect screen size and alter content accordingly |-----------320px ------------||--------------------------------------------700px------------------------------------------ |
  44. 44. 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
  45. 45. Pros • Restyle, resize or reorder elements • Ability to hide/show desktop or mobile specific images/content • Customized calls to action • Seamless experience across a range of screen sizes Cons • Coding learning curve • Forces tough choices • Increased production and QA time Responsive Design BEST FOR: Growing mobile audiences, travel alerts, tech companies
  46. 46. Email is an *application*
  47. 47. Device ≠ email client Email is an *application*
  48. 48. 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
  49. 49. • 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 Responsive Results
  50. 50. 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
  51. 51. 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
  52. 52. 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”
  53. 53. Windows Phone Observations • Mixed media query support • Does weird things to fonts • Blocks images; no ALT text • No one has them!
  54. 54. iPhone Observations • Automatically scales messages to fit the screen • Excellent support for CSS3 and media queries • Images on by default • Resizes fonts under 13px
  55. 55. Resources info + tools
  56. 56. http://stylecampaign.com/blog/2013/03/responsive-email-design-red/ Style Campaign RED Webinar
  57. 57. Market Share Stats http://emailclientmarketshare.com
  58. 58. www.litmus.com/blog Infographics, webinars, articles
  59. 59. Antwort: Responsive Layouts for Email http://internations.github.io/antwort/
  60. 60. Responsive Email Patterns http://briangraves.github.io/ResponsiveEmailPatterns/
  61. 61. Responsive Email Tutorial http://www.netmagazine.com/tutorials/build-responsive-emails
  62. 62. Campaign Monitor RED Guide http://www.campaignmonitor.com/gu ides/mobile/
  63. 63. Resources 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 https://litmus.com/blog/our-favorite-responsive-and-mobile-email-resources
  64. 64. THANKS! @meladorri justine@litmus.com questions?

×