12/13/13

Top mobile retailers reap rewards using the magical HTML5

46% of the top 500 mobile retailers use HTML5 in their smartphone or tablet sites, according to Internet Retailer’s Top500Guide.com. The advanced web programming language enables mobile sites to look and function like mobile apps, quite a trick.

Bill Siwicki , Managing Editor, Mobile Commerce

Just a few years ago, retailers were trying to figure out what the heck HTML5 was. Today, HTML5 is a widely used tool that helps retailers enhance their sites optimized for smartphones and for tablets—desktop e-commerce sites, too—making mobile sites look and function more like their slick, richer mobile app counterparts.

230, or 46%, of the merchants in the 2014 Internet Retailer Mobile 500 use HTML5 in their mobile commerce web sites, while 181 merchants in the 2013 Internet Retailer Mobile 400 used HTML5, according to data in Internet Retailer’s Top500Guide.com

For some, HTML5 is a catch-all term for newer web technologies, similar to the once-ubiquitous term “Web 2.0.” But more precisely, HTML5 is 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. 

“HTML5 is a new document standard for writing HTML containing new web browser application programming interfaces, or 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 on mobile devices, and generally make mobile web sites more like apps,” says Kyle Peatt, senior mobile designer at Mobify, a vendor that uses HTML5 in the mobile sites it builds. 

All of the latest versions of the major mobile web browsers are now compatible with the fifth version of the W3C’s HyperText Markup Language, or HTML5.

Niche e-retailer eBags Inc., No. 163 in the Internet Retailer Mobile 500, used HTML5 in late 2012 to help create a hybrid responsive design/adaptive design web site. Responsive design is a technique that enables retailers to create one site with one code base and one set of web content to serve versions of the site that fit the screens of any computers or mobile devices requesting the site. Adaptive design adapts a site’s format and content to fit the capabilities of a particular device. For example, adaptive design alters where on a page an embedded video is displayed based on the screen size and/or capabilities of the device requesting the page. It can also determine that the video should not be embedded because of the limitation of the consumer’s device, and serve only a link to the video.

Executives at eBags were responding to growing mobile traffic, which was 14% of total web traffic in 2011 and 26% in 2012. (Today it’s 34%.) 

“The growth of smartphone and tablet usage by our customers drove the need to better accommodate input of information on mobile devices and implement responsive design—HTML5 helped with these efforts,” says Peter Cobb, eBags co-founder and executive vice president.

The eBags technology team uses HTML5, for example, to pop up versions of keyboards most appropriate for specific data input fields, such as the numbers-only keyboard for phone numbers and ZIP codes and the e-mail keyboard for e-mail addresses.

The e-retailer also uses HTML5’s local storage capabilities to improve performance, namely page load times. HTML5 enables retailers to store web page content that is used throughout the site within the cache of a mobile web browser (“locally,” on a device) so when a browser is building pages as a shopper proceeds through a mobile site the browser does not need to send additional requests to servers for content it already has. And eBags uses HTML5’s asynchronous download capabilities to simultaneously download JavaScript files and web page content files.

“A common problem in the past has been that JavaScript files in a page are not loaded asynchronously—by design, they must be downloaded in the order they appear in the HTML document and they block the loading and rendering of additional elements on the page until the JavaScript files are finished downloading, which can hurt page load time,” says Nick Angiolillo, an HTML5 expert and senior front-end developer at web design firm Alexander Interactive. “HTML5’s async attribute can be added to JavaScript tags so the JavaScript can be downloaded without blocking the rest of a page from being loaded, improving page load time.”

While Cobb of eBags declines to provide specific figures, he says HTML5 has helped create a flexible commerce site that has delivered significantly improved conversion rates on all devices.

Like eBags, web-only merchant Rakuten.com Shopping makes extensive use of HTML5’s local storage capabilities in its mobile commerce site. Rakuten.com Shopping, No. 28 in the Mobile 500, says HTML5’s local storage has enabled it to shift away from using cookies to store customer attributes and has eased stress on its servers, which are receiving fewer calls from mobile devices because key content once downloaded on a device is stored locally in the device’s browser.

HTML5 also helps Rakuten.com Shopping with what is known in developer lingo as “regular expressions,” validating the regular expression of certain types of information without sending a form to a server. For example, HTML5 allows the e-retailer to ensure an “@” is included in an e-mail address data field directly from the mobile web form without having to hit the merchant’s servers for initial validation.

“This allows for instant feedback to customers without the need for them to first submit a form, and we do not have to use tricky JavaScript that could fail if the customer has JavaScript disabled in their browser,” says Bernard Luthi, chief marketing officer.

What’s more, HTML5’s video tag enables Rakuten.com Shopping—and any retailer—to embed videos within HTML pages, allowing customers to play videos on any mobile device, thus getting past Apple Inc.’s ban of Flash, a web language used to play videos that is becoming less common because of Apple’s ban, mobile experts say.

“Overall, HTML5, combined with CSS3, is driving our web experience forward in ways that ease our development processes while still providing rich customer shopping experiences,” Luthi says.

HTML5 has become popular not only among retailers but also among the mobile commerce technology providers that serve retailers. Mobify and Usablenet Inc. are two vendors that make extensive use of HTML5 in the mobile commerce sites they build. Northern Tool + Equipment Co., No. 303 in the Mobile 500, selected Usablenet to create an HTML5-based mobile site in April 2013.

“One reason Northern Tool selected Usablenet as its mobile technology provider was because of our use of HTML5 exclusively, which enables us to provide a much faster site experience and the broadest mobile web browser compatibility for shoppers,” says Roland Campbell, Usablenet’s director of solutions engineering. Northern Tool deferred comment on HTML5 to Usablenet. “One example of HTML5’s capabilities is how it enables retailers to let customers create lists that are stored locally on mobile devices, lists of products like a ‘Love List’ or a ‘Shopping List.’ By using the HTML5 database function to store lists locally, shoppers can have personal lists on their phones to come back to when they want.”

Gilt Groupe, No. 10 in the Mobile 500, started using HTML5 in 2012 to speed mobile page loads, aiming to speed customers’ ability to quickly browse through Gilt’s daily sales, says Yonatan Feldman, vice president of mobile.

In addition to using HTML5’s local storage feature to speed mobile page loads, Gilt uses what developers call “client-side templating techniques,” an HTML5 page construction approach that reduces the amount of data transferred from the retailer’s servers to the customer’s mobile browser, which results in improved and faster mobile shopping, Feldman says.

“Our members are on the go, so we’re always looking for ways to improve the mobile experience so they can shop with simplicity and speed,” Feldman says. “With HTML5, we’ve seen increased engagement and higher conversion rates by creating a shopping experience that’s faster than ever.”

Topics:

eBags, HTML5, Mobify, Mobile 500, mobile commerce and HTML5, Northern Tool, Top 500 Insider, Usablenet

NEWS CATEGORIES Back to Top...