February 14, 2012, 2:52 PM

IRWD 2012: Build one ‘responsive’ site for all types of traffic

But adopt a mobile-first approach, King Arthur Flour finds.

Thad Rueter

Senior Editor

Lead Photo

Rather than build multiple e-commerce sites for all the devices consumers use to access the web, e-retailers can build a single “responsive” site that can adapt to different devices, Halley Silver, director of online services for King Arthur Flour, told attendees today at the Internet Retailer Conference and Exhibition 2012 in Orlando, FL.

Silver, a featured speaker, spoke during a session entitled “The mobile-first approach to web multi-platform design.” She said that about a year ago the baking goods supplier embarked upon its mobile site design effort. Rather than build separate sites optimized for computers, smartphones and tablets, however, the retailer embraced an approach called responsive web design—the site changes size and the content it displays depending on the device being used. A consumer accessing a site from a smartphone, for instance, would see a smaller, less cluttered site than would a consumer visiting from a desktop computer.

King Arthur Flour decided to start by concentrating on the mobile site first, followed by tablet and then desktop. “Mobile is exploding,” Silver said. What’s more, she said, beginning with mobile forced the retailer to decide upon the most important elements to include on the screen, which would be limited by size. After building the mobile site, the retailer then could add other elements for the larger screens.

The different ways in which consumers use the King Arthur site helped guide the design choices; consumers with smartphones often look up recipes while shopping in supermarkets, while a consumer cooking in her own kitchens may well be using a tablet computer to follow the recipe. To avoid having those consumers touching their tablets with flour-covered hands, Silver said, King Arthur designed the tablet version of the site so that the cooking instructions are near the ingredients, minimizing the cook’s need to touch the tablet.

Overall, she said, “Coding took a really long time, probably two months for five or six templates.” But the effort is worthwhile, given recent traffic trends for King Arthur Flour’s e-commerce site. “22% of our traffic comes from mobile and tablets, up from 6% last year,” Silver said. “We’re skating to where the puck is going.” She said that since Apple Inc. devices account for 90% of the retailer’s mobile and tablet traffic King Arthur did not make any design allowances for Android devices.

Retailers that embrace responsive site design should know about the trade-offs, she said: Development and testing takes longer for those sites than for mobile- or tablet-only sites, and performance likely will suffer, given that coding requirements mean responsive sites are not as lean as other sites. But, Silver added, the increasing reach of Wi-Fi networks and the continuing improvement of phone networks that provide Internet connections for mobile devices will lead to better performance.

Comments | 2 Responses

  • Interesting approach. We're redesigning our website and obviously thinking about this ourselves. What concerns us about the mobile-first approach is the temptation to think about it as a "reduced" site. Instead, we're challenging ourselves to bring the full value of each page to every mobile format. King Arthur certainly kept that in mind, it sounds like, and innovated design to accommodate. Yet starting off by reducing content raises the question at large of why there's any extraneous information on *any* version of a site. What are other readers' experiences with this? Do you accept the premise that content must be reduced for mobile display? -Margaret, LiquidPixels.com

    • I think the important thing to take away from the mantra of adopting a mobile-first approach is that in most cases, it would require the most thought and effort to reduce and/or focus your content and user experience given the reduced screen real estate, touch capabilities, and in most cases with mobile devices -- limited bandwidth (unless on Wi-Fi). Despite this mantra, I do disagree with your overall premise that content must be reduced for mobile display but rather just that it be different. Complimenting the above article, "responsive" shouldn't necessarily equate to "reduction". It simply means that all devices are not created equal and that a single site should "respond" appropriately to what that device can handle. And I'll take it one step further as this point is often missed in many articles on responsive design -- device capabilities aside, you really need to examine the context in which the site is being accessed. This article gives a good example of that in their consideration for users of tablets -- the same content, just organized differently to make the most of the real estate of that device and factoring in the most likely use case. My firm has done similar and more complex work in other industries and I'll cite one we've done in the medical space. If a user is visiting a hospital web site from a mobile device, they are likely after some very specific information so the user experience may be very different for mobile prioritizing emergency room, parking and contact information over other content. So with responsive design, I'd just like to stress two things to drive your content-pruning decisions: "device capabilities" and more importantly "user context". -Arwin Holmes, northps.com

Sign In to Make a Comment

Comments are moderated by Internet Retailer and can be removed.

Not a member? Signup for free today!




Relevant Commentary


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 ...


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 ...