February 4, 2013, 10:28 AM

The all-in-one solution

(Page 3 of 3)

Even as pioneers work out the kinks in early responsive sites, others are looking at adapting what a web page looks like not just to the user's screen but to his context. For instance, a retailer might show one home page to a consumer in the company's store and another to someone elsewhere or vary the presentation based on the Likes of his Facebook friends, says Dennis Bajec, chief creative officer at digital marketing agency Resource LLC, which calls that approach Responsive Experience Design. He says his agency is working with clients on that approach, but declines to name them.

Hertz is already considering how to employ responsive design to deliver context-relevant information to customers, says CIO Eckroth. Hertz recently introduced a service called Carfirmations that lets a customer about to pick up a car choose a different vehicle or add options, and presents special offers with mobile check-in service Foursquare for customers near an airport.

"We're always thinking about how do we make a more intimate, personalized event-based experience," Eckroth says. "This technology allows us to do that."

If responsive design can help a consumer-oriented firm like Hertz personalize its service, retailers will want to know more about how they can do the same.

don@verticalwebmedia.com

@dondavisIR

How responsive design works

In simple terms, responsive design enables a web site to recognize the device the consumer is using and present a version tailored to that screen size. But understanding the technology behind it can help retailers deploy responsive sites most effectively.

A key component of responsive design are media queries, a feature of CSS3, the latest version of the Cascading Style Sheets software that dictates where elements appear on a web page. A responsive site uses a single set of HTML code for all versions, and employs CSS to determine which features will display, and at what size, depending on the size of the browser window, or viewport, the consumer is using. Some retailers, for instance, may hide the About Us link to save space on a mobile screen; Hertz Inc. makes sure that the option to view, modify or cancel a reservation is easily visible on a smartphone because that's important for travelers.

Retailers typically create breakpoints, showing a limited version of the site to consumers on the smallest screens, and expanded versions to bigger screens. For example, e-retailer King Arthur Flour serves different versions for five resolutions. One is for screens up to 320 pixels wide and another for 480 pixels wide; both are designed for smartphones, with the wider version for when the phone is held horizontally, or in landscape mode. For tablets, the retailer provides versions for 600 and 768 pixels, and for PCs at 1024 pixels.

While the CSS file contains instructions for all versions, it does not download the images for all versions, just pointers to the images stored on servers, says Mariano Ferrario, director of e-commerce solutions at e-commerce software provider NetSuite Inc. Even though the CSS file is slightly larger, the difference in download time from server to the user's device is imperceptible, Ferrario says.

Once the media query establishes how big the viewport is, the software only downloads images suited to that screen. That way, a large image for a desktop PC does not slow the loading of a page on a smartphone. "The crux of responsive design is making sure you're downloading the right amount of information at the right time," Ferrario says.

Also important, he says, is to define image size by the percentage of a display it will occupy, such as 50% of the browser window, rather than specifying, for example, that it be 200 pixels wide. That way an image can appear slightly larger on the screen of a Samsung Galaxy smartphone than on a smaller iPhone 4, even though they both use the same CSS instructions.

To avoid impaired performance retailers should bundle dozens of commonly used elements into a single server request called a sprite, says Chris O'Connell, director of engineering at design agency Gorilla Group. With steps like that, a responsive design should take just a few milliseconds more than a standard site to load, just long enough for the software to recognize the device size and request the data it needs. "Is that significant to an end user?" O'Connell asks. "Maybe. Probably not."

Comments

Sign In to Make a Comment

Comments are moderated by Internet Retailer and can be removed.

Not a member? Signup for free today!

Advertisement

Advertisement

Advertisement

Relevant Commentary

FPO

Jason Squardo / Mobile Commerce

Five tips for achieving high mobile search rankings

Searches on mobile devices will soon exceed those on computers, Google says. Retailers that keep ...

FPO

Sergio Pereira / B2B E-Commerce

Quill turns to its B2B customers for new ideas

Coming in April is a new section of Quill.com that will let customers and Quill ...

Advertisement