Web design through a mobile lens

Retail web designers’ biggest challenge is crafting sites for mobile devices as well as PCs. Concurrent conferences on web design and m-commerce will focus on that task.

Don Davis

If ever there were a year to combine a conference on mobile commerce with one on retail web site design, this is it.

That's because the biggest challenge facing retailers' web design teams today is how to build e-commerce sites that look good no matter what device a consumer is using—a laptop or desktop computer, tablet or smartphone. The importance of crafting a site that functions well on mobile devices was reinforced over the four-day Thanksgiving holiday weekend, when more than 30% of traffic and 18% of sales came from smartphones or tablets, IBM Corp. says.

"A shift is happening," says Todd Sprinkle, vice president of content and platform innovation at TV shopping network and online retailer QVC, a unit of Liberty Interactive Corp. "Sessions are going to these devices that have smaller screen resolutions. We have to make concessions and make sure the things we put in front of the customer first are the most impactful for her experience."

Sprinkle will deliver a keynote address at the IRCE Focus Mobile Commerce conference, which will take place at the same time and in the same hotel in Orlando, Fla., as the annual IRCE Focus Web Design event. Both conferences, together called IRCE Focus: Web Design + Mobile Commerce, are slated for Feb. 10-12. Anyone attending one conference will be able to attend sessions at the other, as well as to visit the shared exhibit hall. (For more details, see the sidebar on page 46.) That will provide attendees with plenty of opportunities to learn and discuss how best to reconfigure retail web sites with mobile devices—in all their growing varieties—in mind.

The question of how to design e-commerce sites for both mobile devices and computers will be a major topic of the design conference as well. For example, Sumant Sridharan, president of online retailer CafePress Inc. and a keynote speaker at the Web Design event, will discuss how the e-retailer has reduced page-load times and kept more visitors on its site since relaunching its site in October 2013 using the responsive design approach that adapts the way a web site looks depending on the size of the screen the consumer is using.

Indeed, the phrase "responsive design" is likely to be the center of many discussions during the three days of the web design and mobile commerce conferences. The February meetings will provide an opportunity for retail web designers and mobile commerce specialists to compare notes on the new techniques they've developed to maximize the advantages of responsive design, while minimizing its drawbacks.

Meanwhile, other retailers that have not gone the responsive route will address how they are responding to the multi-screen challenge. In many cases, the answer is to do a better job of figuring out what the web site visitor wants, and presenting her that information clearly and prominently. That often means eliminating the unnecessary clutter that is far more distracting and likely to deter a purchase on a mobile phone's small screen than on a computer monitor's wide screen. It's easier said than done, and speakers at the two conferences will provide details on how they have been accumulating information about their customers to better understand shopper intent and tailor their site designs accordingly.

That kind of informed simplicity is the new norm at CafePress, Sridharan says. For example, if a customer begins looking for maternity wear on CafePress.com the e-retailer can put her into its "new mothers" category and show her items other new mothers are interested in, such as baby apparel.

Personalization is especially important for CafePress, a site that lets consumers customize a broad range of items—mugs, T-shirts, even Monopoly games—with their own photos or designs submitted by artists from around the world. In all, the site offers some 600 million possible items, Sridharan says, and searching through them all is tough enough on a computer, let alone on a mobile phone. The e-retailer's latest design makes use of what it knows about the customer, both from her purchasing history and browsing data, to present the merchandise most likely to appeal to that shopper.

That's particularly crucial now that more consumers are shopping on mobile phones and tablets. "On a mobile device, you can't possibly look at thousands of products to make a purchase decision," Sridharan says. "Rather we take our best guess of the 10 products you'll be most interested in and put those in front of you. We think that will be a better experience for the consumer."

Making it easy for the customer to find what he wants was also a central goal at office supplies chain Staples Inc. as it redesigned its mobile commerce site, says Faisal Masud, executive vice president of global e-commerce at Staples, and a keynote speaker at the Mobile Commerce conference.

After studying customer activity data, Staples put at the center of its new mobile site, which launched in November, the three categories consumers were most often searching for: electronics, office supplies and maintenance products. Pushed to the bottom of the mobile screen were elements previously more prominent, including weekly ads and a store locator. The retailer also eliminated a rotating carousel of images, which slowed the mobile site down, Masud says. The mobile site now loads two to three times as fast, he says.

After seeing a growing number of consumers buying from its mobile site, Staples also made a strategic shift away from designing the site primarily to drive consumers into Staples stores, Masud says. "We had to reengineer some of that, because our customers wanted to be able to shop, not to be told to go to the store," Masud says. "They're coming to the mobile web because they find it convenient. We've become a lot more agnostic. Whether they go to the store or not, we want to provide the best possible experience in their journey."

QVC also is determined to cater to its core customer, whether she is watching a shopping show on her iPad, shopping on her smartphone from the sidelines of her daughter's soccer game, or viewing QVC.com on a computer. Designing for the mobile shopper is crucial for QVC, which saw 32.7% of its sales in its fiscal third quarter ended Oct. 31 come from mobile phones and tablets, compared to 23.8% a year earlier.

