3sixty Live Boston: Designing for the Mobile Inbox


Published on

Optimizing emails for the mobile experience is one of the top subjects that interactive marketers are talking about these days. In the June 3sixty Live Boston meeting, we feature this very popular topic and helped shed some light on all the terms you've been hearing.

Justine Jordan, Research & Education Director at Litmus, and Kristina Huffman, Design Practice Lead at ExactTarget, teamed up for an interactive presentation that enabled attendees with ideas and practical take-aways for creating mobile optimized emails.

Published in: Technology
1 Comment
  • Thanks for sharing these slides...One thing: Outlook has a good chunk of the market share, as highlighted in your presentation, but your proposal for a responsive email template doesn't mention the lack of support in Outlook for percentage based widths. Thoughts?
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

3sixty Live Boston: Designing for the Mobile Inbox

  1. 1. 3sixty Live BostonDesigning for the Mobile InboxJune 18, 2013
  2. 2. Kristina HuffmanDesign Practice LeadExactTarget@krudzJustine JordanResearch & EducationLitmus@meladorri
  3. 3. Current State
  4. 4. Email ClientMarket ShareMay 20131 Apple iPhone 23%2 Outlook 20%3 Apple iPad 9%4 Outlook.com 9%5 Apple Mail 8%6 Google Android 7%7 Gmail 5%8 Yahoo! Mail 4%9 Windows Live Mail 3%10 Thunderbird 2%
  5. 5. 0%10%20%30%40%50%60%70%Opens in Each EnvironmentWebmail Desktop MobileThe last 28 months42%33%10%
  6. 6. Path to Conversion
  7. 7. A Poor Mobile Experience limits Conversion
  8. 8. What can we do about it?1. Audience discovery: where are your subscribers opening?2. Choose the path that’s right for both your team and your subscribers3. Execute, test, tweak
  9. 9. 1. Audience Discovery: Plan on data, not your gutYour audience is the most important oneHow mobile are your customers?Brand/Industry A: 55% Brand/Industry B: 18%
  10. 10. 2. Decision Points: which path is best for us?1. Resources2. Data3. Company type4. User expectationsCompany A1. Resources: coders, designers, writer2. Data: 29% mobile3. Company type: Tech4. User expectations: B2B Tech audienceResponsiveCompany B1. Resources: marketing manager, intern2. Data: 36% mobile3. Company type: Non-Profit/Education4. User expectations: low sophisticationAware
  11. 11. Aware/Friendly/ScalableSimple improvement through design decisionsDesign-only tacticsFluidScale the content to its containerVery simple layout, simple codeResponsiveDeliver a customized mobile experience.Advanced design + code12Approaches to the Mobile Inbox3
  12. 12. Mobile Aware1Establish a mobile-friendly visual frameworkwithout specializing. A mobile-first approach.• Single column hero• Key info & CTA in left column• Large text & buttonsApproaching the Mobile Inbox
  13. 13. Small Screen Considerations• 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 lengthTouch Interface considerations• Size: keep buttons least 44px square for easy tapping• Position: Keep links/buttons to the center or left for ease of use• Space: separate links to avoid touching two links• Never say: ―click here‖ because 43% of openers are tapping!
  14. 14. Highlights: single column hero, simple content, big images, text & buttons.
  15. 15. 460px wide sales nicely to vertical mobile devices
  16. 16. Product-focus, Modular design – scales nicely to iPhone
  17. 17. Big pictures, headlines and buttons create a style that’s easyto maintain and successful in both desktop/mobile environments.
  18. 18. Pros• Prioritizes importantdata, content, actions• Easier execution• No reliance on media query support• Good rendering in apps and nativeclients• Fully compatible with template-basedapproachCons• Desktop can suffer• Less real estate• Can get long• Fixed width can be lessthan ideal for AndroidMobile Aware
  19. 19. 2Approaching the Mobile InboxFluid LayoutA fluid layout is asimple percentage-based email layoutthat changes widthalong with thescreen it’s viewedon.
  20. 20. Fluid layout |--------------------------------------------------------1166px---------------------------------------------------|Email width changes to fitwithin the window|-----------------------------525px --------------------------|
  21. 21. Fluid layout%-based widths, adapts to fill thescreen it’s viewed on – text wraps
  22. 22. Fluid layoutPros• Simple execution• No learning curve or reliance onmedia queriesCons• Fewer design choices• Very narrow or very wideemails can get awkwardand hard to read
  23. 23. 3Approaching the Mobile InboxResponsive DesignResponsive web design is a set oftechniques used to make a layoutreadable and usable on any screenand/or platform on which it’sdisplayed.• Fluid grids• Fluid images• Media queries
  24. 24. One adaptable email that changes layout based on screen size.Desktop ~760px Mobile ~300px
  25. 25. Layout and content changes for optimal mobile and desktop experience
  26. 26. Responsive Design• More than a ―line of code‖• Set of conditional statement that enables specific 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, not device type
  27. 27. Pros• Restyle, resize or reorder elements• Ability to hide/show desktop ormobile specific images/content• Customized calls to action• Seamless experience across a rangeof screen sizesCons• Coding learning curve• Forces tough choices• Increased productionand QA timeResponsive Design
  28. 28. @MEDIA SUPPORTMobile Email Client @media SupportiPhone Mail YesiPad Mail YesiPod Touch Mail YesAndroid Mail 2.1- 1 NoAndroid Mail 2.2+ 1 Yes 2Windows Phone 8 NoBlackBerry 6 NoYahoo App (A&i) NoHotmail App (A) YesGmail App (A&i) NoAOL App n/aGmail via Mobile Browser NoYahoo via Mobile Browser NoHotmail via Mobile Browser NoAOL via Mobile Browser YesData source: ExactTarget primaryresearch1 See Google’s Android PlatformDistribution site for current stats onplatform distribution2 Mail routed through an OutlookExchange server may see different results@media Support Chart@media support isbased on operatingsystem and application(software), not device(hardware)—just as wemight discuss supportfor CSS on desktop emailclients.SinglePlatformCross-Platform
  29. 29. ResultsDesign for your users and theywill return the favor
  30. 30. Source:ExactTarget,2013CareerBuilder saw 25%increase in clicks.Source:Litmus,2013Deckers saw a 10%increase in clicks.Source:DEG,2013Crocs saw 7.66% lift inclick-to-open rateResponsive Case StudiesResponsive A/B tests typically show increase in engagement
  31. 31. Mobile optimization is a long term investmentin the user experience.Don’t expect short term gain. Re-train users to engage over time.Design a sustainable framework and strategy to streamlineplanning, content creation, testing and user experience.
  32. 32. Responsive approach is foundationalOverall Experience: IT/Web Team• Path to conversion – websites, landing pagesContent: Strategist/Copywriter• Testing, Measurement, Content hierarchyLayout: Designer• Designing for small screens, touch, streamlined productionTechnology: Coders• Writing media queries, QA on multiple devices
  33. 33. ActivitySplit into 4 groups – each group gets a device
  34. 34. Considerations for each email• Did the design shrink? Is it cut off?• Are the images turned on?• If not, how can you enable them?• Is the text legible?• How is information presented in the inbox?• From name• Subject line• Preview text• Notice gestures on the phone/email:• How easily can you interact or click through on the email?
  35. 35. Android Observations• Blocks images by default; supports ALTtext• Two apps with opposing support formedia queries• Primary content focus on left-hand side• Various screen sizes and no automaticscaling
  36. 36. Blackberry Observations• Media query support• Blocks images; supports styled ALTtext• Does not scale/auto-zoom• No separate app; email joinssocial, SMS and voice in the ―hub‖
  37. 37. Windows Phone Observations• Mixed media query support• Does weird things to fonts• Blocks images; no ALT text• No one has them!
  38. 38. iPhone Observations• Automatically scales messages to fitthe screen• Excellent support for CSS3 andmedia queries• Images on by default• Resizes fonts under 13px
  39. 39. Thank you!Justine Jordan, Litmus @meladorriKristina Huffman, ExactTarget @krudz
  40. 40. 3sixty Live: More than a user group• Interactive/digital marketers• ―Omnichannel‖ — not just email• User to user, peer to peer• Share ourideas, successes, mistakes• Don’t have to be an ExactTargetuser to attend!
  41. 41. Upcoming Boston 3sixty Live EventsHubExchange Launch Meetup• Thursday, July 18th• 5:30-7:30pm• InterContinental Boston• 510 Atlantic Ave, on the waterwww.hubexchangeweek.com/boston-ma.html