• Save
The Mobile Experience Through Email
Upcoming SlideShare
Loading in...5
×
 

The Mobile Experience Through Email

on

  • 1,000 views

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 ...

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.

Statistics

Views

Total Views
1,000
Views on SlideShare
880
Embed Views
120

Actions

Likes
2
Downloads
0
Comments
0

2 Embeds 120

http://www.demacmedia.com 118
http://feeds.feedburner.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The Mobile Experience Through Email The Mobile Experience Through Email Presentation Transcript

  • Designing and codingfor the mobile inboxeCommerce Toronto Meet UpJune 2013
  • Mobile: rapid adoptionhttp://www.returnpath.com/resource/email-mostly-mobile/October 2010-October 2012 shows300% increase in mobile opens
  • 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
  • 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
  • Mobile User Experience
  • Design = communication.Good design allows your subscribers to interactwith your emails in their preferred format.
  • How do customers use mobile devices?
  • 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.
  • The mobile experience is interactive.Emails are viewed in stages.From NameSubject LinePreheaderViewportScrolling view
  • From NameSubject LinePreheaderViewportScrolling view
  • From NameApprox. 25 charactersSubject LineApprox. 35 charactersPreheaderApprox. 85 characters
  • From NameSubject LinePreheaderViewportScrolling viewApprox 320x480px
  • Notification OptionsFrom NameSubject LinePreheaderViewportScrolling viewNotification
  • DESIGNING FORMOBILE DEVICES
  • What’s Different About Designing forMobile Devices?Small Screens &Touch Interfaces
  • 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
  • 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!
  • Touch Interfaces: InspirationLook to App design for inspiration!http://www.mobile-patterns.com
  • Solutions
  • Two Approaches to the Mobile InboxAwareSimple improvement without specialization.Design-only tacticsResponsiveDeliver a customized mobile experience.Special design + code12
  • Desktop-centricMobileawareResponsivecodePoor experience Good experience Excellentexperience
  • Approaching the Mobile InboxEstablish a mobile-friendly visual frameworkwithout specializing.• Single column hero• Key info & CTA in left column• Large text & buttonsMobile Aware1
  • Mobile aware: planning the mobile experiencewithout a specialized setup. Highlights: singlecolumn hero, big images, text & buttons.
  • Product-focus, Modular design – scales nicely toiphone
  • 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
  • Widths: Designing for iPhone scalingWider email scale smaller – keep a narrower format, but keep in mind desktop viewing.600px desktop is still standard.450px600px700px
  • Widths: Designing for desktop450px600px700pxWider email scale smaller – keep a narrower format, but keep in mind desktop viewing.600px desktop is still standard.
  • 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
  • Approaching the Mobile InboxPhoto: http://en.wikipedia.org/wiki/Responsive_web_designResponsive 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
  • 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
  • If screen size is 480px orsmaller, use this set of stylesYour emailcode@media screen and (max-width: 480px)
  • Desktop ~760px Mobile ~300px
  • Shrink Wrap Column Drop Layout Shifterhttp://www.lukew.com/ff/entry.asp?15143 Common Responsive Layout Approaches
  • Layout Pattern 1: Shrink Wraphttp://www.lukew.com/ff/entry.asp?1514• Msg width shrinks• Text scales up• Text reflows• Elements scale
  • Layout Pattern 2: Column Dropvia luke w.• Multi to singlecolumn• Multi columnelements shrink• Single columnelements retain sizehttp://www.lukew.com/ff/entry.asp?1514
  • • Layout reshapes• Most significantcontent transitions• Nav may disappearhttp://www.lukew.com/ff/entry.asp?1514Layout Pattern 2: Layout Shiftervia luke w.
  • A RESPONSIVEWORKFLOW
  • • Label hierarchy 1,2,3,4• Decide if any content issuppressed/replaced:Green means it stays, redmeans it is hiddenStep 1: Content Strategy123
  • Small Screen Oath:Brad FrostResponsive web leader/publisher“Don’t penalize users for visitingyour site on smaller devices.”
  • 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
  • Decide how content shouldexpand on desktop views.5 common tactics:• Stack• Hide• Show• Resize• RestyleStep 2: Wireframe Desktop
  • Code the wireframeinto an HTML-basedprototype to showfunctionality.Step 2.5: Live Prototype
  • Step 3: Visual DesignStart with a PatternLibrary of repeatablebrand elements.
  • 600pxwide320pxwideStep 3: Visual Design
  • • 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
  • • 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
  • 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
  • BEFORE AFTER
  • Step 5: QAUse software to test email rendering, like Litmus or Return PathBut nothing beats firsthand testing –borrow a friend’s iPhone or Android.
  • 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
  • SUPPORT
  • @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
  • @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
  • 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