In 2009, when Apple founder Steve Jobs unleashed the iPhone 3G on the world, merchants finally started to see ecommerce traffic coming in from mobile devices.
Then, just as merchants were declaring that the long-awaited “Year of Mobile Commerce” had finally arrived, Jobs unleashed the first iPad. Although merchants felt the iPad was going to be used by consumers as a personal entertainment device, it, too, had an impact on ecommerce traffic.
So the question for merchants was, how to win over users of these new devices. Instead of building separate mobile and tablet sites, some merchants began to redesign their sites with a single template that would make their sites compatible across a variety of platforms.
With responsive design, merchants can have a single ecommerce site that adapts to the dimensions of the screen it is loaded to. When used correctly, responsive design is a simple and elegant solution to a very complex problem, says Blake Ellis, founding partner of ecommerce platform provider CommerceV3.
“We have customers who built, and continue to build, mobile sites that use an entirely separate set of templates than the main website delivered to computer screens,” Ellis says. “This approach gives you 100% freedom to tailor the mobile experience any way you like, but it is a bit like doing twice the work.”
And if you’re going to build a separate template for tablets, that means a merchant would have three template files to maintain.
However, if you rebuild your ecommerce site using responsive design techniques, with the goal of making your site device-independent, all you need is a separate cascading stylesheet per device type.
CommerceV3 client Steve Weiss Music was an early adopter of responsive design. The percussion instrument specialist’s site is navigation-heavy for small-screen devices like the iPhone, and adapts to tablets based on which way it is rotated. When vertical, everything on its home page is visible with the exception of the site’s footer. When horizontal, the site reacts like its desktop companion.
At IRWD 2012 in February, Halley Silver, director of online services at King Arthur Flour, told the story of her company’s rebuild using responsive design. King Arthur Flour rebuilt the recipes portion of its site using responsive design in August, a project that took six months to complete. The goal was to make the site as friendly as possible for mobile phone users, since those devices were the most frequent non-desktop devices used to access the site. And Silver had learned from her site’s analytics that users were doing their baking while reading recipes from their iPhones—which is why King Arthur Flour elected to start with its recipe section.
With all that in mind, King Arthur Flour went mobile-first. While many merchants make a shrunken version of their sites available for phones, Silver and her team made text elements larger—the same size they use for the company’s desktop site—for easier reading and clicking. If clickable text is too bunched up, Silver says, the likelihood of the wrong item being clicked goes up, and that diminishes the user experience.
Once the stylesheet was ready for the mobile experience, step two was design of the tablet experience, followed by step “2.2,” as Silver calls it, the tablet “portrait” experience. With both, there’s more spacing between clickable items.
The final step was to build the CSS for desktop use. And although desktops do not have touchscreens, King Arthur Flour decided to use the same design sketch for the desktop as it did for the tablet.
“We feel it made the website seem brighter and airier,” Silver said at IRWD 2012.
Global Industrial, a seller of industrial equipment and supplies, took screen size into consideration when it relaunched with responsive design techniques in late 2011.
The need for the tablet and mobile devices was made evident by seeing the usage habits of its customers—and the habits of its own staff, says Mark Dachel, Global Industrial director of marketing.
“We were seeing more active use of these devices within our staff for business purposes, and it seemed natural that our customers would be doing the same,” Dachel says. “We also realized that, unlike laptops, these mobile devices could easily replace tally sheets and other manual notations used by office managers and warehouse managers to keep track of supplies and products that were needed.”
Screen size was a substantial part of Global Industrial’s redesign consideration. Additionally, Dachel says the company opted for a more visual navigation, with pictures replacing text where appropriate to make the viability of shopping on a device with a smaller display a reality.
There is one thing to keep in mind with responsive design. Ellis says you do have to work within a new set of limitations. For example, you have to make a fairly complete separation of content and layout and design. Some merchants have really good reasons for maintaining completely separate versions of their storefronts, so Ellis says it may not be the way for all merchants to move.
So unless there are specific requirements that prevent it, Ellis says responsive design is the way to go. “This can be a big task, but once it’s done, you have one set of templates again and you can style this template in different ways depending on the device.”