The Mobile Experience Through Email
4 likes1,474 views
The document discusses mobile email design trends from a meetup in Toronto, highlighting the significant increase in mobile email opens and the need for thoughtful mobile user experience design. It outlines key considerations for mobile email layout, including single-column formats, large text sizes, and appropriate button placement for touch interfaces. The document also explores responsive design techniques that adapt email layouts for various screen sizes and environments.
The Mobile Experience Through Email
- 1. Designing and coding for the mobile inbox eCommerce Toronto Meet Up June 2013
- 2. Mobile: rapid adoption http://www.returnpath.com/resource/email-mostly-mobile/ October 2010-October 2012 shows 300% increase in mobile opens
- 3. Averages across all customers. Data Source: Litmus 12/2012 – emailclientmarketshare.com Mobile: large market share of opens Email Client Usage iPhone 24% Outlook 16% iPad 11% Apple Mail 10% Live Hotmail 7% Google Android 7% Yahoo! Mail 7% Gmail 4% Windows Live Mail 3% Yahoo! Mail Classic 1% Top 10 Email Clients 42% Mobile
- 4. Mobile: possibly a barrier to clicking 46% 52% 2% 30% 66% 4% 0% 10% 20% 30% 40% 50% 60% 70% Mobile Desktop Multiple OPENS OPENS CLICKS CLICKS 46% of opens are mobile, but only 30% of clicks High volume retail brand – name suppressed
- 6. Design = communication. Good design allows your subscribers to interact with your emails in their preferred format.
- 7. How do customers use mobile devices?
- 8. The Mobile Subscriber Is she: Listening to music Texting Using Skype Watching a movie On a phone call Checking email Browsing a website Tweeting Watching TV All media consumption through one device - high expectations are set for email viewing.
- 9. The mobile experience is interactive. Emails are viewed in stages. From Name Subject Line Preheader Viewport Scrolling view
- 11. From Name Approx. 25 characters Subject Line Approx. 35 characters Preheader Approx. 85 characters
- 12. From Name Subject Line Preheader Viewport Scrolling view Approx 320x480px
- 13. Notification Options From Name Subject Line Preheader Viewport Scrolling view Notification
- 15. What’s Different About Designing for Mobile Devices? Small Screens & Touch Interfaces
- 16. Small Screens: Ideal State • Content first: think top-down hierarchy • Single column layout • Large text sizes to ensure readability • Use contrast to ensure readability across brightness levels. • Don’t cram content into the viewport - honor legibility over length
- 17. Touch Interfaces: Ideal State • Size: keep buttons least 44px square for easy tapping • Position: Keep links/buttons to the center or left for ease of use • Texture: buttons look more enticing with texture • Space: separate links to avoid touching two links • Avoid: hovers or other interactive user interface elements • Never say: “click here” because 43% of openers are tapping!
- 18. Touch Interfaces: Inspiration Look to App design for inspiration! http://www.mobile-patterns.com
- 19. Solutions
- 20. Two Approaches to the Mobile Inbox Aware Simple improvement without specialization. Design-only tactics Responsive Deliver a customized mobile experience. Special design + code 1 2
- 21. Desktop- centric Mobile aware Responsive code Poor experience Good experience Excellent experience
- 22. Approaching the Mobile Inbox Establish a mobile-friendly visual framework without specializing. • Single column hero • Key info & CTA in left column • Large text & buttons Mobile Aware1
- 23. Mobile aware: planning the mobile experience without a specialized setup. Highlights: single column hero, big images, text & buttons.
- 24. Product-focus, Modular design – scales nicely to iphone
- 25. Mobile Aware Design Considerations for iPhone • Scales Messages down – Keep text large for legibility – Use a one-column format – Keep buttons extra large to be tappable when shrunk – Use preheader text for pre-open visibility iPhone: 24% of email opens
- 26. Widths: Designing for iPhone scaling Wider email scale smaller – keep a narrower format, but keep in mind desktop viewing. 600px desktop is still standard. 450px600px700px
- 27. Widths: Designing for desktop 450px600px700px Wider email scale smaller – keep a narrower format, but keep in mind desktop viewing. 600px desktop is still standard.
- 28. Mobile Aware Design Considerations for Android • Cuts the message off – Focus on left side for important content – Keep buttons on left • Blocks images by default – Use styled alt text behind images – Use background colors to create interest – Use rendering text to communicate message without images – Use preheader text for both pre-open view and image-blocking view Android: 7% of email opens (but 54% of operating system market share*) *comScore
- 29. Approaching the Mobile Inbox Photo: http://en.wikipedia.org/wiki/Responsive_web_design Responsive Design2 Responsive web design is a set of techniques used to make a layout readable and usable on any screen and/or platform on which it’s displayed. • Fluid grids • Fluid images • Media queries
- 30. Responsive Email: Overview The CSS3 @media query activates alternate styles based on general viewing environment, allowing simple change & adaptation. • Detects screen size (px) – small (mobile) vs. large (non-mobile) • Falls back to standard version when @media isn’t supported
- 31. If screen size is 480px or smaller, use this set of styles Your email code @media screen and (max-width: 480px)
- 32. Desktop ~760px Mobile ~300px
- 34. Shrink Wrap Column Drop Layout Shifter http://www.lukew.com/ff/entry.asp?1514 3 Common Responsive Layout Approaches
- 35. Layout Pattern 1: Shrink Wrap http://www.lukew.com/ff/entry.asp?1514 • Msg width shrinks • Text scales up • Text reflows • Elements scale
- 37. Layout Pattern 2: Column Drop via luke w. • Multi to single column • Multi column elements shrink • Single column elements retain size http://www.lukew.com/ff/entry.asp?1514
- 40. • Layout reshapes • Most significant content transitions • Nav may disappear http://www.lukew.com/ff/entry.asp?1514 Layout Pattern 2: Layout Shifter via luke w.
- 43. • Label hierarchy 1,2,3,4 • Decide if any content is suppressed/replaced: Green means it stays, red means it is hidden Step 1: Content Strategy 1 2 3
- 44. Small Screen Oath: Brad Frost Responsive web leader/publisher “Don’t penalize users for visiting your site on smaller devices.”
- 45. Use high level content and low-fi graphics to communicate content strategy for mobile screens. Use photoshop, Illustrator, wireframing software like balsamiq, or just pen and paper Step 2: Wireframe Mobile
- 46. Decide how content should expand on desktop views. 5 common tactics: • Stack • Hide • Show • Resize • Restyle Step 2: Wireframe Desktop
- 47. Code the wireframe into an HTML-based prototype to show functionality. Step 2.5: Live Prototype
- 48. Step 3: Visual Design Start with a Pattern Library of repeatable brand elements.
- 49. 600px wide 320px wide Step 3: Visual Design
- 50. • Are both views on brand? • Does it align with the content strategy/wireframe? • Is this a sustainable format to follow for future emails? Visual Design Check
- 51. • Design so that it can be coded in an adaptable way - avoiding too many areas to hide/show • Avoid carryover print design habits – image-heavy non-essentials • Hidden items still load, adding to file size • Large file size = slow load time = Visual Design Check: File Size
- 52. Step 4: Code CSS is activated at 480px and smaller Sidebar drops below the left column Container shrinks to 300px wide Padding is added Images resize to 100% Text scales up, more padding is added, classes are assigned to containers in the code below
- 53. BEFORE AFTER
- 54. Step 5: QA Use software to test email rendering, like Litmus or Return Path But nothing beats firsthand testing – borrow a friend’s iPhone or Android.
- 55. Phone, Tablet or Laptop? The line between device types are blurring: focus on breakpoints that work for your layout and can accommodate multiple devices. Samsung Galaxy Note II Width: 3.17’’ Width: 2.31’’ iPhone 5 Width: 4.72’’ Google Nexus Width: 7.31’’ iPad Width: 10.81’’ Surface Under 480px Over 480px 480px is a common breakpoint today
- 56. SUPPORT
- 57. @media support Media queries are well supported 98.5% of mobile opens occur in environments supporting @media 1.5% of mobile opens occur in environments which do not support @media Data Source: ExactTarget primary research using Litmus dataset Approximately 42% of all opens are mobile 98% of mobile opens occur via a native email app 2% of mobile opens occur via a non-native email app or mobile browser Mobile market share is significant Most opens come from native email apps
- 58. @MEDIA SUPPORT Mobile Email Client @media Support iPhone Mail Yes iPad Mail Yes iPod Touch Mail Yes Android Mail 2.1- 1 No Android Mail 2.2+ 1 Yes 2 Windows Phone 8 No BlackBerry 6 No Yahoo App (A&i) No Hotmail App (A) Yes Gmail App (A&i) No AOL App n/a Gmail via Mobile Browser No Yahoo via Mobile Browser No Hotmail via Mobile Browser No AOL via Mobile Browser Yes Data source: ExactTarget primary research 1 See Google’s Android Platform Distribution site for current stats on platform distribution 2 Mail routed through an Outlook Exchange server may see different results @media Support Chart @media support is based on operating system and application (software), not device (hardware)—just as we might discuss support for CSS on desktop email clients. SinglePlatformCross-Platform
- 59. Choosing an Approach Aware Benefits: • Only design changes needed • Easy to implement quickly and incrementally • Compatible with a template-based approach Responsive Benefits: • The best legibility on mobile devices (biggest gains for Android) • Adopting a flexible framework allows for dynamic content 1 2