• Like

Thanks for flagging this SlideShare!

Oops! An error has occurred.

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


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 …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Case Study: CareerBuilderMobile Optimization + Responsive Design
  • 2. Agenda•  Mobile Usage + User Experience•  Solutions•  Case Study: CareerBuilder
  • 3. Mobile Usage +User Experience
  • 4. Mobile: rapid adoptionOctober 2010-October 2012 shows 300% increasein mobile opens
  • 5. Mobile: large market share of opens
  • 6. Design = communication.Good design allows your subscribers to interact with your emails in their preferred format.
  • 7. How do customers use mobile devices?
  • 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. Small Screen Oath:“Don’t penalize users for visitingyour site on smaller devices.”
  • 10. Poor experience:Desktop-centricGood experience:Mobile AwareExcellent experience:Responsive
  • 11. Solutions
  • 12. What’s Different About Designing forMobile Devices?
  • 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. 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. Two Approaches to the Mobile InboxAwareSimple improvement without specialization.Design-only tacticsResponsiveDeliver a customized mobile experience.Special design + code12
  • 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. 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. 600px, multi-column email becomes 320px, single column.
  • 19. Five Common Responsive Tactics1 2121 2 11 2 3ResizeStackHideReplaceRestyle
  • 20. Case Study:CareerBuilder
  • 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. •  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. Control: Test:
  • 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. •  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. From Name > Subject Line > PreheaderPreheaderControl: Test:Winner!
  • 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. Preview: Control Version
  • 29. Preview: Test Version (Responsive)
  • 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. Mobile Wisdom: Plan for the Long Term•  Design a sustainable responsive framework to streamline planning, content creation,testing and user experience.
  • 32. Resources
  • 33. ResourcesDesigning for the Mobile Inboxhttp://pages.exacttarget.com/EN-DesignMobileInboxMobile Firsthttp://blog.exacttarget.com/blog/email-design-4/designing-an-email-campaign-think-mobile-firstVideo: Email + Mobile Overviewhttp://blog.exacttarget.com/blog/email-design-4/designing-for-the-mobile-inbox-videoVideo: Responsive Email Design FAQshttp://blog.exacttarget.com/blog/email-design-4/7-responsive-email-design-faqs