Mobile Email: Why, What, How

11,929 views

Published on

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

No Downloads
Views
Total views
11,929
On SlideShare
0
From Embeds
0
Number of Embeds
4,436
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

    ×