• Save
3sixty Live Boston: Designing for the Mobile Inbox
Upcoming SlideShare
Loading in...5

3sixty Live Boston: Designing for the Mobile Inbox



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

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.



Total Views
Views on SlideShare
Embed Views



3 Embeds 40

http://kenz.pw 20
http://litmus.com 17
http://www.email-lounge.de 3



Upload Details

Uploaded via as Microsoft PowerPoint

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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
    Your message goes here
Post Comment
Edit your comment

3sixty Live Boston: Designing for the Mobile Inbox 3sixty Live Boston: Designing for the Mobile Inbox Presentation Transcript

  • 3sixty Live BostonDesigning for the Mobile InboxJune 18, 2013
  • Kristina HuffmanDesign Practice LeadExactTarget@krudzJustine JordanResearch & EducationLitmus@meladorri
  • Current State
  • 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%
  • 0%10%20%30%40%50%60%70%Opens in Each EnvironmentWebmail Desktop MobileThe last 28 months42%33%10%
  • Path to Conversion
  • A Poor Mobile Experience limits Conversion
  • 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
  • 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%
  • 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
  • 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
  • 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
  • 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!
  • Highlights: single column hero, simple content, big images, text & buttons.
  • 460px wide sales nicely to vertical mobile devices
  • Product-focus, Modular design – scales nicely to iPhone
  • Big pictures, headlines and buttons create a style that’s easyto maintain and successful in both desktop/mobile environments.
  • 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
  • 2Approaching the Mobile InboxFluid LayoutA fluid layout is asimple percentage-based email layoutthat changes widthalong with thescreen it’s viewedon.
  • Fluid layout |--------------------------------------------------------1166px---------------------------------------------------|Email width changes to fitwithin the window|-----------------------------525px --------------------------|
  • Fluid layout%-based widths, adapts to fill thescreen it’s viewed on – text wraps
  • 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
  • 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
  • One adaptable email that changes layout based on screen size.Desktop ~760px Mobile ~300px
  • Layout and content changes for optimal mobile and desktop experience
  • 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
  • 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
  • @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
  • ResultsDesign for your users and theywill return the favor
  • 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
  • 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.
  • 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
  • ActivitySplit into 4 groups – each group gets a device
  • 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?
  • 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
  • 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‖
  • Windows Phone Observations• Mixed media query support• Does weird things to fonts• Blocks images; no ALT text• No one has them!
  • iPhone Observations• Automatically scales messages to fitthe screen• Excellent support for CSS3 andmedia queries• Images on by default• Resizes fonts under 13px
  • Thank you!Justine Jordan, Litmus @meladorriKristina Huffman, ExactTarget @krudz
  • 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!
  • 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