Is responsive web design the answer to the multiscreen challenge?
Responsive web design is a method of crafting a single web site so that it will render properly no matter the device a consumer uses, a desktop or laptop PC, a smartphone, a tablet, a web-enabled TV, or whatever gadget comes along next.
It's a new approach to web design; in fact, the term "responsive web design" first appeared in 2010. The technology is not fully mature, concedes the Hertz Corp. chief information officer Joe Eckroth, but that didn't stop the U.S. car rental company from redesigning its two consumer-facing web sites—Hertz.com and car-sharing site HertzOnDemand.com—using responsive techniques. The new sites went live in November.
Like many retailers turning to responsive design, Hertz was reacting to the rapid growth in the use of mobile devices by Hertz customers. 12% of Hertz traffic came from mobile devices in 2012, compared with 4% the prior year. "In 24 months it will be rivaling every other channel we've got," Eckroth says.
The advantage of responsive design, he says, is that Hertz can deploy new features and promotions one time to Hertz.com and know that they'll display equally well whether the customer is sitting in front of a desktop PC, lying in bed with an iPad or on the road with any of the many types of smartphones Hertz customers use.
"However they come to us, we want to make sure they feel it's a great experience," he says. "When you think about speed to market, this technology allows us to develop once and deploy across all devices. That's a powerful thing."
Hertz claims to be the first travel company to implement responsive design, and among online retailers the method is more often discussed than implemented. Bazaarvoice, the leading provider of customer ratings and reviews technology to e-retailers, sees perhaps 10% to 15% of its clients implementing responsive techniques, says Neville Letzerich, executive vice president of product. "But then you've got a lot of people looking to go after it in the coming 12 to 18 months," he adds.
Recognizing that trend, many providers of e-commerce technology are revising their products to accommodate responsive design. For example, the way Bazaarvoice displays customer reviews can change as the size of the user's browser window changes, at points switching from two columns to one column to make them look better on small screens, in the latest version of the vendor's software released in November.
Retailers and their design agencies that have deployed responsive e-commerce sites have learned lessons that will make future deployments easier. They're also finding, however, that it takes more time to design and operate a retail site using responsive techniques than a single desktop site.
Some remain skeptical that responsive design is the best solution, especially for sites that rely on captivating imagery to sell high-end items. But others argue that it's the way to go in a world of rapidly proliferating device sizes and types. "In the long run it's way easier to build a responsive site and not have to worry about all the separate ways you interact with your customers," says Chris O'Connell, director of engineering at e-commerce design agency Gorilla Group.
If he's right, it will have a big impact on retailers' mobile and e-commerce operations. Retailers that have created separate teams for smartphones or tablets will want to go back to a single team, Forrester Research Inc. analyst Peter Sheldon says. At the same time more personnel may be needed to keep up the pace of adding new products or deals.
Some envision broader implications. That includes web sites not only changing based on the device the customer is using, but where the customer is and what she is doing. A different web site for a customer in a store versus one at home? That, some say, could be the future of responsive design.
It works, but…
For now, however, retailers deploying responsive sites mainly aim to satisfy customers using all kinds of devices, without having to maintain several versions of their e-commerce sites. For the most part, they say, responsive design fills the bill, though it also presents new challenges.
King Arthur Flour Co. Inc., a manufacturer and e-retailer of flour and baking products, was among the earliest online retailers to move to responsive design. The motivation was simple. More of its traffic was coming from mobile devices—22% by early 2012, up from 6% a year earlier—and managing separate mobile and conventional sites seemed unmanageable, says Halley Silver, director of online services for the company that generated Internet Retailer-estimated online sales of $17.4 million in 2011.
King Arthur Flour gradually has been, Silver says, "responsifying" sections of its web site for two years. A five-month project in early 2011 led to the launch of the recipes section using responsive techniques; the e-commerce section followed in August 2012, after six months of work.
Having a site that adapts automatically to consumers' mobile phones and tablets has dramatically increased the e-retailer's mobile sales and traffic. Mobile traffic quadrupled from November/December 2011 to the same period in 2012, and sales doubled. Overall sales for the site were up, Silver says, without providing details, but there was a clear shift to more purchases through mobile devices.
Advocates say responsive design also will boost a retailer's natural search rankings, and King Arthur Flour has seen that impact, especially on mobile devices. Visits to KingArthurFlour.com from natural search results were up over 60% overall for the first 11 months of 2012 compared to the prior year, and 267% higher from mobile devices, Silver says.
The reason that natural search results improve for responsive sites is that a single URL— KingArthurFlour.com, for example—gets credit from Google and Bing for all the links, customer reviews, social sharing and other consumer-generated activity that occurs, regardless of the device consumers use, says Randy Kohl, senior content strategist at Gorilla Group. That would not be the case if some comments were made on a mobile phone-specific site, such as m.Retailer.com, others on a tablet site, t.Retailer.com, and the rest on the PC site, Retailer.com.