Six years ago, Moosejaw Mountaineering launched its first home-grown mobile site. In 2011, the outdoor apparel retailer decided to take a leap and drop the mobile site in favor of a single e-commerce site fully integrated to work as well on a smartphone as from a desktop computer, says Eoin Comerford, the retail chain’s president and CEO.
The retailer employed an approach called responsive web design. One element is the use of software code known as cascading style sheets, or CSS, that can identify the size of the web browser on which a page is opening and adapt the display accordingly—for instance, to display in the relatively small screen of a smartphone.
Comerford demonstrated the effect during his session at the Internet Retailer Conference & Exhibition 2012 by shrinking the edges of his browser window while on Moosejaw.com to about the size of a smartphone screen. Immediately, the product display changed to a version optimized for mobile, including flipping the product listings from horizontal to vertical for better scrolling and switching to larger buttons for fat thumbs—though the content of the page remained the same.
“You are on the same site, it’s a much better user experience,” he said. Unlike with some dedicated mobile sites that may not be fully integrated for checkout or other web functions, with the responsive design approach, Moosejaw customers can take the same actions no matter how they browse.
The downsides are mainly time and expense, Comerford said, and there can be limitations to what features will work on a site created via responsive design if a retailer is retrofitting an old site. That’s what Moosejaw did, working with its existing e-commerce site rather than starting from scratch. Retailers that are planning a web site overhaul instead could get around some of those limitations by rebuilding with HTML5, the newest and most flexible web development code, he said.
One problem Moosejaw faced by retrofitting was slow page load times, since large, glossy web site images are hard to compress for a smartphone screen. Moosejaw uses the vendor Cotendo to provide adaptive image compression, which monitors the site’s response time and varies image compression to improve speed. “The load speed is pretty similar to a regular mobile site,” Comerford said, giving credit to Cotendo for achieving that level of performance.
After eight weeks of part-time work by Moosejaw engineers, the site was up and the retailer needed only to tweak a few things. For example, some customers were still searching for “full Moosejaw site” when they saw the display tailored to the smaller screen of a smartphone, so the team added a button front and center on the version designed for smartphones that lets the shopper click to a display tailored for the screen of a PC.
Comerford ended the session by telling attendees they must start building for mobile, no matter how basic the first attempt. “Just get out there and then you can evolve,” he said. “Don’t take no for an answer from senior management.”
Moosejaw is No. 276 in the Internet Retailer Top 500 Guide.