The Benefits of Responsive Email Design: A Crocs case study

Unless you’ve been asleep for the last 18 months, you know that responsive design is the hottest topic in web design right now. But did you know that the responsive email design is becoming more and more common, as well? And with good reason. According to Litmus, 42% of opens occur on a mobile device – a statistic that is no longer shocking, except in its rate of growth. Email has seen a 138% increase in mobile consumption in the last 18 months, and a 48% increase in 2012. Because of this, brands and the agencies that work with them are working hard to accommodate responsive design in their emails.

For the uninitiated, responsive design allows one set of code to render an email differently when viewed on a desktop, tablet, or phone – creating an optimal experience regardless of when or where a subscriber opens the email. For example, consider an email designed for the desktop. That experience might include six or seven navigation buttons across the top, and the size and aspect of the desktop experience can easily accommodate that. But while these buttons are easily found, read, and clicked with a mouse, they present a problem for the phone or tablet user because of the smaller screen and the fact that they are trying to engage the email’s functionality with a thumb or index finger. With responsive design, the email changes dynamically based on the screen size of the subscriber’s viewing device. Therefore, in this example, the email may only show the two or three navigation buttons that the content owner has decided are most relevant to the iPhone user’s experience, rather than the original seven.

Above Average

Over the last six months in particular, responsive email design has begun to gain acceptance, with some verticals adopting the practice more quickly than others. For instance, the hospitality and travel industries committed to making this change earlier than almost anyone. This is sensible; their customers are presumably on-the-go and certainly viewing on a mobile device the majority of the time. Surprisingly, however, major retail brands have, by and large, been slow to react.

I say “surprisingly” for good reason. DEG carefully watches the analytics on emails we send for our clients, and our reporting indicates results for our clients that are even higher than the industry average that Litmus reports. In fact, some of our major retail brands are seeing 60% of their subscribers viewing on a mobile device. And as I stated above, it’s the growth rate for mobile consumption that has been truly remarkable – especially considering that it indicates a wholesale behavioral change rather than just a simple technological one. Compared to this time last year, only about 20% of retailers’ messaging was being consumed on mobile devices. In only a year, 40% of users have changed their behavior enough that they are consuming your content on-the-go, rather than sitting down at the desktop. The desktop experience as it relates to email is rapidly becoming non-existent. If it isn’t already, responsive email design for marketing messaging should be a high priority for you and your brand.

 

Approaching Email Differently

Transitioning to responsive email design is more than just a simple redesign. It’s a different way of approaching email content. Just as responsive design has forced web content managers to carefully consider the context and user experience for the content they present, so too is responsive email design demanding a re-examination of email strategy. What information and tools do mobile users really need? What is essential to them for conversion? What obstacles are there?

For instance, when responsive email designs are viewed on a phone, longer blocks of text will wrap, vertically extending your layout. In addition, your call-to-action buttons need to be bigger to allow for easy clicking without a mouse, and they need to be placed appropriately in relation to text and images so users can quickly act on what you’re asking of them. How do you accomplish all of this without your email becoming too long (a hurdle that reduces the effectiveness of the message)?

The mobile experience forces marketers to use discipline when it comes to their messaging – less space, less content, and simpler graphics. But there is a silver lining: After you make some tough decisions about content hierarchy, the second go-round and every subsequent message creation cycle should be faster and simpler. Rethinking the overall design and content, in addition to building the responsive template can be time-consuming up front, but moving forward the process is streamlined and you have less to think about.

 

An Omnichannel Approach

“Omnichannel” means consumers are interacting with brands online and offline, sometimes in the same experience. The entire brand experience starts to revolve around the mobile device, whether that be a tablet or a phone, in-store or online. A responsive email design can accommodate the subscriber regardless of their location or device.

Let’s take a look a quick look at the Crocs email layout before and after a recent redesign from a traditional email concept to responsive design.

Before

Desktop

Responsive design for email

Mobile

Responsive design for email

 

 

After

Responsive Email Design – Desktop

Responsive design for email

Responsive Email Design – Mobile

Responsive design for email

 

Measuring Results

How do you determine if your responsive design is successful? To isolate the effectiveness of the email redesign I recommend focusing on click-through and click-to-open rates. You will also want to focus on conversion rate; however, this is highly dependent on the mobile optimization of the website – a completely separate topic. As with nearly all emails, we began a testing plan to learn and optimize the results of the redesign.

 

Test One

The first test was a three-way creative divide:

  • Group A received a static desktop version
  • Group B received a static mobile version
  • Group C received a responsive email design that optimized the layout based on the screen size of the device the subscriber was using

 

Version A: Static Desktop

Responsive design for email

Version B: Static Mobile

Responsive design for email

Version C: Responsive Email Design

Responsive design for email

 

Results: In this test, clicks and opens were consistent for all three versions, but all metrics were just slightly higher for the responsive version

  • Total revenue and RPE were highest for Responsive, followed by Desktop, and then Mobile
  • Higher AOV for Responsive and Desktop

What is interesting about these results is that many brands create a mobile-friendly version (like Version B: Static Mobile) which they link to in the header of a desktop version. However, this static mobile version was consistently the worst performer across all three versions, further justifying the reason for redesigning and recoding for responsive.

Test Two

Next we wanted to test an email that was less discount-focused and we wanted to modify the way we tracked the links, to more accurately track each of the versions. Test two was a 50/50 split with Group A receiving a responsive email design and Group B receiving a static desktop version.

 

Version A: Responsive Email Design

Responsive design for email

Version B: Static Desktop

Responsive design for email

 

Results:

  • Responsive showed an overall 7.66% lift in CTOR
  • iPhone ‘read’ engagement had a 15.63% lift for the Responsive version over the Desktop version. Crocs, along with many retail clients we work with, is seeing more than 25% of all opens occurring on iPhone which makes optimizing for this device even more important.
  • Mobile ‘read’ engagement had an 8.82% lift for the Responsive version over Desktop version
  • Revenue on the mobile site was consistent for both versions
  • Revenue on the site was lower for the Responsive version

(“Read” is defined by Litmus as a subscriber being engaged with your message for 10 or more seconds)

Next we will be testing colors, headline copy, buttons, call-to-action copy and placement, hierarchy of content and more to optimize conversions. We will also be setting up tracking of purchases by device to determine if subscribers of certain devices are more likely to purchase.

Summary

The initial migration to responsive email design may be cumbersome, but with increased engagement rates retailers that make the move sooner rather than later will reap the benefits for longer, ahead of the competition. Responsive email design creates a seamless experience across multiple devices, further enabling the omnichannel experience. Have you moved to responsive email design? What has your experience been?

Add New Comment:

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>