Your SlideShare is downloading. ×
Mobile Email: Why, What, How
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile Email: Why, What, How

10,759
views

Published on

Published in: Design, Technology, Business

0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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.
  • Transcript

    • 1. Quick introduction… Justine Jordan Content, research, marketing @meladorri @litmusapp #litmuschat
    • 2. Mobile Email: WhyMobile is big, but how big?
    • 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. Email Opens: 2011-now60% 43%50% 33%40%30%20% 10%10%0% Desktop Webmail Mobile #litmuschat
    • 5. +330% +115% since 2011 last 18 months +38% last 12 months #litmuschat
    • 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. 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. Know Your Audience Copy, paste & send #litmuschat
    • 9. “ some of our major retail brandsare seeing 60% of their subscribers viewing on a mobile device ” —Cara Olson, Digital Evolution Group #litmuschat
    • 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. 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. The unifying characteristic?TOUCH. 13 #litmuschat
    • 13. ResultsTest and share for the common good!
    • 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. Experience MattersIt’s more than just metrics
    • 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. Mobile Triage Myth3%reopen on another client 97% view in a single environment
    • 18. From and Subject Front and Center From Name ~25 characters Subject Line ~35 characters Preheader ~85 characters 19
    • 19. Preheaders Are Tertiary Inbox Content
    • 20. Inconsistentrenderingacross devicesand operatingsystems
    • 21. Inconsistentrenderingacross devicesand operating Android: iPhone:systems No scaling; Scales to width; dimensions vary; 320 x 460 top-left corner displayed
    • 22. NO:interstitialboxesNO:impossibleform fields 23
    • 23. YES:easy tonavigateYES:finger friendly 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. 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. Strategies & ApproachesThis is the “how” part!
    • 27. As with mostthings withemail, there’snot a one-size-fits-allapproach(sorry to disappoint you)
    • 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. 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. 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. 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. 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. 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. Device TargetingDevice-specificcontent servedat time of openRelies onimagesenabled Source: Movable Ink
    • 35. Best For Link to specific appstore, localization, timers 39
    • 36. Examples!See them on the blog:https://litmus.com/blog/webinar-mobile-email-strategies-approaches
    • 37. Scalable +ResponsiveText + DeviceTargeting?
    • 38. “ Design for one thumb and one eyeball ” —@lukew … and 2,034,789 devices and clients … #litmuschat
    • 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. iPhone Windows Phone Blackberry
    • 41. iPhone Windows Phone Blackberry
    • 42. Mobile Email DesignPrinciples“Best practices,” if you will…
    • 43. • Support the subject line with a creative, useful or helpful preheader. – Call-to-action – Special offer – Reminder – Clickable/measurable – NOT “having trouble…?”
    • 44. Bigger is Better • Body copy: 16px+ • Headlines: 22px+ • Buttons: 44px by 44px • Space: 10px+
    • 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. • Tappable touch targets• Bulletproof buttons that don’t rely on an image• Left-hand side
    • 47. Mobile advantages• Click to call• Force app to download on mobile page• CSS3 goodies
    • 48. Test, test, test!
    • 49. Mobile email testing with Litmus
    • 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. ResourcesInfo + tools
    • 52. Market Share Statshttp://emailclientmarketshare.com
    • 53. Antwort: Responsive Layouts for Emailhttp://internations.github.io/antwort/
    • 54. Zurb: Responsive Email Templateshttp://www.zurb.com/article/1119/create-emails-for-any- device-introducing- *not compatible with Outlook 2007+
    • 55. Responsive Email Tutorialhttp://www.netmagazine.com/tutorials/build-responsive-emails
    • 56. Campaign Monitor RED Guidehttp://www.campaignmonitor.com/g uides/mobile/
    • 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. Litmus Premium Trial: 14 Days Visit litmus.com/giftcard Enter coupon code MOBILE13
    • 59. Get in touch Justine Jordan @meladorri @litmusapp hello@litmus.com

    ×