February 1, 2011, 12:00 AM

Designing for the evolving web platform

(Page 2 of 3)

That's why e-retailer Wine.com, which uses flyout boxes as part of the navigation on the home page of its web site, guides visitors in other ways in the app it developed for the iPad. The app presents a series of rollers at the bottom of the screen that the shopper can move with his fingers to home in on the product he's looking for, such as Red Wine, Pinot Noir, Oregon, Willamette Valley. Then the Wine.com app pops up a map that shows the wineries producing Pinot Noir in that region.

Another feature the e-retailer calls "Label Flow" enables shoppers to swipe through thousands of wine labels. When a consumer touches a label, a magazine-like page appears displaying reviews and pedigree specifics, winery background, region, varietal, along with an interactive geolocation map of wineries. Once on a desired wine's page, a shopper can save the wine to a personal "Wine Cave" or purchase the wine through the app. The Wine Cave lets shoppers save bottles for future reference, review vintages and share that information on Facebook. Wine.com worked with design studio Marshall Monroe Magic on the app.

Wine.com has found that shoppers using the iPad app tend to buy wine for themselves more often than buying it as gifts, which means more repeat shopping visits, says Cam Fortin, Wine.com's director of business development. Moreover, the revenue per visit for consumers using the iPad app is about $1 higher than for consumers using the retailer's iPhone app or accessing Wine.com's iPad-optimized site. Catering to iPad users is important, he says, because they account for 80% of the e-retailer's revenue from mobile devices.

Many designs

Wine.com has taken the approach of designing distinct web sites and apps for specific devices. Besides its iPad-optimized site and app and its iPhone app, the e-retailer also has mobile sites optimized for the three major types of smartphones: iPhones, BlackBerrys and phones using Google's Android operating system.

Zappos.com, the shoes and clothing retailer now owned by Amazon.com Inc., has followed a similar path, offering iPhone and iPad apps and mobile web sites designed for iPhone, BlackBerry and Android. The e-retailer plans to add an Android app this quarter.

"We've found that tailoring our designs to specific devices is really what works best and gives consumers the best possible user experience," says Jaimee Newberry, Zappos.com Inc. product manager for mobile.

The retailer developed its mobile site after concluding it was hard to navigate Zappos.com on smartphones because the abundance of images and content made category listings difficult to locate, Newberry says. The pared-down mobile site is designed to help consumers quickly find what they're looking for.

Zappos directs iPad users to its conventional e-commerce site. In part, that's because the site doesn't make use of mouse-over features that won't be visible on a touchscreen and the only fly-out listing is on its home page.

In addition, Zappos last fall launched an iPad app that makes use of the tablet's unique features, such as rotational screens and the pinch-zoom ability for a shopper to expand or minimize images by moving her fingers together or apart on the screen. "The iPad app is designed for the way consumers use the iPad—poking around the web and holding it with two hands," she says.

Zappos' tailored approach seems to be working, says Newberry. The retailer's mobile sales, including from tablets, are about 5% of total revenue, even though mobile traffic, including the apps, accounts for only about 3% of visits.

A cascading shortcut

But not every retailer can afford to build a web site or app for every device. While prices vary greatly depending on functionality, experts say a mobile site can cost anywhere from $5,000-$100,000 to build and an app $25,000-$250,000.

That's why King Arthur Flour, whose 2010 web sales totaled $15.1 million, is taking a different approach, using CSS3, the latest version of a web design language called cascading style sheets to present the images and product information on its site differently depending on the visitor's device and browser in its forthcoming redesign. It's an approach Silver calls "responsive web design."

"Instead of building a KingArthurFlour.com site for the iPad and a separate one for an Android and a separate one for desktop users, this will allow us to have a single site that we know will respond to whichever device users are using," Silver says.

For instance, rather than using a full-size, high-resolution image for a mobile site, when the phone's small screen doesn't require that kind of image quality, the retailer can insert an HTML tag to substitute a lower-resolution image, making the mobile site load faster. The style sheets can also present dramatically different looks. For instance, mobile consumers would see one column featuring only the site's main categories while desktop users might see a three-column layout.

E-commerce software developer Ability Commerce is using CSS to create a new mobile site for retailer Mack's Prairie Wings, using the same elements that make up the e-commerce site for the retailer of equipment and clothing for waterfowl hunters.

The mobile site's home page will feature the main display banner, a large search box, primary product categories and a push-to-call button that lets a shopper quickly call the retailer's customer service number. The retailer's e-commerce site is much richer, with a robust array of hot buys, navigation bars and images on its home page.

"Nobody wants to go through the labor pains each time they want to tweak their site or roll out a mobile or tablet site," says Diane Buzzeo, Ability Commerce CEO. Ability Commerce says some retailers can create a new CSS in-house using Ability's SmartSite e-commerce platform or they can outsource the job for about $1,000 per project.

Ability will next produce a tablet-specific CSS for Mack's, which last year saw 6% of its traffic coming from mobile devices, including tablet computers, and expects that to climb to 12% this year. "You have to be equipped to deal with consumers however they're coming to your site," says Cheryl Raney, chief financial officer of Mack's Prairie Wings.

comments powered by Disqus

Advertisement

Advertisement

Advertisement

From IR Blogs

FPO

Satya Krishna Ganni / Mobile Commerce

Understanding and serving shoppers on smartphones

Retailers need to know how smartphone users shop to take these shoppers from “I want ...

FPO

Justin King / B2B E-Commerce

Uncovering the secret to B2B e-commerce

The secret to success in B2B e-commerce is simple enough to understand, but hard to ...

Advertisement