JacksonDunstan.com

Like it or not, HTML5 is all the rage these days. It seems like everyone, everywhere is talking about the “death of Flash” and the triumphant rise of HTML5 in its place. Many developers who would have used Flash are now considering building on top of HTML5 features like the <canvas> tag. This got me wondering: how well supported are these features across desktop and mobile browsers? I couldn’t find any existing stats on this, so today’s article is my own report. If you write your game in HTML5, what percentage of users will be able to see it? Read on for the answers.

About the Test

To test, I used a recent post on the Yeah, But is it Flash? site presenting a tutorial on Pixi.js, an HTML 5 framework based on the <canvas> tag. The tutorial presents a simple side-scrolling scene with parallax. This is truly a minimal usage of HTML5, which makes it a good test for browser support. Virtually any game would use more HTML5 features (e.g. the <audio> tag for sound), but I’m strictly testing graphics here. I’m also not testing performance, just support. For performance tests, see these recent articles.

Mobile Testing

Since I happened to be reading this post using the Feedly RSS viewer on my LG Optimus G running Android 4.1, I tried out the demo using its embedded system web browser. This crashed Feedly, so I tried the built-in Android browser but only received a black screen. I then tried using Google Chrome 30, which supports WebGL since mine is a high-end phone. That worked. Next up was Firefox 24, which also worked.

Suspicious about the Android Browser not working on my LG Optimus G, I tried the Android Browser on a Motorola Xoom which was also running Android 4.1. That worked, which indicates that support is dependent on the particular Android device.

I then picked up an iPad 2 running iOS 6 and Safari worked just fine. I also happened to have Opera Mini installed, but that only yielded a black screen.

Lastly, I tried the BlackBerry Browser on a Z10 running BlackBerry OS 10.1 and it worked there.

Mobile Results

Here’s a scorecard according to the latest browser stats:

If you’re optimistic, about 90% of users will see your HTML5 game on mobile. Realistically, there will be many cases such as my LG Optimus G that simply receive a black screen instead. There are thousands of Android devices with many more coming out all the time. Most of these feature customized versions of the OS, including the browser, so an exact figure is almost impossible to arrive at. Hence the ranges in the above table. If you go with HTML5 on mobile, plan on at least 10% of users simply seeing a black screen.

Desktop Testing

Desktop should be much better than mobile, right? I used the excellent BrowserStack site to test a wide range of browsers on various operating systems. First up was Internet Explorer 6, 7, and 8 on Windows XP. All of these showed only a black screen. I then tried Internet Explorer 9 and 10 on Windows 7. Internet Explorer 9 got a black screen but 10 worked.

The latest version of Firefox (24) ran the demo just fine and even Firefox 4 had no problem. Firefox 3.6, which is amazingly still in use, failed to load.

Chrome 30 ran without issues, as did Chrome 14 which was the oldest version available for testing. Chrome users update very quickly, so testing older versions is mostly pointless.

Safari 4 on Mac OS X 10.6 (Snow Leopard) gave a black screen, but Safari 5 on 10.6 worked without issue.

Opera 10, 11.1, and 11.6 on Windows XP were just a black screen, but versions 12.10 and newer worked.

Desktop Results

Here’s a scorecard for the desktop tests:

These desktop browser results are downright tragic. Expect over a third of users to simply see a black screen when trying to play your game. As is usual with the web, this is largely due to the enormous popularity of Internet Explorer and the inability or unwillingness of its users to upgrade to newer versions or switch to other browsers. There is one potential saving grace though: these are stats for the general web. Perhaps your particular users are running more recent versions of Internet Explorer or other browsers. I’d highly suggest that you take a look at your particular audience and then tailor the above numbers to fit them. It might not be as bad as the above picture, but it probably will be if your game is targeting a mass market audience such as a social game on Facebook.

Conclusions

So how supported is HTML5 as of now? In simple, round terms you might say at least the <canvas> tag is supported on 60-90% of mobile browsers and 60% of desktop browsers. The other 10-40% of users in general are left out in the cold. They’ll see a black screen. Of course there are more hurdles to clear. How is support for the <audio> tag? How about WebSockets? How’s performance looking? To use a term from the Android space, the web is extremely fragmented. You’ll need to look at what your particular users are running on and test what your particular product is going to use. Maybe there’s no problem because all of your users run Chrome. Just don’t assume it.

While this article is not particularly about Flash, this website very much is and I would therefore be remiss to not mention Flash and AIR in comparison. Flash works more-or-less identically across all desktop browsers and operating systems including horrible old versions of Internet Explorer. The install percentage is famously high: at least 90% on recent versions. Likewise, Flash apps packaged with Adobe AIR work on at least 83% of mobile devices and probably much higher if you exclude ancient devices on old ARM architectures or those that only support OpenGL ES 1.1. Essentially, you can expect your Flash code to work on at last 90% of users’ machines across desktop and mobile. Hence the following comparison in simple terms:

Spot a problem? Have a question or suggestion? Post a comment!