Beyond the Rack employs a new approach to designing for mobile devices.
Bill Siwicki , Managing Editor, Mobile Commerce
THE COMPANY: Beyond The Rack Inc.
THE PROJECT: Optimize its e-commerce site for rendering on smartphones.
THE REASON: In early 2012, flash-sale e-retailer Beyond The Rack, like most other e-retailers, was facing rapidly growing traffic from smartphones. And it knew that its customers were particularly mobile, using their smartphones to check in on sale events throughout the day from anywhere and everywhere.
There were some big signs that showed it needed to pay attention. Beyond The Rack's smartphone shopper conversion rate was only 0.56% and 42% of smartphone shoppers left the site after trying to view just one page of the e-commerce site on a smartphone. The e-retailer says navigating the full e-commerce site on a small smartphone screen meant shoppers had to pinch, zoom and swipe to read content and view pictures. Beyond The Rack concluded it had to provide a better experience for smartphone shoppers to boost sales.
THE METHOD: Beyond The Rack didn't want to move anything from its already jammed 2012 in-house technology road map, so it used a vendor to build the mobile site. It selected Mobify because the vendor uses a site-building technique that requires only a single tag be added to e-commerce site pages, it could deliver quickly (62 days from contract to live site), and because it could handle Beyond The Rack's speed and load requirements and produce an entirely customized site for the e-retailer, says Richard Cohene, director of marketing at Beyond the Rack.
Cohene, the marketing manager, the creative director, a technology department product manager and design staffers made up the Beyond The Rack mobile team that collaborated with Mobify personnel to design the site. Mobify created mock-ups based on its clients' best practices; the e-retailer's team reviewed the mock-ups and made changes that reflected the brand's design.
One of the tools in Mobify's mobile design toolbox is HTML5, an advanced web programming language that most mobile web browsers can handle and that enables developers to create mobile sites that look and function like their richer counterparts, mobile apps (see story, below). Beyond The Rack's m-commerce site uses HTML5 to play videos across all mobile platforms instead of using Adobe Systems Inc.'s Flash technology, which Apple devices do not render. The site also makes use of HTML5's local storage function, which enables it to cache data on a consumer's mobile web browser to speed page loads.
It also uses HTML5 to speed the new member registration and checkout processes. When a customer touches a data field that requires only numbers (such as credit card or phone), the site displays the telephone keypad instead of the standard alphanumeric keyboard. And when a customer touches the e-mail field, the site displays the e-mail keyboard, which features the "@" symbol and a ".com" key. These keyboards are available through HTML5, but not HTML4.
In addition, members who sign into their accounts can check out with just three clicks. To buy an item, all a customer must do is touch Add To Bag, Confirm Order, then Process Order.
Perhaps the project's most novel part was Mobify's use of a technique called adaptive design to optimize the e-retailer's mobile site. This is different from another mobile design rising star, responsive design. Here's how they differ.
Responsive design enables a retailer to build a single web site that detects the size of a device's screen and formulates a page to fit that screen based on rules written in Cascading Style Sheets, or CSS. The goal of responsive design is to use CSS to create a single web site that works on every imaginable device.
Adaptive design is a methodology that makes use of various technologies, including responsive design. Adaptive design creates versions of a site based not just on screen size, but what the device can do, and how consumers typically use it.
Adaptive design detects not only screen size but the kind of device. That makes it possible to build a site precisely targeted for that consumer. For example, adaptive design enables a retailer to deliver large Retina display images only to consumers on devices with Apple's Retina display, says Kyle Peatt, senior mobile designer at Mobify.
When a consumer on a smartphone accesses any page on BeyondTheRack.com, the Mobify tag recognizes the consumer's device and captures the HTML code before the device has a chance to download any of the page's content. Mobify then optimizes the captured HTML for mobile, calling the retailer's servers only for resources needed to build a page optimized for that device.
"After the HTML is optimized, it loads on screen, resulting in the device receiving the desktop content in a mobile adaptation," Peatt says. "By ensuring the right images and styles are served to that particular device, the download time and page size is dramatically reduced."
Some mobile commerce experts believe more retailers will turn to adaptive design, which can also be used for tablets, in the future.
"We are seeing a trend toward designing for mobile first and then adding layers of functionality for larger devices," says Tom Nawara, vice president of digital strategy and design at consulting firm Acquity Group LLC. He says "progressive enhancement," an adaptive design term that means starting from the minimum and progressively adding to that, will dominate over "graceful degradation," a term associated with responsive design that means starting with everything and removing what is not needed.
THE RESULTS: Beyond The Rack launched its mobile-optimized site on July 11, 2012. Key performance indicators for Beyond The Rack shoppers on smartphones before and after the debut of the site paint a vivid picture:
The merchant declined to reveal the exact cost, but Mobify says a typical build using adaptive design costs $100,000, plus a monthly fee starting at $495 for smaller organizations.
"The return on investment was there in one month," says Cohene of Beyond The Rack, which today receives about 40% of its traffic from mobile devices (smartphones and tablets) and 33% of weekday revenue and 41% of weekend revenue from mobile. "Mobile optimization was one of the best investments Beyond The Rack has ever made."
What exactly is HTML5?
There are two ways to look at HTML5, says Kyle Peatt, senior mobile designer at Mobify, a vendor that uses HTML5 in the mobile sites it builds. First, it's a catch-all for newer web technologies, similar to the once-ubiquitous term "Web 2.0."
"HTML5 is an all-encompassing term referring to things such as Cascading Style Sheets 3, or CSS3, and a whole bunch of new browser application programming interfaces, or APIs, all rolled up into HTML5," Peatt says.
It is also a standard web programming language from the web standards-setting body World Wide Web Consortium, or W3C, though the HTML5 standard has yet to be finalized.
"It's a new document standard for writing HTML containing new web browser APIs and new ways to interact with mobile web browsers to obtain geo-location for mapping or to auto-fill data fields, play video, create improved animations, drag and drop, store data locally, and generally make mobile web sites more like apps," Peatt says.
Because some elements of HTML5 are finalized and some are not, retailers need to be careful when programming in the language. Peatt recommends the web site CanIUse.com, which lists all of the features in HTML5 and CSS3 and offers a rundown of the mobile web browsers that support the features. He also suggests Modernizr.com to obtain the free Modernizr tool that enables a retailer to detect if a device has support for HTML5 and CSS3 features.
To accommodate consumers whose browsers cannot handle HTML5, retailers should consider the adaptive design technique known as progressive enhancement, in which a site first detects a device and its capabilities and progressively adds content, features and functions based on the device's capabilities, Peatt says. If HTML5 is not among a device's capabilities, the site does not deliver any HTML5-based features and instead defaults to more basic features.