Consumers are coming to the web via desktop and laptop computers, tablets and smartphones, and some retailers create separate web sites for each type of device. But another approach, called responsive web design, lets a retailer maintain a single web site and tailor what the visitor sees based on the device she’s using.
Responsive web design is a big time-saver, though it doesn’t solve all problems, said Raul Justiniano, a web designer who manages the responsive web site Original Penguin.com, one of a half-dozen e-commerce sites of apparel brand Perry Ellis International Inc.
Responsive web design’s big advantage is that there is a single code base to maintain, rather than having one set of code for a desktop site and another for a mobile phone site, Justiniano said today in a session at the Internet Retailer Web Design & Usability 2013 conference entitled “Responsive web design: One size fits all, but at what price?”
When he has to add a promotion or a new product—which he does several times a week—he makes the change once, and it shows up regardless of the device the consumer is using. “Having one site to update cuts my workload by more than half,” he said.
Another big advantage is higher rankings in search engines, because all the traffic to OriginalPenguin.com goes to a single URL. If there were a separate mobile site, some of the traffic would go to that mobile address, hurting the site’s standing in search engine results.
Although the code is the same, what the consumer sees varies by device. A responsive site gives different instructions about what to display based on the device. Justiniano showed a category page on OriginalPenguin.com that displayed three images horizontally for a visitor using a computer, but individual images stacked vertically on a smartphone screen. The images also are sized down for small screens.
The big downside he’s found in a year and a half of maintaining a responsive site comes with the marketing images that dominate the screen on the desktop site. These images of models wearing Original Penguin apparel are crucial to the brand, and simply shrinking them for a smaller screen can lose the image’s focus, and fail to adequately show the product details that are important for conversion.
The instructions—transmitted via Cascading Style Sheets, or CSS, software that dictates the placement of elements on a web page—are like a robot, Justiniano said. “It resizes the image, but it doesn’t know what’s important, what is the focus of the page.”
In order to keep the emphasis where marketers want it, OriginalPenguin.com often creates different images for a smaller screen so that it can deliver the kind of impact it seeks, even on a smaller screen. Justiniano showed an example of a central image on the desktop site of four models; for the smartphone screen it is replaced with an image of just three of the models that shows each of them at a larger size than if all four models were in the picture.
Justiniano is redesigning OriginalPenguin.com, with the aim of introducing the new site in the spring, and the new site will also be built on responsive principles. A big goal of the redesign is to make the site display better on tablet computers, which represent a growing share of the site’s traffic. He sees tablet users spending more time browsing on the site than those who come via smartphones, and he aims to provide more magazine-like content for tablet users in the new design.
Though the concept of responsive design has only been around for about three years, Justiniano told attendees at IRWD that it’s the best solution today for a world in which consumers are using devices of many sizes and descriptions.
“As we redesign the Original Penguin site, we’re going to do responsive,” he said. “Thought it’s a new thing right now, it’s the best way you can build your site.”