December 13, 2013, 9:24 AM

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.

Lead Photo

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.

comments powered by Disqus

Advertisement

Advertisement

From IR Blogs

FPO

Bryan Gudmundson / E-Commerce

Which incentives are best at saving the sale?

It’s not necessarily the most valuable incentive that converts the best, a case study shows. ...

FPO

Heather Smith / E-Commerce

Taking advantage of the sharper marketing tools from Pinterest

Pinterest’s revamped private messaging system gives retailers more options for directly connecting with influential and ...

Advertisement

Advertisement