The immersive experience!

What is HTML5?

Apart from the fact that it's a buzz word:

HTML5 is the current framework for a large range of extensions to earlier HTML standards. We still expect that the use of HTML will stay as dynamic as it was in the past. There are some more or less precise recommendations by W3C, WhatWG, and other organisations, and still much space for browser specific innovations.

The article describes some HTML5 features available in the fields of graphics elements, touchscreen input and motion detection which were useful for implementing the Panorado JS viewer. This required not just to read documentation, but to investigate the features of some current browsers one by one.

The Canvas Element

Canvas is an HTML element which allows drawing operations controlled by JavaScript code to be performed at runtime.

Canvas supports rendering primitive graphics elements, as well as bitmap elements like sections of large panoramic images.

Current Canvas implementations offer 2 so-called contexts which are radically different:

2D: Supports simple 2-dimensional rendering and transformations. Implemented by all HTML5 compatible browsers.
WebGL: Supports 3-dimensional rendering, using graphics hardware according to the WebGL standard defined by the Khronos Group. This enables very fast rendering which currently some browsers make use of more or less successfully.

Touchscreen Input

This is currently an issue for tablet computers, mobile tablets and smartphones. Unlike mouse input on traditional computers, touch input needs to be interpreted very carefully: Touches can refer to a certain visible element on the screen, but can also be meant as gestures to flip pages, scroll, or zoom the current page.

The good thing about touch input is that touch input is detected by virtually all mobile browsers. The bad thing is that some browsers have implemented proprietary interfaces which differ significantly from the W3C recommendations. Another problem: Parallel handling of input events and time-consuming graphics rendering seems to be a real challenge for some browsers on today's mobile devices which are still rather slow.

Device Motion

Most current mobile devices are equipped with acceleration sensors and gyroscope/compass. Theoretically, data from these sensors could be used to interactively control visual website content. In practice, our Android 4.0 test showed that it makes sense to rely on the deviceOrientation API in conjunction with window orientation detection, not on the deviceMotion API. Even though, no browser was really perfect (yet).

At least, all browsers tested made use of the same W3C interface definitions. We expect that browser implemented applications with real motion control will be possible in the future, since all that needs to be done is fixing some bugs in current browser implementations.

Mobile Devices

We are currently witnessing a significant shift of user practice - away from traditional computers (desktop, notebook) towards small mobile devices (smartphone, tablet). Web publishers habe to be aware of this. For developers, there are some significant differences:

Traditional PCs: Apart from some older netbooks, they are equipped with powerful (Intel) processors plus powerful graphics hardware. Normally controlled by keyboard, mouse or mouse-like touchpad, not by touchscreen input. All popular browsers perform quite fast and stable.
Mobile Devices: The preferred way of input is touching the screen with fingers. Quality and performance of newer devices are comparable to desktop computers, while older devices impose some restrictions by slow processors and some browsers are not yet implementing WebGL rendering and touch input perfectly.

Browser Compatibility

This table is a summary of test results for 14 different operating system/browser combinations.

I like to emphasize that the selection of browser/os combinations is far from being complete, and that all results are just a snapshot. Results have changed with almost every upcoming new browser version in the past, and I don't expect this to change in the future.

Recent tests have proven these OS/browser combinations as suited for Panorado JS:

Windows 7+:Microsoft Internet Explorer 9+, Mozilla Firefox, Chrome, Opera
Android 5+:Chrome, Opera

Outlook

I'm expecting further quality, stability and performance improvements of mobile web browsers in the near future. Hardware performance of new mobile devices is also likely to improve.

Development of OS-specific apps is tedious, and the web is the common platform of almost all users anyway. The logical consequence is to use the new HTML5 features for interactive graphics applications like Panorado JS.