At Fathead LLC, an e-retailer of life-size wall decals of athletes and other graphics, mobile traffic jumped from 4% in December 2009 to 42% in December 2012. In mid-2012, the merchant’s well-read and well-informed director of Internet marketing, Michael Layne, was keen on a then up-and-coming approach to dealing with shoppers on smartphones and tablets. The approach? Responsive web design.
With responsive design, a single web site adjusts to the size of the screen a visitor is viewing, any screen, all from one code base and one set of web content.
The merchant launched its responsive site in November 2012. All content is sent in one file except for images. The merchant’s servers detect what kind of device is requesting the site and send only images optimized for that device.
The site at Fathead, No. 320 in the 2014 Internet Retailer Mobile 500, uses the grid system common to responsive, in this case slicing views up into 1-column, 2-column, 3-column, 4-column and 5-column. The 1-column view (smartphones) accounts for 16% of traffic, the 2-column view (smaller tablets) 6%, 3-column (larger tablets and desktops) 54%, 4-column (widescreen desktops or laptops) 17%, and 5-column (the widest widescreen desktops or laptops) 7%.
Comparing the first half of 2013, when the responsive site was active, with the first half of 2012, before the responsive launch, smartphone conversion was up 90%, smartphone revenue per visitor up 70%, smartphone revenue up 538%; non-phone conversion up 17%, non-phone revenue per visitor up 15% and non-phone revenue up 25%.
Fathead marketing chief Layne will reveal the behind-the-scenes story of the successful responsive design site at the 2014 IRCE Focus: Web Design + Mobile Commerce conference in a session entitled “Secrets of Creating a Responsive Design for Smartphones and Tablets” from 2:00 p.m. to 2:45 p.m. on Feb. 10 in Orlando.
“The session will be a practical look at what anyone thinking of embarking on responsive web design should appreciate,” Layne explains. “First, what drove us to do it. Second, how we went about it and the challenges we faced. And third, how it turned out, what we’ve learned and what advice we’d give. I think we will convince some folks to move forward with responsive design, with some good do’s and don’ts in hand.”
Layne adds that while responsive design is not necessarily a panacea for web retailers, today it definitely has everyone’s attention.
“Having a single code base is very appealing, especially for e-retailers with limited resources,” Layne says. “We’re finding that focusing on what the device is–which phone, which tablet, desktop, etc.–no longer makes much sense. We’re much more interested in what a device requesting our site can do, and then having an experience that makes sense for that device’s capabilities and its user. Responsive design has awakened us to that. Also, a redesign like this, when it’s a collaborative initiative between marketing and technology, which I think is essential, can be a huge win for both teams because of how much they learn from each other. Our marketing team is much more empowered to run the site now and our technology team better understands the site from a consumer perspective.”
Other retailers have also become responsive converts. At the end of 2013, 459 of the merchants in the 2014 Internet Retailer Mobile 500 had m-commerce sites for smartphones, 34 had tablet-optimized sites, and 39 had sites that followed responsive web design principles. A year earlier, only a handful of merchants had responsive sites.
The shift follows directly from the growing number of consumers accessing retail sites via mobile devices. In 2013, mobile became the predominant way shoppers interacted with e-retail: 44% of time spent with online retailers occurred on a smartphone and 11% on a tablet, according to web measurement firm comScore Inc.
Favorite