The e-retailer is killing three birds with one stone—responsive design.
Bill Siwicki , Managing Editor, Mobile Commerce
Responding to increasing traffic from smartphones and tablets, web-only home improvement retailer CPO Commerce Inc. has launched responsive web design versions of all 46 of its commerce sites. Had it opted for the more traveled path in mobile commerce, its 46 e-commerce sites would have exploded to 138 sites, equally divided between desktops, tablets and smartphones.
CPO Commerce executives saw responsive design as a life-saver as their tablet traffic jumped 40% in 2013 to date over the same period in 2012 and their smartphone traffic leaped 30% for the same periods.
“Retail is going mobile, screen sizes are constantly changing, and we had to respond,” says Jeff Emmons, vice president of e-commerce at CPO Commerce, No. 248 in the 2013 Internet Retailer Top 500 Guide.
In the summer, CPO Commerce, which offers sites dedicated to popular manufacturers plus the flagship CPOOutlets.com, set a team of six design and technology staffers to take the company responsive in less than four months, aiming for a launch in time for the 2013 holiday shopping season.
Responsive design offers web retailers a more efficient and less expensive alternative to building and maintaining a desktop site, tablet site and smartphone site, some retailers and design experts say. There are 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 one jumbo file that a retailer’s servers send to a client device, where the web browser identifies 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 client device screen size and web browser capabilities, then only sends to the client browser the content needed to build a site to fit that screen and browser.
CPO Commerce went with the pure responsive approach—but only as a stepping stone to developing hybrid responsive sites.
“Although a hybrid approach is preferred because of performance benefits, the added development time would have prevented us from finalizing the project before the 2013 holiday shopping season,” says Alex Martinez, senior design manager at CPO Commerce.
Indeed, the biggest downside to pure responsive is that it can slow page loads to mobile devices over wireless networks. That’s because it’s initially sending one huge file with everything needed to render a site on three different devices. But retailers with pure responsive sites are finding ways around this problem.
CPO Commerce is compressing images for transit so they are as light in kilobytes as possible without sacrificing image quality. It also is using Cascading Style Sheets sprites. CSS is a mark-up language used to define pages and denote where elements appear on a page. A CSS sprite is a web programming technique that enables multiple images to be saved as one, thus reducing the number of web server calls required, which speeds page loads.
When switching its 46 sites to responsive design, CPO Commerce made sure its merchandisers had their say in the new design. “They helped figure out the look and feel of the site and how products are merchandised,” says Emmons. “We held bi-weekly meetings and included representatives from merchandising, marketing and site operations.”
An invisible member of any retailer’s responsive design team is Google, which last year encouraged retailers catering to mobile shoppers to adopt responsive design. Some experts believe responsive sites will appear higher in natural search rankings. This is because when a site only has one URL per page (as is the case in responsive) versus three or more URLs per page (with separate sites for various devices), Google can give all ranking credit to the one URL rather than split credit between various sites. Google also wants to send its searchers to sites that will provide them with the best experience for the device they’re using; Google says responsive ensures that.
Martinez estimates it cost CPO Commerce on average around $50,000 per site to go responsive, for a grand total of $2.3 million. Retailers who have recently sent out requests for proposals to vendors for building tablet-optimized sites and smartphone-optimized m-commerce sites tell Internet Retailer quotes average just under $200,000 combined for both sites. That would have bumped up CPO Commerce’s bill to $9.2 million for its 46 sites, a difference of $6.9 million.
459 of the merchants in the 2014 Internet Retailer Mobile 500 have m-commerce sites for smartphones, 34 have tablet-optimized sites, and 39 have responsive web design sites. A year earlier, only a handful of merchants had a responsive design site.
Changing consumer behavior is driving more retailers toward responsive design. In 2013, mobile became the predominant way shoppers interact with e-retail: 44% of time spent with online retail occurred on a smartphone and 11% on a tablet, according to web measurement firm comScore Inc. Google research shows that 85% of online shoppers start shopping on one device and finish on another.