responsive email design increases click-through rate by > 20%

33
Case Study: CareerBuilder Mobile Optimization + Responsive Design

Upload: salesforce-marketing-cloud

Post on 15-Jan-2015

3.238 views

Category:

Design


1 download

DESCRIPTION

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.

TRANSCRIPT

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

Case Study: CareerBuilder Mobile Optimization + Responsive Design

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

Agenda •  Mobile Usage + User Experience •  Solutions •  Case Study: CareerBuilder

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

Mobile Usage + User Experience

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

Mobile: rapid adoption October 2010-October 2012 shows 300% increase in mobile opens

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

Mobile: large market share of opens

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

Design = communication. Good design allows your subscribers to interact with your emails in their preferred format.

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

How do customers use mobile devices?

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

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.

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

Small Screen Oath:

“Don’t penalize users for visiting your site on smaller devices.”

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

Poor experience: Desktop-centric

Good experience: Mobile Aware

Excellent experience: Responsive

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

Solutions

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

What’s Different About Designing for Mobile Devices?

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

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

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

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!

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

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

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

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

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

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

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

600px, multi-column email becomes 320px, single column.

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

Five Common Responsive Tactics

1 21

2

1 2 1

1 2 3

Resize Stack

Hide

Replace

Restyle

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

Case Study: CareerBuilder

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

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)

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

•  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

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

Control: Test:

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

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%

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

•  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

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

From Name > Subject Line > Preheader

Preheader

Control: Test:

Winner!

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

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.

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

Preview: Control Version

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

Preview: Test Version (Responsive)

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

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

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

Mobile Wisdom: Plan for the Long Term •  Design a sustainable responsive framework to streamline planning, content creation,

testing and user experience.

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

Resources

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

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