mxm

mo

bile

PO

V: H

TML5

VS

. NAT

IVE

AP

PS

1NO MOBILE LEFT BEHIND™ SERIES

POV: HTML5 VS. NATIVE APPSVERSION 1, NOVEMBER 2011

There’s currently extensive debate around delivering mobile content via HTML5 web apps vs. native apps—that is to say, which one will ultimately win over the hearts and minds of developers and users, rendering the other obsolete. The answer, MXM Mobile believes, is not that simple. The fact is, there’s no clear winner. At this juncture, native apps are very much a necessity, though the growth of HTML5 and browser capabilities is evident and accelerating.

HTML5 web app: A mobile website utilizing HTML5, CSS3 and JavaScript to create rich media effects, e.g., http://m.facebook.com.

Native app: An app built using proprietary code and downloaded from an app store, e.g., Facebook for Android, Facebook for iPhone, Facebook for Blackberry.

The Truth of the Matter

Until now, the general assumption among our clients and other brand marketers has been that mobile sites, while practical and necessary, aren’t very interesting or cool and, if one really wants to build something rich and engaging, it has to be an app. This very well may have been true a couple years ago when iPhone was still king of the smartphone platforms and HTML5 didn’t exist yet—after all, it was a simpler time back then. But things have changed.

As of August 2011, according to comScore’s October report, Android has 43.7% of the U.S. smartphone platform market share—meaning that, out of the 84.5 million users in the country, 36.9 million of them are using a Google handset.1 Meanwhile, Apple has 27.3% of the market and BlackBerry now has less than half of Android’s market share at 19.7%.

With these numbers in mind, if you want to build an app today, you have to build it not only for iPhone (which, despite its second-place status, still seems to be the default platform brands wish to develop apps on), but for Android as well. Of course, hiring dedicated developers for each individual platform is expensive, costing anywhere between $50,000

1 http://www.comscore.com/Press_Events/Press_Releases/2011/10/

comScore_Reports_August_2011_U.S._Mobile_Subscriber_Market_Share

to upwards of $100,000 just for one platform. Not every brand has that kind of budget allotted for mobile or, even if it does, wants to spend that much on an app. And that’s where HTML5 comes in.

HTML5 Web AppsHTML has come a long way, and its newest incarnation offers a wide range of app-like capabilities such as offline storage, geo-location, canvas graphics and video/audio playback. As of Android 3.0, image, audio and video capture is also enabled through the browser, and both it and mobile Safari offer device orientation detection and support WebSocket for two-way streaming.

The most obvious advantage of HTML5, though, is that it’s device-agnostic (“write one, run many”), since the operating system for web apps is the mobile browser. It’s less expensive to deliver HTML5 apps to multiple platforms and significantly easier to maintain/update them once they’re live. An HTML5 web app will theoretically run in exactly the same way on iOS, Android, BlackBerry, Windows Mobile and WebOS browsers—though there’ll likely need to be tweaks made for each platform.

Facebook and the Financial TimesFacebook is in full support of HTML5, despite having native apps for iOS, Android and BlackBerry. Its Project Spartan, an entirely HTML5-based platform, now in market for both Android and iOS, aims to take on Apple on its own turf, no App Store necessary.2

The interesting thing about this is that, on mobile Safari, the Facebook HTML5 web app—which you can add to your home screen so it looks just like a native app, at least on the outside—is limited in core functionality. One of the main features people use Facebook for, photo upload, isn’t available, as it can’t drill into iOS devices’ hardware to access the camera or photo albums.

2 http://techcrunch.com/2011/06/15/facebook-project-spartan/

2

mxm

mo

bile

PO

V: H

TML5

VS

. NAT

IVE

AP

PS

NO MOBILE LEFT BEHIND™ SERIES

On Android’s 3.0 Honeycomb browser, however, it can. Safari and Android’s browsers are disparate in this significant way, which goes to demonstrate that browser fragmentation is an important issue and should be a key consideration when building web apps.

But beyond user experience, monetization is an important factor in the mobile arms race. “Marketers originally flocked

to the iOS App Store because that’s where the people, and therefore the paychecks, congregated.”3 With HTML5 contending for the top title, however, developers can build comparable web apps, circumnavigating the app stores and, in Apple’s case, the 30% cut of app revenues.

Doing just that in June 2011, the Financial Times announced that it would be building its own HTML5 web app as opposed to giving Apple its cut; in August, the publication’s iPhone and iPad apps were removed from the App Store. A Times spokesman said, “We’ve seen strong demand for the FT web app since its launch. We have an ongoing marketing campaign encouraging users to migrate

to the new platform and we’re confident we can maintain the momentum.”

The web app (on iOS only) is located at http://app.ft.com with standard subscriptions costing $4.99 per week.

Native Apps As it is, there are still many things that HTML5 can’t do that native apps can. Native apps are better optimized for their hardware; they run more smoothly and intelligently than HTML5 web apps for higher speed, control and efficiency. They can leverage the functionality of other installed apps and also integrate better with the operating system, providing widgets, notifications and other power-user expectations.

Beck’s and Lowe’sThis year, MXM Mobile released two particularly outstanding brand apps for Beck’s (AB InBev) and Lowe’s.

