HTML5 Adoption Strategies

Introduction

One of the questions that I got in the session that I delivered today was how to adopt HTML5 today? Since this was a very good question, I decided to share what I think about it.

Why Do We Need Adoption Strategies?

You might ask yourself why you need an adoption strategy for HTML5? The answer is simple. HTML5 includes many specifications that evolve in different rates. Therefore, the specification support in browsers is complicated to implement for the browser vendors. There are stable specifications such as Geolocation which are implemented by all the major browsers and there are less stable specifications like Web Sockets that aren’t. So, if you want to use an HTML5 specification in your web application, how can you do that without breaking your application in some of the browsers? The answer to this question is to ask yourself whether you really need the feature. If you really need it, then you can use adoption strategies in order to implement the feature.

Adoption Strategies

Here is a list of strategies that you can apply in order to adopt HTML5:

• Lowest common denominator – This strategy is the simplest and it’s what I call the ostrich strategy (let's not implement HTML5 at all…). Applying this strategy is to look for the features that are implemented in all the browsers (or all the major browsers) and use them. This, of course, leave you with small amount of HTML5 specifications (or with none if you target very old browsers).
• Vertical slices – In this strategy, you decide that you only target a specific HTML5 functionality and therefore “lose” browsers that don’t implement it. If you do that for public internet applications, it might harm your application’s credibility (since it won’t work for all the other browsers). This strategy is more appropriate for targeting mobile devices that is a growing market with less browsers to support and high HTML5 browser adoption.
• Using Polyfills – Polyfills are JavaScript “hacks” that help to integrate HTML5 features into older browsers. For example, using Modernizr which “adds” the HTML5 semantic elements (header, footer and etc.) to the DOM can help to implement these elements inside your web application and get a consistent UX across older browsers.
• Using fallbacks strategies – Some elements and APIs can’t be achieved with Polyfills (for example the Video/Audio element). In this case, you can use the HTML5 feature but you create a fallback if it isn’t exists. For example, adding a Video element can have a fallback into Flash/Silverlight if the Video tag isn’t supported in the browser.

Summary

When you want to adopt HTML5 today, you need to pay attention not to break your web application in older browsers and also in newer ones. This can be achieved by imposing some strategies such as the strategies that I mentioned in the post. If you have other strategies that you want to share with me, please do so in the comments.

CodeProject