February 3, 2014, 11:14 AM

Challenging web design

(Page 2 of 5)

Because a lot of processing happens on the server before it transmits to the browser the hybrid approach helps make the most efficient use of available bandwidth and speeds load times. But it also requires more complicated coding and a retailer needs a server-side template for every class of device, which means duplicate coding that must be maintained, says Darla Sawler, interaction designer at e-commerce and m-commerce design firm Corra.

"The pro with pure responsive is that you have a single, flexible overall design and code base that adapts on the fly to the device type," she says. "RESS today is what pure responsive was a few years ago—a technique being worked out by some leading developers and designers that gradually made it into the mainstream. We'll be building a majority of our sites with the hybrid approach within 12 to 18 months."

RESS is, at its heart, still responsive, which means that not everything on the page will vary, Falkowski says. "Practically, most content can be the same across all devices, and that's proven by pure responsive design implementations," he says. "It's best to think of RESS as an enhancement. You could build out an RESS component just for serving images or navigation—the two cases where it really matters—and leave everything else alone."

That is exactly what Fathead LLC did when it went responsive. At Fathead, an e-retailer and manufacturer of life-size wall decals of athletes and other graphics, mobile traffic jumped from 4% in December 2009 to 42% in December 2012. The merchant launched its responsive site in November 2012 using the pure approach—more or less. All content is sent in one file except for images. The merchant's servers detect what kind of device is requesting the site and sends only images optimized for that device.

The Fathead site uses the grid system common to responsive design, in this case slicing views up into one-column, two-column, three-column, four-column and five-column. The one-column view (smartphones) accounts for 16% of traffic; the two-column view (smaller tablets), 6%; three-column (larger tablets and desktops), 54%; four-column (widescreen desktops or laptops), 17%; and five-column (the widest widescreen desktops or laptops), 7%.

Comparing the first half of 2013, when the responsive site was active, with the first half of 2012, before the responsive launch, smartphone conversion rates rose 90%, smartphone revenue per visitor jumped 70%, smartphone revenue increased 538%; non-phone conversion rates rose 17%, non-phone revenue per visitor jumped 15% and non-phone revenue increased 25%.

CPO Commerce also took a pure responsive approach—but only as a stepping stone to developing hybrid 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. The work, he says, requires about three more months of research and development.

Barrett of 1-800-Contacts.com chose the hybrid approach because he believed a single-file responsive delivery would put too much stress on wireless networks—3G wireless is much slower than landline broadband, he says.

"Retailers ultimately are more likely to fall in line with the hybrid model as opposed to pure responsive," Barrett says. "With hybrid, your server is doing device-specific adjustments that can improve performance and the user experience," he says.

Indeed, the biggest downside to pure responsive design is that it can slow page loads to mobile devices over wireless networks, say experts. 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 compresses images for transit so they are as light in kilobytes as possible without sacrificing image quality. It also uses 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 times a consumer's web browser has to request data from a retailer's server to fully render the page. That speeds page loads.

Generally speaking, m-commerce sites designed specifically for smartphones load pages faster than hybrid responsive design sites on mobile devices, and hybrid responsive design sites load pages faster on mobile devices than pure responsive design sites, says Ken Harker, a mobile performance expert at mobile and web performance management firm Keynote Systems Inc.

"A mobile-specific site will identify a device is an iPhone 5s and know the exact screen resolution and deliver content scaled precisely for that device, while a hybrid responsive site will know the device is a smartphone and deliver versions of content for screens between 3 inches and 5 inches," Harker explains. "A mobile-specific site is only sending precisely what is needed, thus using fewer kilobytes and not wasting any network time. Similarly, a hybrid responsive site is sending less data than a pure responsive site, and thus is faster."

However, Skinny Ties, a pure responsive site, bests by 2 seconds the early December average load time for the 30 retailers on the Keynote Mobile Commerce Performance Index, a measure of m-commerce sites optimized for smartphones as measured by Keynote. The e-retailer says its first page mobile load time is less than 6 seconds while the Keynote index average was more than 8 seconds. Falkowski says retailers with pure responsive sites shouldn't be so focused on first page load times.

"The first page is the slowest—every page a consumer goes to after that, our speed increases 300% to 400%," Falkowski says. "That's because so many page elements get used again, and we are sending them in a way that allows for each page to be cached so content is never loaded more than once."

comments powered by Disqus




From The IR Blog


Rochelle Bailis / E-Commerce

Nordstrom vs. Macy’s: a department store showdown

Not only does Macy’s attract more online traffic, more of that traffic comes from mobile ...


Jaysen Gillespie / E-Commerce

Be a smart marketing Cupid in February to maximize sales

Campaigns optimized for smartphones will capture more last-minute sales and keep in mind that shoppers ...

Research Guides