There has been much interest lately around HTML5 and its readiness for production environments and whether HTML5 apps should be used over native apps. This has been due, in large part, to the high-profile defections of tech behemoths such as Facebook and LinkedIn away from HTML5 to native apps for their core mobile services.
But it is also partly because HTML5 has so much to offer that there has been such a fuss about native versus web. One thing is certain, with HTML5-capable mobile web browsers, the mobile web has come a very long way from its early WAP and iMode incarnations.
Below is a side-by-side comparison of the web (left) and native Android (right) versions of Google’s Maps application. Not only is it possible for the web version to sport a similar UI to the native version, but they also both offer similar location-aware functionality (see the blue circle representing user’s approximate location).
Figure 1 Comparison between native and web versions of Google Maps
In the coming weeks we’ll run a series on HTML5 from a mobile perspective, providing a more comprehensive and in-depth review of the technologies involved than have featured on this site so far. The native versus web debate won’t be considered in much detail here – all variety of opinion can be found out in the wild already, and the debate has even spilled over into more mainstream media outlets such as Forbes and the The Guardian. There are valid use-cases for both native and web, and let’s leave it at that! Instead, we’ll look at how HTML5 can be used in mobile web apps today. For a lot of things. But it’s not an all-or-nothing proposition. HTML5 covers a lot of different technologies, as we’ll see, and most web apps will only ever need a small subset of these. Most won’t need WebGL or WebSockets for example. Some might make use of the new form input types, and others still the Geolocation and the Device Orientation APIs. It really depends on the application requirements.
Further to our previous pieces on HTML5 this series will look at some of the ways that this latest evolution of HTML and related technologies can be used to enhance mobile web experiences, right now, despite the fact that the official specification has not yet been fully nailed down. For instance, as we’ll see in later articles, elements of HTML5 are stable and reliable enough across mobile browsers that they are indeed ready for prime-time production deployments. Nonetheless, a recurring theme throughout the series is that care should be taken to check for support for any particular feature, and to apply a fallback mechanism when necessary.
First… what exactly is HTML5?
Let’s begin by clarifying what HTML5 is. Well, it’s a bag of technologies really. Firstly, it’s a markup specification, the next evolution of the HTML language that pervades the Web. But, it’s more than just markup. Included in HTML5 are a number of APIs that can be used with JavaScript, such as the Device Orientation, Touch Events, Drag and Drop, and Web Storage APIs.
To confuse things somewhat, the HTML5 term covers both APIs that are published in the W3C HTML5 specification and APIs that are published in the Web Hypertext Application Technology Working Group (WHATWG) specification.
And there’s more! HTML5 is also associated with some other APIs that are published separately to the W3C HTML5 and WHATWG specifications altogether, such as the Geolocation API, the File API, and the Indexed Database API.
So really HTML5 is an umbrella term for a set of related web technologies. The situation is summed up quite nicely in the diagram below by Sergey Mavrody, reproduced from the HTML5 Wikipedia page.
Figure 2 The bag of technologies that is HTML5
Another useful resource on this topic is the Standards for Web Applications on Mobile: current state and roadmap document, which tracks the many W3C-developed technologies that enhance the capabilities of mobile web apps, and is published on the W3C site.
As outlined above, HTML5 defines a whole set of capabilities, including location APIs, audio, video, and graphics capabilities, and, particularly important in the mobile context, access to device hardware. HTML5 represents a coming-of-age for the web browser in that things that were once only possible via a native runtime are now achievable directly in the browser. Web apps can now reach deep into the guts of a device and pull out data that was inaccessible before. HTML5 web apps can, through location APIs, know the whereabouts of the device; through sensor APIs they can access camera images and compass bearings; and through storage and caching APIs, they can continue to function when offline. In short, the browser got a whole lot better with HTML5.
Now that we’re a little clearer on what HTML5 is, the task of investigating its practical usefulness for the mobile web should become a little easier. For starters, we’ll limit this series to those features which satisfy the inclusion criteria of sexy (for the web geeks among us, at least), and mobile-oriented. For instance, Geolocation certainly satisfies these criteria, whereas Indexed Database maybe not so much. Topics we’ll look at, then, will include:
- Geolocation API
- Device Orientation API
- Touch Events
- HTML Elements
- Media Capture
That is not to say that the others are not relevant to mobile (many of them are), or that these ones are applicable only to mobile (they aren’t). There are, however, quite obvious mobile use cases for everything listed above and so they are likely to have broad appeal to the mobiForge audience. This is why they were chosen.
In the follow-up articles of the series we’ll take a look at each of the HTML5 features mentioned above, with a view to learning how easily (or not) some of them can be used in mobile Web sites. The following should give you a taste of what to expect:
- The Geolocation API:
This API exposes location data from the device, enabling location-aware web services. There are many very compelling use cases based around geolocation, including location-aware gaming, local search, and mapping & navigation. In this series we’ll look at how to make a webpage location-aware by working through a simple map example. - The DeviceOrientation API:
This API provides a standard way for webapps to know what way a device is oriented in space. Mobile use cases include mapping and compass apps, game control and gesture recognition. We’ll look at the basics of using the Device Orientation API in a webpage to control the appearance of an element on that page. - The Touch Events API:
This API defines a set of events that are suitable for interacting with webpages via the ubiquitous touchscreens of our modern mobile devices. The touch events might be considered as the counterparts to the mouse events (mouseover, mousein, mouseout and so on) of the desktop web. The new events include touchstart, touchmove, and touchend. Use cases include drawing and gesture based interactions. When we review the touch events API we’ll look at how to capture and process a variety of these events. - HTML5 Elements:
There are quite a few new HTML elements in the HTML5 specification. We’ll take a look at some of the more useful ones from a mobile perspective, including Canvas and the new form input types. Canvas can be used with JavaScript for drawing and the form input types can make for a much nicer user experience when inputting data on a mobile device. - Media Capture:
Only a small number of mobile browsers support media capture right now. However, given that the vast majority of smartphones come equipped with all the necessary hardware, we can expect HTML5 media capture to be widely supported in the future. Hence we’ll cover the basics in the series.
Hopefully this has been enough to whet your appetite. If so, you can go to straight to part two in which we review the Geolocation API.
Useful Links
- W3C HTML5 Specification: http://www.w3.org/TR/html5/
- WHATWG Specification: http://www.whatwg.org/specs/web-apps/current-work/
- Geolocation API: http://www.w3.org/TR/geolocation-API/
- Device orientation API: http://dev.w3.org/geo/api/spec-source-orientation
- Indexed DB API: http://www.w3.org/TR/IndexedDB/
- Touch Events API: http://www.w3.org/TR/touch-events/
- File API: http://www.w3.org/TR/FileAPI/
- Drag and Drop: http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#dnd
- Web Storage: http://www.w3.org/TR/webstorage/
- Standards for Web Applications on Mobile: current state and roadmap: http://www.w3.org/Mobile/mobile-web-app-state/
Edit 17/5/2013 – Add reference to Standards for Web Applications on Mobile document
