Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Similar a Mobile Email: Why, What, How
Similar a Mobile Email: Why, What, How (20)
Más de Litmus
Más de Litmus (20)
Último
Último (20)
Mobile Email: Why, What, How
- 2. Quick introduction… Justine Jordan Content, research, marketing @meladorri @litmusapp #litmuschat
- 3. Mobile Email: Why Mobile is big, but how big?
- 4. 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
- 5. Email Opens: 2011-now 60% 43% 50% 33% 40% 30% 20% 10% 10% 0% Desktop Webmail Mobile #litmuschat
- 6. +330% +115% since 2011 last 18 months +38% last 12 months #litmuschat
- 7. 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
- 8. 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
- 9. Know Your Audience Copy, paste & send #litmuschat
- 10. “ some of our major retail brands are seeing 60% of their subscribers viewing on a mobile device ” —Cara Olson, Digital Evolution Group #litmuschat
- 11. 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” wide 2.3” wide 2.6” wide Small Medium Large #litmuschat
- 12. 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
- 13. The unifying characteristic? TOUCH. 13 #litmuschat
- 14. Results Test and share for the common good!
- 15. • 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 Responsive web results: http://www.lukew.com/ff/entry.asp?1691 #litmuschat
- 16. Experience Matters It’s more than just metrics
- 17. 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% Don't 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
- 18. Mobile Triage Myth 3% reopen on another client 97% view in a single environment
- 19. From and Subject Front and Center From Name ~25 characters Subject Line ~35 characters Preheader ~85 characters 19
- 20. Preheaders Are Tertiary Inbox Content
- 22. Inconsistent rendering across devices and operating Android: iPhone: systems No scaling; Scales to width; dimensions vary; 320 x 460 top-left corner displayed
- 25. 49% one handed 36% cradled 67% used right thumb on the screen 33% used left thumb on the screen 15% two handed http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
- 26. Only 10% used their phones in landscape mode http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
- 27. Strategies & Approaches This is the “how” part!
- 28. As with most things with email, there’s not a one-size- fits-all approach (sorry to disappoint you)
- 30. 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
- 32. 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
- 34. 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
- 35. 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/
- 36. 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
- 37. 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
- 38. Device Targeting Device-specific content served at time of open Relies on images enabled Source: Movable Ink
- 39. Best For Link to specific app store, localization, timers 39
- 40. Examples! See them on the blog: https://litmus.com/blog/webinar-mobile-email-strategies-approaches
- 41. Scalable + Responsive Text + Device Targeting?
- 42. “ Design for one thumb and one eyeball ” —@lukew … and 2,034,789 devices and clients … #litmuschat
- 43. Display and Support Challenges OS Preview text @media Images on Alt text Scale Android 4.x Email ✗ ✓ ✗ ✓ ✗ Android Gmail ✗ ✗ ✗ ✓ ✓* Blackberry Z10 ✗ ✓ ✗ ✓ ✗ iOS 6.x ✓ ✓ ✓ -- ✓ Windows Phone 7.5 ✓ ✓ ✗ ✗ ✓ * Android Gmail scaling is an optional setting on 4.2
- 44. iPhone Windows Phone Blackberry
- 45. iPhone Windows Phone Blackberry
- 46. Mobile Email Design Principles “Best practices,” if you will…
- 47. • Support the subject line with a creative, useful or helpful preheader. – Call-to-action – Special offer – Reminder – Clickable/measurable – NOT “having trouble…?”
- 48. Bigger is Better • Body copy: 16px+ • Headlines: 22px+ • Buttons: 44px by 44px • Space: 10px+
- 50. • Optimize the left-hand side for Android. • Pertinent information • Call-to-action • Links http://stylecampaign.com/blog/2012/08/12-android-preview-pane-tips/ http://stylecampaign.com/blog/2012/08/android-grid-of-grim/
- 52. • Tappable touch targets • Bulletproof buttons that don’t rely on an image • Left-hand side
- 53. Mobile advantages • Click to call • Force app to download on mobile page • CSS3 goodies
- 56. Mobile email testing with Litmus
- 57. 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
- 60. Antwort: Responsive Layouts for Email http://internations.github.io/antwort/
- 61. Zurb: Responsive Email Templates http://www.zurb.com/article/ 1119/create-emails-for-any- device-introducing- *not compatible with Outlook 2007+
- 63. Campaign Monitor RED Guide http://www.campaignmonitor.com/g uides/mobile/
- 64. Resources litmus.com/blog Media Post Email Insider columns stylecampaign.com/blog A List Apart / A Book Apart campaignmonitor.com/blog Ethan Marcotte blog.mailchimp.com Luke Wroblewski emaildesignreview.com Twitter community mobileawesomeness.com mediaqueri.es
- 65. Litmus Premium Trial: 14 Days Visit litmus.com/giftcard Enter coupon code MOBILE13
- 66. Get in touch Justine Jordan @meladorri @litmusapp hello@litmus.com
Notas del editor
- 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.