The Promise and Peril of HTML5

More and more companies are choosing to go the HTML5 route for developing their mobile apps. The prospect of covering multiple mobile OSes with one codebase is indeed quite tempting. There are cost efficiencies to be gained from the “build-once-port-everywhere” approach, not to mention the convenience of maintaining a single codebase and the ability to push an update to all platforms in one shot, among other things.

But hold your horses. There are pitfalls you need to guard against. The first pitfall is one of combinatorial explosion! Let me explain what I mean…

When you develop a desktop website it is standard practice to make sure your website works correctly for the top 3-4 browsers – say IE, FireFox, Chrome and Safari in today’s era – and the top 2-3 operating systems – say Windows and Apple OS X. It’s also common to restrict the browser version to the Nth and the (N-1)th version. Ditto with the OS versions. With 4 browsers, 2 supported versions per browser, 2 OSes and 2 versions per OS you are looking at a compatibility matrix of 4 x 2 x 2 x 2=32 Browser/OS/Version combinations. Not a small set to support but still very much doable from a testing and Quality Control point of view.

Intranet websites make the compatibility problem even simpler by supporting only the most recent version of IE on Windows (the latest version)!!

With cross-platform HTML5 apps (even the corporate ones) you do not have the luxury of working with a small sized compatibility matrix. The anytime, anywhere aspect of mobile apps unfortunately also comes with the implicit assumption that the mobile users expect the app to work on “any device” – which means it should work on a Karbonn Smart A51 Android phone  (retailing at less than five thousand Indian Rupees at the time of writing this article) just as well as on a top of the line iPhone 5 (retailing at more than 50 thousand Indian Rupees at present).

Consider these stats:

At the time of writing this article there were more than 600 different Android device models (both phones and tablets) in the world with the capability to run Android OS version 4.0 and above, more than 75 different Windows Phone OS compatible device models capable of running Windows Phone OS version 7.5 (Mango) and above, more than 15 different iOS device models (iPhone/iPod/iPad/iPad Mini) running iOS version 6 and above and a few Blackberry device models capable of running with BB OS 10.x.

Therefore the total number of different types of mobile OS/version/device model combinations that your true cross-platform HTML5 app needs to support is theoretically at least 600 + 75 + 15 + 5, an astounding 695!!

What’s worse, the actual different types of combinations is much higher than this number since some of those 600 Android device models would have been launched with Android OS version 4.0 and they can be upgraded all the way to version 4.3 but no higher, others would have been launched with version 4.3 and can be upgraded to support 4.4 and so on and so forth. Same kinds of compatibility combinations exist within the other mobile OSes and device models.

This is what I mean by the combinatorial explosion of device models and OS versions that your cross-platform HTML5 app needs to support.

And you can hardly consider displaying a line of text in your app that says “This app is best viewed in Internet Explorer version 9 and above”! Your users will expect your cross platform app to work on the device/OS/Mobile Browser combination that they have in their hands! Period.

And if you thought you have more control over this “combinatorics of compatibility” because your app is an enterprise app, think again because more and more companies are choosing to go with the BYOD (Bring Your Own Device) model which means your company’s employees are going to have all kinds of mobile hardware in their back pocket on which they expect your HTML5 app to “just work“!

So what is the recourse?

Well the actual situation is not as hopeless as it looks.

Here are a few easy things you can do to deal with the compatibility issue while building a cross platform HTML5 app:

  • Pay attention to the demography of your target user population. This will allow you to narrow down the device models and OSes to a much smaller practical set.
  • If its an enterprise app you are building, your company’s IT department can definitely mandate that the app will work only on the latest version of the supported OSes even in a BYOD scenario. This greatly reduces the number of OS-device combinations you have to support.
  • Finally divide up the family of devices by screen resolution: say 4.x-5.x inch diagonal screen size is one family of screens that you want to support, 7.x-10.x tablets is the second set and 11.x and above is the third set. Now select a representative set of 2-3 devices from each supported OS for each of these screen resolution sets. The representative set should be selected taking into account factors such as the top 2 most popular devices in each category, the pixel resolutions you will need to support (e.g. select one hdpi device and one xhdpi device), etc.

When you adopt this approach you will end up with a relatively small and manageable set of device/OS combinations to support.

Do note that the underlying reality is still that you are looking at a much larger combination of Mobile Browser/Device model/OS version combination that you are promising to support when you announce that you wish to develop an cross-platform HTML5 application!

Copyright information

Featured Image: CSS3 and HTML5 badges: Author daPhyre ( has made this image available under the Creative Commons Attribution 3.0 Unported license.


Check out my new book on mobile technology on Amazon that contains a detailed description of different native, hybrid and pure web technologies for developing mobile apps and advice on when to use which approach.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s