Responsive design has drawbacks for  image-heavy sites, an IRWD speaker says.

The proliferation of web-enabled smartphones and then tablets presented a challenge to online retailers: How could they make their web sites designed for computers look good on all the devices a consumer uses?

That led to the emergence of what’s called the responsive design approach to building web sites. The idea is that a retailer or other web site owner can design a single site that displays differently depending on the viewer’s screen. That, proponents say, would allow the retailer to build and maintain a single site and still have it look good on a PC, tablet or smartphone.

In reality, the approach will work better for some retailers than others, says Raul Justiniano, a web developer for the Original Penguin brand of fashion designer Perry Ellis, who has been trying to employ responsive design principles as he designs and updates pages for OriginalPenguin.com.

He’ll expand on his views on responsive design Feb. 12 at the Internet Retailer Web Design & Usability Conference in Orlando, FL, in a session entitled, “Responsive web design: One size fits all, but at what price?

“I’ll explain at the conference the limitations of responsive design,” Justiniano says. “There are lots of benefits to having one site that works on all devices, iPads, desktops, iPhones. But there are a lot of shortcomings in what you can do in an e-commerce context.”

advertisement

The big problem Justiniano encounters involves images, which play a big role in promoting products at OriginalPenguin.com, an apparel site. Employing responsive design principles, the site could be programmed to shrink an image by, for example, 50% when presenting a page to a consumer using a mobile phone. But that’s not a good solution for OriginalPenguin.com, he says.

“We can’t shrink images because our images are important for representing the brands we’re selling,” he says. “If you shrink the image you’re not able to see all the details the users like to see.”

Instead, the e-retailer creates different images for smaller screens. For example, a home page image that shows PC users six fashion models might be cropped to show just four models, so that a smartphone user still sees the apparel with sufficient detail. Justiniano calls that approach adaptive, rather than responsive, because it’s using different elements in some cases. However, in some respects the site remains responsive. For example, the categories, site structure and product categories remain the same, regardless of the device the shopper is using.

Justiniano says responsive design is a good approach for retailers whose sites rely heavily on text—which can be more easily resized automatically than images. And it may be the most practical solution for smaller e-retailers that lack the resources to create different images, or sites, for PCs, tablets and smartphones.

advertisement

Internet Retailer’s editors asked Justiniano to speak not only because of his 10 years of design experience, but his work before Perry Ellis, which included the creation of print, web and mobile interfaces for such clients as AT&T, Best Buy and  PBS.

Favorite