Quick introduction…      Justine Jordan      Content, research, marketing        @meladorri @litmusapp                    ...
Mobile Email: WhyMobile is big, but how big?
Email Opens: March 2013                          Mobile:                          Smartphones (iPhone, Android) and tablet...
Email Opens: 2011-now60%                                              43%50%                               33%40%30%20%   ...
+330%                +115% since 2011            last 18 months         +38%          last 12 months                      ...
Mobile Market Share     Other                                                                  Smartphone OS Share      1%...
Know Your Audience                     What percentage of customers/prospects                     interact with your organ...
Know Your Audience                     Copy, paste                       & send                                   #litmusc...
“ some of our major retail brandsare seeing 60% of their subscribers    viewing on a mobile device ”                    —C...
Screensize-apalooza                                                  Excite 13                                            ...
Android Screen Sizes & Densities                       ldpi             mdpi               hdpi     xhdpi   small         ...
The unifying characteristic?TOUCH.                               13   #litmuschat
ResultsTest 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.66%...
Experience MattersIt’s more than just metrics
One Chance to Make an Impression                                                                                        Ho...
Mobile Triage Myth3%reopen on another  client            97%            view in a single             environment
From and Subject Front and Center From Name ~25 characters Subject Line ~35 characters Preheader ~85 characters           ...
Preheaders Are Tertiary Inbox Content
Inconsistentrenderingacross devicesand operatingsystems
Inconsistentrenderingacross devicesand operating                     Android:           iPhone:systems                    ...
NO:interstitialboxesNO:impossibleform fields               23
YES:easy tonavigateYES:finger friendly                  24
49% one handed   36% cradled                            67% used right thumb on the screen                             33%...
Only 10% used their phones in landscape mode                  http://www.uxmatters.com/mt/archives/2013/02/how-do-users-re...
Strategies & ApproachesThis is the “how” part!
As with mostthings withemail, there’snot a one-size-fits-allapproach(sorry to disappoint you)
Agnostic/Scalable/Aware• One layout for all screen sizes• Single column design                                        Best...
Fluid Design/Layout • Use percentages for   widths • Adapts to fill the screen         Best For   it‟s viewed on; text wra...
Responsive Design • Uses media queries or @media with fluid elements • Not a “line of code”, more like a conditional state...
Media queries are not universally supported.Notable detractors:• Android Gmail• Windows Phone                             ...
Adaptive Design • Typically used interchangeably with “responsive” • Most designs that we call responsive are really adapt...
Writing a media query• Start simple: try resizing fonts, scaling images, hiding content or  changing context• Screen size ...
Device TargetingDevice-specificcontent servedat time of openRelies onimagesenabled                   Source: Movable Ink
Best For   Link to specific appstore, localization, timers          39
Examples!See them on the blog:https://litmus.com/blog/webinar-mobile-email-strategies-approaches
Scalable +ResponsiveText + DeviceTargeting?
“ Design for one thumb and one eyeball ”                                     —@lukew  … and 2,034,789 devices and clients ...
Display and Support ChallengesOS                  Preview text   @media    Images on           Alt text             ScaleA...
iPhone   Windows Phone                         Blackberry
iPhone   Windows Phone                         Blackberry
Mobile Email DesignPrinciples“Best practices,” if you will…
• Support the subject line with  a creative, useful or helpful  preheader.   –   Call-to-action   –   Special offer   –   ...
Bigger is Better •   Body copy: 16px+ •   Headlines: 22px+ •   Buttons: 44px by 44px •   Space: 10px+
• Optimize the left-hand  side for Android.   • Pertinent      information   • Call-to-action   • Linkshttp://stylecampaig...
• Tappable touch targets• Bulletproof buttons that don’t rely  on an image• Left-hand side
Mobile advantages• Click to call• Force app to download  on mobile page• CSS3 goodies
Test, test, test!
Mobile email testing with Litmus
One Thumb/One Eyeball• 39% of smartphone admit to being on their mobiles in the bathroom (the  other 61% are liars!)• The ...
ResourcesInfo + tools
Market Share Statshttp://emailclientmarketshare.com
Antwort: Responsive Layouts for Emailhttp://internations.github.io/antwort/
Zurb: Responsive Email Templateshttp://www.zurb.com/article/1119/create-emails-for-any-    device-introducing-   *not comp...
Responsive Email Tutorialhttp://www.netmagazine.com/tutorials/build-responsive-emails
Campaign Monitor       RED Guidehttp://www.campaignmonitor.com/g           uides/mobile/
Resourceslitmus.com/blog            Media Post Email Insider columnsstylecampaign.com/blog     A List Apart / A Book Apart...
Litmus Premium Trial: 14 Days                           Visit litmus.com/giftcard                           Enter coupon c...
Get in touch       Justine Jordan        @meladorri @litmusapp              hello@litmus.com
Mobile Email: Why, What, How
Mobile Email: Why, What, How
Mobile Email: Why, What, How
Mobile Email: Why, What, How
Mobile Email: Why, What, How
Mobile Email: Why, What, How
Mobile Email: Why, What, How
Upcoming SlideShare
Loading in...5
×

