Responsive Email Design Increases Click-Through Rate By > 20%
8 likes8,047 views
The case study on CareerBuilder highlights the significance of mobile optimization and responsive design, demonstrating a 300% increase in mobile opens from October 2010 to October 2012. It emphasizes the necessity for content-first layouts and touch-friendly interfaces to enhance user experience on mobile devices, resulting in a significant uplift in click-through and open rates. The study showcases various tactics for implementing responsive design and the efficacy of A/B testing to evaluate and optimize email performance.
Responsive Email Design Increases Click-Through Rate By > 20%
- 1. Case Study: CareerBuilder Mobile Optimization + Responsive Design
- 2. Agenda • Mobile Usage + User Experience • Solutions • Case Study: CareerBuilder
- 3. Mobile Usage + User Experience
- 4. Mobile: rapid adoption October 2010-October 2012 shows 300% increase in 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 Subscriber Is she: • Listening to music • Texting • Using Skype • Watching a movie • On a phone call • Checking email • Browsing a website • Tweeting • Watching TV All media consumption can funnel through one device – high expectations are set for email viewing.
- 9. Small Screen Oath: “Don’t penalize users for visiting your site on smaller devices.”
- 10. Poor experience: Desktop-centric Good experience: Mobile Aware Excellent experience: Responsive
- 11. Solutions
- 12. What’s Different About Designing for Mobile 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 legibility over 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 Inbox Aware Simple improvement without specialization. Design-only tactics Responsive Deliver a customized mobile experience. Special design + code 1 2
- 16. Approaching the Mobile Inbox Mobile Aware Establish a mobile-friendly visual framework without specializing. • Single column hero • Key info & CTA in left column • Large text & buttons
- 17. Approaching the Mobile Inbox Responsive Design Responsive web design is a set of techniques used to make a layout readable and usable on any screen and/or platform on which it’s displayed. • Fluid grids • Fluid images • Media queries
- 18. 600px, multi-column email becomes 320px, single column.
- 19. Five Common Responsive Tactics 1 2 1 2 1 2 1 1 2 3 ResizeStack Hide Replace Restyle
- 21. Mobile Optimization + Responsive Design CareerBuilder saw a dramatic lift in click-through and open rates based on mobile optimization techniques. TEST: Control Version (original design) vs. Test Version (responsive design)
- 22. • The CSS3 @media query activates alternate styles based on general viewing environment, allowing simple change & 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 supported Responsive 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 preheader Test Results, Week 1 Test Results, Week 2 Test Results, Week 3 Subscriber Segment Click Increase Open Increase Click Increase Open Increase Click Increase Open Increase New 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 approximately the 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 book to footer Preheader
- 26. From Name > Subject Line > Preheader Preheader Control: Test: Winner!
- 27. Images Off / Images On Images Off Images On Android devices display images off by default. iPhones display images on by default. BlackBerry defaults vary based on device.
- 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 learning something you may be able to apply tomorrow • Additional A/B tests: colors, copy, buttons, button copy/placement, content hierarchy and 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. Resources Designing for the Mobile Inbox http://pages.exacttarget.com/EN-DesignMobileInbox Mobile First http://blog.exacttarget.com/blog/email-design-4/designing-an-email-campaign-think-mobile-first Video: Email + Mobile Overview http://blog.exacttarget.com/blog/email-design-4/designing-for-the-mobile-inbox-video Video: Responsive Email Design FAQs http://blog.exacttarget.com/blog/email-design-4/7-responsive-email-design-faqs