POV: HTML5 vs. Native Apps

  • Published on
    08-Apr-2016

  • View
    213

  • Download
    0

Embed Size (px)

DESCRIPTION

MXM Mobile's point of view on building HTML5 web apps versus native apps on multiple devices, illustrated with real-life examples.

Transcript

  • 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

    Theres currently extensive debate around delivering mobile content via HTML5 web apps vs. native appsthat 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, theres 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, arent 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 didnt exist yetafter all, it was a simpler time back then. But things have changed.

    As of August 2011, according to comScores October report, Android has 43.7% of the U.S. smartphone platform market sharemeaning 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 Androids 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 thats 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 its device-agnostic (write one, run many), since the operating system for web apps is the mobile browser. Its less expensive to deliver HTML5 apps to multiple platforms and significantly easier to maintain/update them once theyre live. An HTML5 web app will theoretically run in exactly the same way on iOS, Android, BlackBerry, Windows Mobile and WebOS browsersthough therell 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 appwhich you can add to your home screen so it looks just like a native app, at least on the outsideis limited in core functionality. One of the main features people use Facebook for, photo upload, isnt available, as it cant drill into iOS devices hardware to access the camera or photo albums.

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

  • 2mxm

    mo

    bile

    PO

    V: H

    TML5

    VS

    . NAT

    IVE

    AP

    PS

    NO MOBILE LEFT BEHIND SERIES

    On Androids 3.0 Honeycomb browser, however, it can. Safari and Androids 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 thats 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 Apples 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 publications iPhone and iPad apps were removed from the App Store. A Times spokesman said, Weve 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 were 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 cant 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.

    Becks and LowesThis year, MXM Mobile released two particularly outstanding brand apps for Becks (AB InBev) and Lowes.

    Boosting its claim that Becks is the champion of independent thinking, Becks launched the worlds 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 devices 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 apps functionality was so dependent on these native handset features, it just wouldnt have been possible to build it entirely in HTML5.

    The Lowes 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. Its completely integrated with Lowes 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 Lowes 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. Its 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 deviceits 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: Youll 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

    Whats most important to the consumer?If nothing else, your demographic and the actions of your consumers should determine what you build. Mobiles 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 youor 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 m