Mobile Email: Why, What, How

10,916

Published on

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

No Downloads
Views
Total Views
10,916
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide
  • It’s your BRAND in someone’s inbox… Data is important, but so is design.
  • Support the subject line with a creative, useful or helpful preheader (NOT “having trouble…?”)Call-to-actionSpecial offerReminderClickable/measurable
  • After the from/subject/preheader, you get the open.The preview pane still counts, but has a different form factor
  • After the from/subject/preheader, you get the open.The preview pane still counts, but has a different form factor
  • One-handed use seems to be highly correlated with users’ simultaneously performing other tasks. Many of those using one hand to hold their phone were carrying out other tasks such as carrying bags, steadying themselves when in transit, climbing stairs, opening doors, holding babies, and so on.Left handedness in the general population: 10%
  • One-handed use seems to be highly correlated with users’ simultaneously performing other tasks. Many of those using one hand to hold their phone were carrying out other tasks such as carrying bags, steadying themselves when in transit, climbing stairs, opening doors, holding babies, and so on.
  • Advantages: You create a “one and done” template for your email that you can send to all subscribers without needing complicated coding to make sure it renders correctly on different screen sizes as well as in portrait (vertical) and landscape mode on phones and tablets. “We found that a screen-agnostic approach did not depend on technology to render the correct version,” says Brian Brown of ideapark, a Silverpop agency partner. “We also found the code base was a little lighter, and the workflow was simplified.” Disadvantages: Focusing on simple and big can make complex emails with multiple elements more challenging. It also sacrifices functionality, such as two-column layouts. As scalable layouts are fixed-width — be itskinny or not — they work well for iOS since content is automatically scaled to the screen width, but are not optimal for other platforms like Android.
  • Fairly easy to implementFew rendering issuesVery small and very large screens can be hard to read
  • 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.
  • 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.
  • Watch file size; use for key elements rather than the entire layout.
  • Snapshot of the challenges and diversity of devicesNokia Remote Device Access is a great way to experience Symbian first hand.
  • Really long subject lines can enhance… or distract.
  • Really long subject lines can enhance… or distract.
  • Mobile Email: Why, What, How

    1. 1. Quick introduction… Justine Jordan Content, research, marketing @meladorri @litmusapp #litmuschat
    2. 2. Mobile Email: WhyMobile is big, but how big?
    3. 3. Email Opens: March 2013 Mobile: Smartphones (iPhone, Android) and tablets Desktop Desktop: 32% Installed email programs (Outlook, Apple Mobile Mail) 43% Webmail: Email accessed through a web browser Webmail (Gmail, Hotmail, Yahoo!) 25% Source: Litmus Email Analytics #litmuschat
    4. 4. Email Opens: 2011-now60% 43%50% 33%40%30%20% 10%10%0% Desktop Webmail Mobile #litmuschat
    5. 5. +330% +115% since 2011 last 18 months +38% last 12 months #litmuschat
    6. 6. Mobile Market Share Other Smartphone OS Share 1% 0.4% Others 1.7% Symbian 0.6% 1.2% iPad Microsoft 2.9% 27% 3.0% Blackberry 6.4% iPhone 3.5% 56% iOS 36.3% Android 20.9% 53.4% 16% Android 69.7% 0% 20% 40% 60% 80% Mobile Email Opens US Worldwide Source: Litmus Email Analytics Sources: ComScore (US); Gartner (Worldwide) #litmuschat
    7. 7. Know Your Audience What percentage of customers/prospects interact with your organization’s mobile email messages? • 31% of marketers don‟t know their mobile email open rate • 33% don‟t know their mobile click rate #litmuschat
    8. 8. Know Your Audience Copy, paste & send #litmuschat
    9. 9. “ some of our major retail brandsare seeing 60% of their subscribers viewing on a mobile device ” —Cara Olson, Digital Evolution Group #litmuschat
    10. 10. Screensize-apalooza Excite 13 Nexus 7 8.5” wide iPad Mini 7.3” wide Galaxy Note II 5.3” wide iPhone BB Bold 3.2” wide2.3” wide 2.6” wide Small Medium Large #litmuschat
    11. 11. Android Screen Sizes & Densities ldpi mdpi hdpi xhdpi small 1.7% 1% normal 0.4% 11% 50.1% 25.1% large 0.1% 2.4% 3.6% xlarge 4.6% Source: http://developer.android.com/about/dashboards/index.html #litmuschat
    12. 12. The unifying characteristic?TOUCH. 13 #litmuschat
    13. 13. ResultsTest and share for the common good!
    14. 14. • 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 desktopResponsive web results: http://www.lukew.com/ff/entry.asp?1691 #litmuschat
    15. 15. Experience MattersIt’s more than just metrics
    16. 16. One Chance to Make an Impression How does a poorly designed email affect your perception of the brand? File it 3.50% Read anyway 7.60% Dont know 9.40% Strongly Neutral Negative 24.60%View on computer 17.70% 24.10% Unsubscribe 18% Delete it 69.70% Slightly Negative 51.30% If you get a mobile email that doesn‟t look good, what do you do? BlueHornet Study: Consumer Views of Email Marketing #litmuschat
    17. 17. Mobile Triage Myth3%reopen on another client 97% view in a single environment
    18. 18. From and Subject Front and Center From Name ~25 characters Subject Line ~35 characters Preheader ~85 characters 19
    19. 19. Preheaders Are Tertiary Inbox Content
    20. 20. Inconsistentrenderingacross devicesand operatingsystems
    21. 21. Inconsistentrenderingacross devicesand operating Android: iPhone:systems No scaling; Scales to width; dimensions vary; 320 x 460 top-left corner displayed
    22. 22. NO:interstitialboxesNO:impossibleform fields 23
    23. 23. YES:easy tonavigateYES:finger friendly 24
    24. 24. 49% one handed 36% cradled 67% used right thumb on the screen 33% used left thumb on the screen15% two handed http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
    25. 25. Only 10% used their phones in landscape mode http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
    26. 26. Strategies & ApproachesThis is the “how” part!
    27. 27. As with mostthings withemail, there’snot a one-size-fits-allapproach(sorry to disappoint you)
    28. 28. Agnostic/Scalable/Aware• One layout for all screen sizes• Single column design Best For – 320-500px• Large text & buttons When you’re• Generous white space ready for change, but don’t• Clear calls to action have tons of• Short, concise body copy resources
    29. 29. Fluid Design/Layout • Use percentages for widths • Adapts to fill the screen Best For it‟s viewed on; text wraps automatically Lots of text and • Most effective for simple just a few images; layouts automated campaigns
    30. 30. Responsive Design • Uses media queries or @media with fluid elements • Not a “line of code”, more like a conditional statement that enables alternate 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 of the device being read on and enables alternate styles accordingly
    31. 31. Media queries are not universally supported.Notable detractors:• Android Gmail• Windows Phone Best For Heavy mobile audiences; travel alerts; mobile app; tech companies Source: http://stylecampaign.com/blog/2012/10/responsive-email-support/
    32. 32. Adaptive Design • Typically used interchangeably with “responsive” • Most designs that we call responsive are really adaptive • Instead of utilizing fluid grids and images, the media query is relied upon to display a desktop “state” and a mobile “state” of the email • Not always two separate versions, although this is possible
    33. 33. Writing a media query• Start simple: try resizing fonts, scaling images, hiding content or changing context• Screen size vs. viewport• Max-width vs. Max-device-width
    34. 34. Device TargetingDevice-specificcontent servedat time of openRelies onimagesenabled Source: Movable Ink
    35. 35. Best For Link to specific appstore, localization, timers 39
    36. 36. Examples!See them on the blog:https://litmus.com/blog/webinar-mobile-email-strategies-approaches
    37. 37. Scalable +ResponsiveText + DeviceTargeting?
    38. 38. “ Design for one thumb and one eyeball ” —@lukew … and 2,034,789 devices and clients … #litmuschat
    39. 39. Display and Support ChallengesOS Preview text @media Images on Alt text ScaleAndroid 4.x Email ✗ ✓ ✗ ✓ ✗Android Gmail ✗ ✗ ✗ ✓ ✓*Blackberry Z10 ✗ ✓ ✗ ✓ ✗iOS 6.x ✓ ✓ ✓ -- ✓Windows Phone 7.5 ✓ ✓ ✗ ✗ ✓ * Android Gmail scaling is an optional setting on 4.2
    40. 40. iPhone Windows Phone Blackberry
    41. 41. iPhone Windows Phone Blackberry
    42. 42. Mobile Email DesignPrinciples“Best practices,” if you will…
    43. 43. • Support the subject line with a creative, useful or helpful preheader. – Call-to-action – Special offer – Reminder – Clickable/measurable – NOT “having trouble…?”
    44. 44. Bigger is Better • Body copy: 16px+ • Headlines: 22px+ • Buttons: 44px by 44px • Space: 10px+
    45. 45. • Optimize the left-hand side for Android. • Pertinent information • Call-to-action • Linkshttp://stylecampaign.com/blog/2012/08/12-android-preview-pane-tips/ http://stylecampaign.com/blog/2012/08/android-grid-of-grim/
    46. 46. • Tappable touch targets• Bulletproof buttons that don’t rely on an image• Left-hand side
    47. 47. Mobile advantages• Click to call• Force app to download on mobile page• CSS3 goodies
    48. 48. Test, test, test!
    49. 49. Mobile email testing with Litmus
    50. 50. One Thumb/One Eyeball• 39% of smartphone admit to being on their mobiles in the bathroom (the other 61% are liars!)• The average person looks at their phone 150 times a day. Most of these are brief interactions lasting a few minutes at best.• Context switch, hierarchy switch• Don‟t say “click” – device specific copy yields 9-24% increase in CTR• Do mobile users respond better to different types of content? – Inherent dilemma, dirty the testing waters• Legibility
    51. 51. ResourcesInfo + tools
    52. 52. Market Share Statshttp://emailclientmarketshare.com
    53. 53. Antwort: Responsive Layouts for Emailhttp://internations.github.io/antwort/
    54. 54. Zurb: Responsive Email Templateshttp://www.zurb.com/article/1119/create-emails-for-any- device-introducing- *not compatible with Outlook 2007+
    55. 55. Responsive Email Tutorialhttp://www.netmagazine.com/tutorials/build-responsive-emails
    56. 56. Campaign Monitor RED Guidehttp://www.campaignmonitor.com/g uides/mobile/
    57. 57. Resourceslitmus.com/blog Media Post Email Insider columnsstylecampaign.com/blog A List Apart / A Book Apartcampaignmonitor.com/blog Ethan Marcotteblog.mailchimp.com Luke Wroblewskiemaildesignreview.com Twitter communitymobileawesomeness.commediaqueri.es
    58. 58. Litmus Premium Trial: 14 Days Visit litmus.com/giftcard Enter coupon code MOBILE13
    59. 59. Get in touch Justine Jordan @meladorri @litmusapp hello@litmus.com

    ×