HTML5 vs Native for Web Sites and Applications

February 26, 2013
Mobile

Go native or go HTML5?

HTML5 and responsive design are promising tools in the hands of talented web designers and developers seeking to “write once, run anywhere.” But can they deliver? How do you choose between the mobile web, hybrid mobile apps, and native for your next project? The answers are not simple, as we deal with constantly moving targets in terms of software and hardware capabilities and user’s expectations. Prepare to spend some time researching the current state of affairs and debating internally the best path for your particular situation. This article will hopefully give you a head start.

What’s the difference?

  • Mobile web app: an application developed using standard web technologies such as HTML5, JavaScript and CSS and accessed in a browser on your mobile device. Example: maps.google.com, viewed in a mobile browser
  • Native app: an application developed using platform specific technologies that runs on a particular operating system. Example: Instagram
  • Hybrid mobile app: an application developed using a cross platform framework and standard web technologies that basically packages a mobile web app in a thin native wrapper. Example: Untappd

How do I decide?

There’s not an easy answer to this question. You might think, “If I use HTML5 or a hybrid approach, I can code my app once and deploy it to all platforms! And I might even be able to reuse my code for the desktop browser version of my app!” As is often the case with technology, it isn’t that easy.

To illustrate the difficulties in choosing between these options for mobile apps, let’s talk a little bit about infinite scroll. This user interface paradigm – a page that doesn’t seem to have an end but keeps on loading new data as you scroll – shows up everywhere these days, from websites like Pinterest to many iOS and Android apps, including Facebook and LinkedIn.

I’ll leave it up to you whether this is a good UI paradigm. But I don’t think it’s a stretch to say that if you have an app, with a list, that’s used on touch devices, your users will expect to be able to swipe this list up and see more content.

The problem is, this is difficult to implement on phones and tablets, where memory tends to be the main performance bottleneck. If you develop a native app, there will be a component that allows you to easily create a long, smooth scrolling, infinite list that performs well (e.g. UITableViewController on iOS). But if you’re using HTML5 or a hybrid mobile app, you’re going to have to do more work. And a lot of testing. And even if you succeed for awhile with HTML5, you might decide to go back to native (Facebook did).

I would recommend you read about how two of the major players in this space have dealt with this issue recently:

Conclusion and more resources

You’ll need to spend some time evaluating your app before you decide what route to take between mobile web apps, native apps, or hybrid web apps. Who is your target market? Are you using capabilities of a mobile device such as geolocation, camera, accelerometer? Do you have certain screens that might be problematic unless they are developed with native APIs? Learn from others’ experiences, do some preliminary testing, and go for it. Good luck!

Only registered users can comment.

  1. Excellent read. Perhaps in a follow up you can illustrate the decision making criteria? What is the sweet spot for Hybrid? When is going Native a must? Is there a trend that is pulling a certain way?

    1. I recently read a blog post from Paul Boag, Mobile app vs mobile website design: Your four options, which does a good job of illustrating the decision making criteria. Note that he differentiates between a “responsive website” and a “web application”. My “mobile web app” corresponds to his “web application”, and I’ve assumed that if you’re reading this article you’re building an application of some sort, so I didn’t include “responsive website.”

      Paul says that if speed and access to native features are important, choose a native or hybrid web app. If not, choose a web application / mobile web app. The “speed” criteria can also help you decide between native and hybrid, as discussed in my example of the infinite scrolling list (native will be faster). Target audience and budget are also important criteria for making this decision.

      1. Bingo, the marketing side of this is a major preoccupation on the
        business side of mobile app development. Is my mobile app going to get
        play if it’s not in the app store? Will my target client add the link to
        the increasingly crowded real estate on their mobile device? Also,
        phone vs. tablet adoption. I used to just copy every app on both
        devices, but quickly discovered that I use the devices in very different
        ways and started pruning apps accordingly. Can’t wait until there’s
        more data on this.

        I wonder how quickly app fatigue is going to
        set in with consumers, and just like tools came along to help them block
        mail and eliminate spam, I think the bar on app development is going to
        get higher for mobile. It’s going to have to be really well thought out
        to make the cut.

Leave a Reply

Your email address will not be published. Required fields are marked *