Boosting its claim that “Beck’s is the champion of independent thinking”, Beck’s launched the world’s first global, networked augmented reality art gallery with the Green Box Project: a three-year fund to financially support and showcase 1,000 works of art, music, fashion and design worldwide. We

3 http://socialfresh.com/html5-vs-apps/

collaborated with Motim Technology and Mother London to build custom apps for iPhone, iPad and Android, enabling the audience to bring artwork to life in augmented reality from actual green boxes located in London, Manchester, New York, Miami, Los Angeles, Rome and Milan.

It was innovative stuff, requiring use of the device’s GPS, Wi-Fi and camera in order to trigger an augmented reality experience featuring 3D animation and sound. The image recognition and AR display also utilized specialized libraries optimized for native applications. Because the crux of the app’s functionality was so dependent on these native handset features, it just wouldn’t have been possible to build it entirely in HTML5.

The Lowe’s iPhone app, on the other hand, is very utilitarian, with a focus on customer service. We made certain that it would provide a solid toolbox for home improvement projects, featuring shopping, inspiration and project planning tools. It’s completely integrated with Lowe’s content management system and provides an end-to-end m-commerce solution.

With regard to innovation, this is one of the most comprehensive examples of in-app integration of Microsoft

mxm

mo

bile

PO

V: H

TML5

VS

. NAT

IVE

AP

PS

3NO MOBILE LEFT BEHIND™ SERIES

Tag Reader, supporting Lowe’s decision to Tag-enable every single SKU in store. This is a good example of an app that could have been a hybrid solution (more on that below)—for example, using native code for the scanning capabilities and idea gallery, running alongside HTML5 for the m-commerce and catalog features.

HybridPerhaps the best of both worlds can be achieved through hybrid apps: HTML5 apps repackaged as native apps, with the addition of native code allowing them to access device hardware. It’s a happy compromise that enables content updates to be more nimble while not limiting the types of features the app contains. To illustrate this concept, we present Netflix.

NetflixThe Netflix iPad app is a hybrid in that the same HTML5 code powers both the browser and native app experiences. This is accomplished through native code containers for each device—it’s essentially these containers that are downloaded from the app stores, which then become vehicles through which the HTML5-rendered content can be served. Open Netflix on your Android smartphone, iPad, laptop, Google TV or any other HTML5-compatible device with an Internet connection: You’ll see complete cross-platform consistency. Had the brand relied on native video technology for each of them, video viewing would likely have been fragmented; with HTML5, improvements to the Netflix application are immediately enjoyed on every screen, simultaneously.

What to consider as a marketer

What’s most important to the consumer?If nothing else, your demographic and the actions of your consumers should determine what you build. Mobile’s role is ultimately to bestow the maximum amount of convenience, utility and, often, entertainment upon users with minimal interruption. What do they most need from your brand, and what are they using mobile for?

If, for example, consumers are coming to you for very dynamic content (e.g., news, a product catalog, user-generated, etc.), an HTML5 web app is the natural solution for you—or embedding web content in native apps (hybrid)—as you can update the content easily without having to issue an actual app update. If, however, your users are interacting with rich media content (e.g., editing photos, gaming, uploading videos, etc.) you’re going to need the power of native apps.

ReachNot every mobile device is HTML5-compatible, but not every device is able to download applications, either. Still, most modern smartphones in market today can do both, and the numbers are ever-increasing. ABI Research reported in July 2011 that, by 2016, there will be more than 2.1 billion mobile devices with HTML5 browsers worldwide, up from 109 million in 2010.4 With regard to application usage, it reported that

4 http://www.abiresearch.com/press/3730-2.1+Billion+HTML5+Browsers+on+

Mobile+Devices+by+2016+says+ABI+Research

Android led app downloads in Q3 2011 with 44% market share over Apple’s 31%—though users download two iOS apps for every one Android app.5 The total number of app downloads ever will reach 29 billion by the end of 2011; nine billion apps were downloaded in 2010.

If anyone with an iPhone or Android can access HTML5 web apps as well as native apps, the point that tips the scales might be this: The newest BlackBerry and Nokia/Symbian devices are also HTML5-enabled (i.e., they have WebKit browsers), so they, too, can enjoy your web apps.

CostAs stated earlier, the immediate cost benefit of HTML5 is that you don’t need to hire individual developers for each platform you plan to build apps on. In fact, hiring an HTML5 developer costs no more than it would to hire an iPhone or Android developer, yet HTML5 can reach both those platforms and others all at once. The catch?

Being a relatively newer technology, there aren’t as many people who are skilled in HTML5 development as there are for native apps or regular HTML. It’s reminiscent of when there was a shortage of iPhone developers in 2009—though, naturally, there are plenty of them now.

Fortunately, MXM Mobile has long had HTML5 on our radar, even when it was simply being whispered about. We’ve spent the last 18+ months scaling up our dedicated team of HTML5 developers; the first HTML5 mobile site we ever launched was over a year ago. Since then, we’ve built dynamic HTML5 web apps and sites for clients such as Kraft, Nestlé-Gerber, Kiehl’s and Lowe’s, and the number of projects in the pipeline keeps growing.

We still build many native apps, of course. Native apps are very much a necessity. But we’ve yet to see HTML5’s full potential, and it’s only getting better. n

5 http://venturebeat.com/2011/10/25/android-app-downloads-market-share/