The Top 500 retailer buys Campus Deals, which offers mobile coupons to college students.
The toughest design puzzle ever
(Page 2 of 3)
Shifting to a mobile mindset wasn't easy because the retailer's designers were accustomed to designing for full screens first, Silver says. Because of smartphones' small screen sizes, the new approach forced the company to think hard about what was essential.
"Starting with mobile as the foundation for your site means you have to boil down content," says Seth Whitton, senior designer with web site design firm Alexander Interactive. "A lot of times designers put fluff into desktop sites and when they try to cram it into mobile, it doesn't work."
Todd Luckey, senior user experience specialist at technology consultancy Usability Sciences Corp., agrees. "What mobile does is it forces people to think through and design more," he says. "Tricks like mouseovers are almost a crutch for designers because they can stick it in and desktop users can find it. The trouble is those tricks don't work with mobile or tablet design and so it forces them to be much better designers."
Luke Wroblewski, author of the book "Mobile First," whose presentation compelled Silver to prioritize mobile design, says a new design approach is inevitable. "It is very hard to let go of what you know. You have to really think differently, rethink the new palette and paint new experiences for people or someone else will," he says.
An uncluttered look
At King Arthur Flour, the mobile-first design resulted in the company nixing its long list of navigation options and blowing the search box up to about three times its size, for example. The result, Silver says, is a site that is immensely more usable for mobile customers and cleaner and less cluttered for desktop users. "When we started wire framing our new site, we all liked the mobile version better," she says. "When we started with the mobile version it was pretty easy to expand that out to tablet and desktop designs and remove the clutter."
Amazon.com Inc. in September began testing a new look for Amazon.com that designers and web consultants say is meant to appeal to tablet users. Like King Arthur Flour's approach, the Amazon design adds white space and increases the size of the search box. It also eliminated flyout windows so consumers only have to tap a category name to view its results, rather than make multiple selections as with the previous design.
King Arthur Flour's designer started building the new web site pages with a basic template for responsive web design called 320 and Up, Silver says. The 320 and Up template is available for free online. With it, he built cascading style sheets, the technology that instructs a web browser to render a web page according to the style assigned in the style sheets for the particular device the customer is using.
For example, when a customer is using an iPad in landscape mode, KingArthurFlour.com responds with a style sheet that instructs the browser to render the web page in the format the designer set for landscape view in a 9.7-inch tablet. A customer accessing the web site with an iPad in portrait mode gets a different sheet with a different layout. The same text, for example, may flow differently or appear in a different place on the page.
It took about six months for the designer to build all the style sheet templates. "There was more to think through from the development and design perspectives, and there definitely was a big learning curve for our designer," Silver says. "But now that we have the sheets built, it has been easy to roll out to other pages."
The mobile sites Abercrombie & Fitch rolled out last year also follow responsive web design principles, Morr says. The retailer's design and user experience teams decided internally how they wanted pages to render across mobile devices but then outsourced some of the style sheet writing, she adds.
Whitton says that, because many e-retail sites have a lot of moving parts, such as plug-ins from vendors that limit how an e-retailer can manipulate them, and unique site features that use different code standards, a responsive design approach isn't right for all. "It really depends on who you are designing for and your strategy and goals. A desktop site is a given, but if a significant portion of your audience is using a specific device like an iPad, instead of making a responsive site, I'd suggest designing an iPad interface first and let that be your solution. Then you can fill the gaps elsewhere."
Coming up with a design solution for an e-retail site is a complex process. Jewelry retailer Ross-Simons.com says it plans to make subtle changes to its desktop site to improve the site's usability on tablets, but the e-retailer will carefully test their effects first, says Joan Abrams, Ross-Simons' director of e-commerce. "The majority of traffic and sales is still from desktop users, so the question is how to change it so you don't alienate those users," she says. Ross-Simons launched a mobile-optimized site for smartphone users through mobile commerce technology vendor Moovweb in October.
Ross-Simons engaged web site design consultancy Trinity Insight to conduct a usability analysis this fall to see how Ross-Simons.com performed on tablet computers. It suggested that some buttons were too close together, which makes it hard for tablet users to go to the pages they want to visit. Abrams says that should be an easy fix.
A tougher question is how to handle mouseovers, in which hovering over a menu item with a mouse cursor makes a window expand with more clickable options. On Ross-Simons.com, for example, hovering over "gemstones" expands a window where consumers see 30 links to different gemstone types. Tablets don't register hovers. How to solve that issue will take more consideration, Abrams says. "You can't go from 50 links (in a mouseover window) to 10 on-screen clicks and expect that people will find everything from before."