February 3, 2014, 11:14 AM

Challenging web design

The much-discussed design technique that renders sites for all devices  is proving its worth to some retailers. But is it the answer for all?

Lead Photo

In late 2011, e-retailer Skinny Ties decided it was overdue for a site redesign. It also was wrestling with how to serve the growing number of online shoppers arriving at its site via smartphones and tablets. At the time, most retailers were addressing the mobile conundrum by creating a mobile commerce site for smartphones separate from their desktop sites, and largely relying on their PC sites to serve the then-small group of tablet shoppers.

But Skinny Ties chose a different path after Brendan Falkowski, the retailer's head of information technology, came across the then-new concept called responsive web design. The idea is that a single web site adjusts to the size of the screen the visitor was viewing, all from one code base and one set of web content.

Falkowski decided that was precisely what Skinny Ties needed. Why redesign the e-commerce site, create a site for smartphones, and create a site for tablets, when he could just build a single site that automatically transformed itself for all three, and for widescreen monitors, smart TVs and devices yet to be?

So Falkowski built a new site for Skinny Ties using responsive design techniques, with guidance from president Stuart Sanft. The approach was still so new that he couldn't find another retailer with a responsive site and consequently had to devise many design elements and coding solutions. (Responsive design is more a set of principles than a structured technique, though today there is a growing body of knowledge about how to code responsive sites.)

Skinny Ties launched its responsive site in October 2012. As of November 2013, sales via tablets were up 190% and via smartphones up 231%, Sanft reports. And responsive design didn't just help with mobile devices: Sales via desktops and laptops were up 99%.

"Responsive design is directly responsible for our shoppers converting at a much higher rate than before," Falkowski says.

Other retailers have taken note of responsive design's benefits; at the end of 2013, 39 of the merchants in the Internet Retailer 2014 Mobile 500 had responsive sites. A year earlier, only a handful of merchants had responsive sites.

The shift comes as the number of consumers accessing retail sites via mobile devices is steadily growing. In 2013, mobile became the predominant way shoppers interacted with e-retail sites: 44% of time spent with online retailers occurred on a smartphone and 11% on a tablet, according to web measurement firm comScore Inc. Google Inc. research shows that 85% of online gift shoppers start shopping on one device and finish on another, highlighting the importance of a retailer presenting its web site effectively no matter the device.

The appeal of a single web site is clear. Not only does it mean a retailer only has to build one site, it also can add a product or promotion one time and have the update appear on all screens, meaning far less maintenance than operating three separate sites. Advocates argue further that responsive sites will inevitably rise in natural search rankings because every page on a responsive site has one URL, not three URLs (desktop site, tablet site, smartphone site), which split the total value or credibility assigned by Google and Bing. This provides a stronger, consolidated target for search engines.

Critics, however, say a responsive site can't be as appealing as one designed specifically for a PC or a smartphone, and that the design approach particularly falls short for retailers that offer many SKUs. As the debate rages, more retailers are going the responsive route. As they do, they are developing variations on the approach that can improve site performance and address some of responsive design's limitations.

1-800-Contacts Inc. is one e-retailer that put responsive to the test. In early 2013, the web-only merchant pitted its existing smartphone-optimized site against a new responsive design site, splitting mobile traffic between the two. A few months later, the verdict was in: the smartphone site was retired, the responsive site won.

"Conversion rates improved, and we only have to manage one code base and one set of analytics instead of having tags from multiple platforms," says Phil Barrett, the retailer's senior vice president of e-commerce and mobile. "Mobile is changing so fast that a responsive experience allows us to scale, adopt and convert on all screen sizes and form factors."

The old ways of designing for web commerce won't cut it any longer, Barrett says. "In the future, all online shopping will be mobile," he says. "We're trying to get ahead of it and put our best mobile offerings in place."

Web-only home improvement retailer CPO Commerce Inc. went responsive in November 2013. Had it opted for the more traveled path, its 46 e-commerce sites would have multiplied to 138 sites: one each for desktops, tablets and smartphones. CPO executives credit responsive design in part for its tablet traffic jumping 40% in 2013 over 2012 and smartphone traffic leaping 30% for the same period.

In summer 2013, CPO, which offers manufacturer-specific sites and the flagship CPOOutlets.com, set a team of six design and technology staffers the task of taking the company responsive in less than four months, in time for the holiday season.

By the time CPO began the project there had emerged two styles of responsive design: pure and hybrid. Pure responsive design packages all the content needed to render a site for desktops, a site for tablets and a site for smartphones into a single large file that a retailer's servers send to the device the visitor is using. The web browser on the device communicates the size of the screen and pulls from the file the content it needs to build a site that fits that screen. With hybrid responsive, also known as responsive with server-side capabilities, or RESS, a retailer's servers detect the device's screen size and web browser capabilities and send to the browser only the content needed to build a page to fit that particular device.

comments powered by Disqus




From The IR Blog


Cynthia Price / E-Commerce

4 tips for improving email marketing results

Every piece of data you collect can help you serve your audience exactly what they ...


Bart Mroz / E-Commerce

How smaller retailers can utilize data as effectively as Amazon

Smaller companies have more constraints, but once they set priorities can still benefit greatly from ...

Research Guides