The Mobile Experience Through Email


Published on

Did you know that mobile is now the number one environment for email opens? A user's experience in a mobile environment for email is much different than a desktop one. Understanding the various methods of mobile email optimization is critical for any online marketer.

George Adamidis from ExactTarget lead the latest eCommerce Toronto Meetup on the different methods for optimizing email for both the mobile and desktop experience.

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

The Mobile Experience Through Email

  1. 1. Designing and codingfor the mobile inboxeCommerce Toronto Meet UpJune 2013
  2. 2. Mobile: rapid adoption 2010-October 2012 shows300% increase in mobile opens
  3. 3. Averages across all customers. Data Source: Litmus 12/2012 – emailclientmarketshare.comMobile: large market share of opensEmail Client UsageiPhone 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 Clients42%Mobile
  4. 4. Mobile: possibly a barrier to clicking46%52%2%30%66%4%0%10%20%30%40%50%60%70%Mobile Desktop MultipleOPENSOPENSCLICKSCLICKS46% of opens are mobile, but only 30% of clicksHigh volume retail brand – name suppressed
  5. 5. Mobile User Experience
  6. 6. Design = communication.Good design allows your subscribers to interactwith your emails in their preferred format.
  7. 7. How do customers use mobile devices?
  8. 8. The Mobile SubscriberIs she:Listening to musicTextingUsing SkypeWatching a movieOn a phone callChecking emailBrowsing a websiteTweetingWatching TVAll mediaconsumption throughone device - highexpectations are setfor email viewing.
  9. 9. The mobile experience is interactive.Emails are viewed in stages.From NameSubject LinePreheaderViewportScrolling view
  10. 10. From NameSubject LinePreheaderViewportScrolling view
  11. 11. From NameApprox. 25 charactersSubject LineApprox. 35 charactersPreheaderApprox. 85 characters
  12. 12. From NameSubject LinePreheaderViewportScrolling viewApprox 320x480px
  13. 13. Notification OptionsFrom NameSubject LinePreheaderViewportScrolling viewNotification
  15. 15. What’s Different About Designing forMobile Devices?Small Screens &Touch Interfaces
  16. 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 acrossbrightness levels.• Don’t cram content into the viewport -honor legibility over length
  17. 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. 18. Touch Interfaces: InspirationLook to App design for inspiration!
  19. 19. Solutions
  20. 20. Two Approaches to the Mobile InboxAwareSimple improvement without specialization.Design-only tacticsResponsiveDeliver a customized mobile experience.Special design + code12
  21. 21. Desktop-centricMobileawareResponsivecodePoor experience Good experience Excellentexperience
  22. 22. Approaching the Mobile InboxEstablish a mobile-friendly visual frameworkwithout specializing.• Single column hero• Key info & CTA in left column• Large text & buttonsMobile Aware1
  23. 23. Mobile aware: planning the mobile experiencewithout a specialized setup. Highlights: singlecolumn hero, big images, text & buttons.
  24. 24. Product-focus, Modular design – scales nicely toiphone
  25. 25. Mobile Aware DesignConsiderations for iPhone• Scales Messages down– Keep text large for legibility– Use a one-column format– Keep buttons extra large to be tappablewhen shrunk– Use preheader text for pre-open visibilityiPhone: 24% of email opens
  26. 26. Widths: Designing for iPhone scalingWider email scale smaller – keep a narrower format, but keep in mind desktop viewing.600px desktop is still standard.450px600px700px
  27. 27. Widths: Designing for desktop450px600px700pxWider email scale smaller – keep a narrower format, but keep in mind desktop viewing.600px desktop is still standard.
  28. 28. Mobile Aware DesignConsiderations 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 messagewithout images– Use preheader text for both pre-open viewand image-blocking viewAndroid: 7% of email opens(but 54% of operating system market share*)*comScore
  29. 29. Approaching the Mobile InboxPhoto: Design2Responsive 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
  30. 30. Responsive Email: OverviewThe CSS3 @media query activates alternate styles based on general viewingenvironment, 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. 31. If screen size is 480px orsmaller, use this set of stylesYour emailcode@media screen and (max-width: 480px)
  32. 32. Desktop ~760px Mobile ~300px
  33. 33. Shrink Wrap Column Drop Layout Shifter Common Responsive Layout Approaches
  34. 34. Layout Pattern 1: Shrink Wrap• Msg width shrinks• Text scales up• Text reflows• Elements scale
  35. 35. Layout Pattern 2: Column Dropvia luke w.• Multi to singlecolumn• Multi columnelements shrink• Single columnelements retain size
  36. 36. • Layout reshapes• Most significantcontent transitions• Nav may disappear Pattern 2: Layout Shiftervia luke w.
  38. 38. • Label hierarchy 1,2,3,4• Decide if any content issuppressed/replaced:Green means it stays, redmeans it is hiddenStep 1: Content Strategy123
  39. 39. Small Screen Oath:Brad FrostResponsive web leader/publisher“Don’t penalize users for visitingyour site on smaller devices.”
  40. 40. Use high level content and low-fi graphicsto communicate content strategy formobile screens.Use photoshop, Illustrator, wireframingsoftware like balsamiq, or just pen andpaperStep 2: Wireframe Mobile
  41. 41. Decide how content shouldexpand on desktop views.5 common tactics:• Stack• Hide• Show• Resize• RestyleStep 2: Wireframe Desktop
  42. 42. Code the wireframeinto an HTML-basedprototype to showfunctionality.Step 2.5: Live Prototype
  43. 43. Step 3: Visual DesignStart with a PatternLibrary of repeatablebrand elements.
  44. 44. 600pxwide320pxwideStep 3: Visual Design
  45. 45. • 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
  46. 46. • Design so that it can be coded in an adaptable way - avoiding toomany 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
  47. 47. Step 4: CodeCSS is activated at 480px andsmallerSidebar drops below the left columnContainer shrinks to 300px widePadding is addedImages resize to 100%Text scales up, more padding isadded, classes are assigned tocontainers in the code below
  48. 48. BEFORE AFTER
  49. 49. Step 5: QAUse software to test email rendering, like Litmus or Return PathBut nothing beats firsthand testing –borrow a friend’s iPhone or Android.
  50. 50. Phone, Tablet or Laptop?The line between device types are blurring: focus on breakpoints thatwork for your layout and can accommodate multiple devices.SamsungGalaxy Note IIWidth:3.17’’Width:2.31’’iPhone 5Width:4.72’’Google NexusWidth:7.31’’iPadWidth:10.81’’SurfaceUnder 480px Over 480px480px is a common breakpoint today
  51. 51. SUPPORT
  52. 52. @media supportMedia queries are wellsupported98.5% of mobile opensoccur in environmentssupporting @media1.5% of mobile opensoccur in environmentswhich do not support@mediaData Source: ExactTarget primary research using Litmus datasetApproximately42% of all opensare mobile98% of mobile opens occurvia a native email app2% of mobile opens occurvia a non-native email appor mobile browserMobile marketshare is significantMost opens come fromnative email apps
  53. 53. @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
  54. 54. Choosing an ApproachAware Benefits:• Only design changes needed• Easy to implement quickly and incrementally• Compatible with a template-based approachResponsive Benefits:• The best legibility on mobile devices (biggest gains for Android)• Adopting a flexible framework allows for dynamic content12