0
Case Study: CareerBuilderMobile Optimization + Responsive Design
Agenda•  Mobile Usage + User Experience•  Solutions•  Case Study: CareerBuilder
Mobile Usage +User Experience
Mobile: rapid adoptionOctober 2010-October 2012 shows 300% increasein mobile opens
Mobile: large market share of opens
Design = communication.Good design allows your subscribers to interact with your emails in their preferred format.
How do customers use mobile devices?
The Mobile SubscriberIs she:•  Listening to music•  Texting•  Using Skype•  Watching a movie•  On a phone call•  Checking ...
Small Screen Oath:“Don’t penalize users for visitingyour site on smaller devices.”
Poor experience:Desktop-centricGood experience:Mobile AwareExcellent experience:Responsive
Solutions
What’s Different About Designing forMobile Devices?
Small Screens: Ideal State•  Content first: think top-down hierarchy•  Single column layout•  Large text sizes to ensure r...
Touch Interfaces: Ideal State•  Size: keep buttons least 44px square for easy tapping•  Position: Keep links/buttons to th...
Two Approaches to the Mobile InboxAwareSimple improvement without specialization.Design-only tacticsResponsiveDeliver a cu...
Approaching the Mobile InboxMobile AwareEstablish a mobile-friendly visual frameworkwithout specializing.•  Single column ...
Approaching the Mobile InboxResponsive DesignResponsive web design is a set of techniquesused to make a layout readable an...
600px, multi-column email becomes 320px, single column.
Five Common Responsive Tactics1 2121 2 11 2 3ResizeStackHideReplaceRestyle
Case Study:CareerBuilder
Mobile Optimization + Responsive DesignCareerBuilder saw a dramatic lift inclick-through and open rates based onmobile opt...
•  The CSS3 @media query activatesalternate styles based on generalviewing environment, allowing simplechange & adaptation...
Control: Test:
CareerBuilder Test Results•  21-25% increase in click-through rate / 15-17% increase in open rate•  Unengaged customers de...
•  Preheader basics:•  Located above the logo or header in an email•  Physically see this HTML text at the top of your ema...
From Name > Subject Line > PreheaderPreheaderControl: Test:Winner!
Images Off / Images OnImages Off Images OnAndroid devices display images off by default. iPhones display images on by defa...
Preview: Control Version
Preview: Test Version (Responsive)
Further Testing•  Test copy and optimize at the time of send with a 10/10/80 approach:•  10% get version A•  10% get versi...
Mobile Wisdom: Plan for the Long Term•  Design a sustainable responsive framework to streamline planning, content creation...
Resources
ResourcesDesigning for the Mobile Inboxhttp://pages.exacttarget.com/EN-DesignMobileInboxMobile Firsthttp://blog.exacttarge...
Upcoming SlideShare
Loading in...5
×

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

4,054

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
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,054
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
61
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "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 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×