Sprinkle says QVC—which focuses on Apple Inc. mobile devices because that's where most of its traffic comes from—has been updating its iPad and iPhone apps to ensure they meet its customers' needs. For example the iPad app makes it easy for customers to interact with QVC's popular "In the Kitchen with David" cooking show. Consumers can use the app to send chat messages that David Venable and co-host Mary DeAngelis respond to on-air, participate in polls and share recipes. "We're taking information coming in through chat and responding live on the air," Sprinkle says. "It's a very immersive experience."

QVC is also responding to its growing mobile audience by starting to rework its e-commerce site using responsive design principles. The retailer began with the final stages of the purchase process—the shopping cart and checkout pages—and the My Account page. Those are being redesigned using responsive principles so that they adapt to the screen the consumer is using.

QVC started there because there are fewer choices at the end of the checkout funnel than there are at the beginning, Sprinkle says. Earlier in a shopping trip, QVC.com presents the shopper with many more options of how to shop, and that, Sprinkle says, is forcing the retailer to think about what each page must present, and what can be left out to pare down the page for mobile consumers. "You can't feature every single piece of content as you can on a desktop site because you're dealing with less real estate," he says. "It requires a new way of thinking, letting go of some long-held beliefs." That thought process is underway, he says, and within a year QVC expects its site to be fully responsive, "from the home page through checkout."

As retailers like QVC plan a move to responsive sites, they will no doubt be looking to learn from some of the responsive pioneers speaking at the February conferences in Orlando.

Among them will be Michael Layne, director of Internet marketing at Fathead LLC, which relaunched its site using responsive principles in November 2012. The web-only retailer designed each page so that it could be viewed in one to five columns—one for smartphones, two for smaller tablets, three for larger tablets and some PCs, all the way up to five columns for the widest desktop monitors. The page adapts to the viewer's screen size.

The results, Layne says, vary dramatically based on the screen: Consumers shopping on wide monitors convert more than six times better than those on smartphones, but the two-column view that many iPad shoppers see produces the highest average order value.

Fathead sends all the versions to the consumer's browser, which picks the right one. That allows the consumer to shift quickly from the two-column to three-column view if, for example, she turns her tablet from the vertical portrait orientation to the horizontal landscape mode. Layne is aware that sending all the data for five possible views could make the site load slowly. "We do our best to keep the HTML pretty simple and well laid out so it doesn't hinder page load time," he says.

Other retailers, however, have chosen a variation they call "adaptive design" in which the retailer's server recognizes the size of the shopper's screen and only sends the versions appropriate for that device. That's the approach taken by Jewelry Warehouse Inc. for its GarnetAndBlackTraditions.com e-commerce site that sells merchandise tied to the University of South Carolina.

The advantage is speed, says Soumen Das, CEO of UniteU Technologies Inc., which developed the e-commerce site. The version for a smartphone requires transmitting less than a quarter of the data of the desktop site, and that version downloads five times faster than it would if the server sent data for all the versions, says Das, who will speak at the mobile conference with Chris Boomhower, director of e-commerce at Jewelry Warehouse. "The idea is to get speed," Das says. "For e-commerce, that's very important."

But there's an added trick: the retailer downloads two versions to a smartphone or tablet. That way if a consumer turns her tablet from the vertical portrait mode to the horizontal landscape display, she still sees an appealing version of the site, without the delay that would be introduced if a server had to send a new version to her device.

It's just one example of how mobile experts are fine-tuning responsive design. Putting retail web designers and mobile commerce experts in one place in February is sure to spark new ideas on how to address the many challenges of site design in the mobile era.



Two conferences, one ticket

Two e-commerce shows that previously took place at different times and in different places are being combined this year in IRCE Focus: Web Design + Mobile Commerce, set for Orlando, Fla., Feb. 10-12.

"By bringing together the Web Design & Usability and the Mobile Commerce conferences into one event, we're aligning two of the hottest and most important topics in e-commerce–and delivering an incredible educational value for retailers and e-commerce professionals," says Craig Dooley, senior vice president and group show director for IR Events Group, a division of GLM that is organizing the Orlando conferences. Emerald Expositions Inc. announced plans to acquire GLM in December. The deal is expected to close later this month.

Anyone who registers for either conference will be able to attend sessions from both, and to visit the shared exhibit hall.

The agendas for the mobile commerce and web design conferences were prepared by the editors of Internet Retailer magazine. GLM last year purchased the two conferences taking place next month and sister event IRCE from Vertical Web Media LLC, publisher of Internet Retailer. IRCE 2014 will take place in Chicago June 10-13.


Chris Boomhower, e-commerce site design, Faisal Masud, IR Focus, January 2014 Magazine, Michael Layne, mobile site design, responsive web design, Soumen Das, Sumant Sridharan, Todd Sprinkle