Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Email Design Increases Click-Through Rate By > 20%


Published on

Currently, a stunning 43% of all email opens occur on mobile devices, quickly overshadowing desktop opens (32%) and webmail opens (25%). Data from Litmus shows us that this percentage is up 38% in the last year alone. Basically, subscribers continue to use viewing environments that include many screen sizes.

In a recent case study, we demonstrate how CareerBuilder is getting better results than ever before by implementing mobile optimization techniques using a responsive design strategy in their recent email campaigns. These results included a 15-17% increase in open rates and a 21-24% increase in click-through rates—and it’s all from responding to the needs of their growing mobile audience.

Published in: Design, Technology

Responsive Email Design Increases Click-Through Rate By > 20%

  1. 1. Case Study: CareerBuilderMobile Optimization + Responsive Design
  2. 2. Agenda•  Mobile Usage + User Experience•  Solutions•  Case Study: CareerBuilder
  3. 3. Mobile Usage +User Experience
  4. 4. Mobile: rapid adoptionOctober 2010-October 2012 shows 300% increasein mobile opens
  5. 5. Mobile: large market share of opens
  6. 6. Design = communication.Good design allows your subscribers to interact with your emails in their preferred format.
  7. 7. How do customers use mobile devices?
  8. 8. The Mobile SubscriberIs she:•  Listening to music•  Texting•  Using Skype•  Watching a movie•  On a phone call•  Checking email•  Browsing a website•  Tweeting•  Watching TVAll media consumption canfunnel through one device –high expectations are set foremail viewing.
  9. 9. Small Screen Oath:“Don’t penalize users for visitingyour site on smaller devices.”
  10. 10. Poor experience:Desktop-centricGood experience:Mobile AwareExcellent experience:Responsive
  11. 11. Solutions
  12. 12. What’s Different About Designing forMobile Devices?
  13. 13. 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 legibilityover length
  14. 14. 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!
  15. 15. Two Approaches to the Mobile InboxAwareSimple improvement without specialization.Design-only tacticsResponsiveDeliver a customized mobile experience.Special design + code12
  16. 16. Approaching the Mobile InboxMobile AwareEstablish a mobile-friendly visual frameworkwithout specializing.•  Single column hero•  Key info & CTA in left column•  Large text & buttons
  17. 17. Approaching the Mobile InboxResponsive DesignResponsive web design is a set of techniquesused to make a layout readable and usable onany screen and/or platform on which it’sdisplayed.•  Fluid grids•  Fluid images•  Media queries
  18. 18. 600px, multi-column email becomes 320px, single column.
  19. 19. Five Common Responsive Tactics1 2121 2 11 2 3ResizeStackHideReplaceRestyle
  20. 20. Case Study:CareerBuilder
  21. 21. Mobile Optimization + Responsive DesignCareerBuilder saw a dramatic lift inclick-through and open rates based onmobile optimization techniques.TEST:Control Version (original design)vs. Test Version (responsive design)
  22. 22. •  The CSS3 @media query activatesalternate styles based on generalviewing environment, allowing simplechange & adaptation:•  Message width shrinks•  Text scales / reflows•  Elements scale•  Multi to single column•  Detects screen size (px) – small(mobile) vs. large (non-mobile)•  Falls back to standard version when@media isn’t supportedResponsive Design
  23. 23. Control: Test:
  24. 24. CareerBuilder Test Results•  21-25% increase in click-through rate / 15-17% increase in open rate•  Unengaged customers delivered the highest lift in click-through•  Less motivated customers seem more likely to respond to an uncluttered, visually pleasing message•  Lift in opens due to minor change in preheaderTest Results, Week 1 Test Results, Week 2 Test Results, Week 3Subscriber Segment Click Increase Open Increase Click Increase Open Increase Click Increase Open IncreaseNew 11% 10% 19% 21% 11% 13%Active 17% 17% 19% 23% 11% 17%Recent 17% 21% 19% 19% 22% 17%Passive 17% 13% 16% 12% 16% 12%Unengaged 22% 15% 26% 18% 23% 15%Total Increase 21% 15% 24% 17% 21% 15%
  25. 25. •  Preheader basics:•  Located above the logo or header in an email•  Physically see this HTML text at the top of your email design•  Some email clients will grab the first piece of code and display approximatelythe first 85 characters of the first HTML text next to the subject line•  Use the preheader to complement the subject line•  Be mindful of order of items in the preheader•  Move items like unsubscribe and add to address bookto footerPreheader
  26. 26. From Name > Subject Line > PreheaderPreheaderControl: Test:Winner!
  27. 27. Images Off / Images OnImages Off Images OnAndroid devices display images off by default. iPhones display images on by default.BlackBerry defaults vary based on device.
  28. 28. Preview: Control Version
  29. 29. Preview: Test Version (Responsive)
  30. 30. Further Testing•  Test copy and optimize at the time of send with a 10/10/80 approach:•  10% get version A•  10% get version B•  Remaining 80% get the winner•  This method allows you to apply your results today, rather than learningsomething you may be able to apply tomorrow•  Additional A/B tests: colors, copy, buttons, button copy/placement, content hierarchyand more•  Measure click-though and conversion
  31. 31. Mobile Wisdom: Plan for the Long Term•  Design a sustainable responsive framework to streamline planning, content creation,testing and user experience.
  32. 32. Resources
  33. 33. ResourcesDesigning for the Mobile Inbox First Email + Mobile Overview Responsive Email Design FAQs