Why HTML5 and why now?
When it comes to touch-screen mobile devices, native applications have led the way in terms of performance, speed and tighter integration to specific platforms. Unbound by the need to conform to standards, native apps could rapidly take advantage of the latest hardware and operating system innovations, while Web technologies always had to wait for the international community to agree and implement standards first. But with the HTML5 specification coming to fruition, browser-based mobile apps are rapidly catching up with the natives.
Native apps, however compelling the user experience, create a plenty of challenges for developers. They are forced to create, maintain and support apps for each platform – often requiring different versions of the app for variants of the same operating system. The problem is exacerbated when target users are not up to date with platform upgrades and app updates pushed via proprietary stores.
The HTML5 standard is the answer from Web technologies to these rapid innovations at multiple layers, especially in mobile and handheld devices. HTML5 and related technologies provide the foundation for building responsive, sophisticated apps that can run directly within a browser, providing the same great experience of a native app. Still in draft state, HTML5 is expected to become an official W3 recommendation of Web standards by 2014. All Web and mobile browsers have been aligning themselves to HTML5 pretty aggressively for a while now. If you are a mobile app or Web developer, this has great implications for your products and now is the best time to start getting your hands on HTML5 technology.
It’s all about experience and compatibility
HTML5 shifts the fundamental idea of Web development, by focusing more on apps instead of server pages. Apps here are more about functional purpose and a seamless user experience, especially on mobile devices. HTML5 provides an array of great technologies for developers to really build powerful mobile Web apps. However, it is not a silver bullet solution. Support for all HTML5 APIs is not universal and many browsers have only implemented a subset of the W3C specification. This requires developers to come up with a fallback plan for when certain APIs are unavailable.
Environment and feature detection is critical to dealing with this problem. Developers should use detection to know which features are available to your app and when to fallback to some other technology or API. Often two or three different implementations may be required in order to cover all browser, device, and OS combinations. Here at InMobi we refer to this combination of variables as the complexity matrix. Covering the spectrum of the complexity matrix can be difficult at times, but there are a number of great JavaScript libraries that exist to help cope with this problem and already have fallback implementations.
You can find an HTML5 feature compatibility matrix for mobile and tablet browsers at mobilehtml5.org, which is helpful when you want to balance HTML5 features with device compatibility.
Mobile focus
HTML5 has some key specifications from which mobile Web apps can benefit. Here are few noteworthy ones:
Canvas drawing (2D Drawing API):
This is one of the features widely implemented by almost all tablet and mobile browsers, this provides the ability for you app to mark off a space on a page to draw interactive pictures, charts, graphs and 2D game components without requiring the user to download any additional plugins.
• See the W3C spec for more details.
Touch events:
Apps can leverage touch events in HTML5 to provide the same great interactive experience that native apps provide. By tracking touches and providing simple gesture based controls, app developers can help users quickly navigate through apps or build fun and interactive games. Supported by major mobile browsers
• See the W3C spec for more details.
Geolocation API (GPS / Cells or WiFi):
Location can provide great context to your apps. You can customize and tailor the experience based on where the user is accessing your app from. This specification has been implemented by the majority of the browsers, with all the underlying hardware functionality nicely abstracted and location information available as coordinates (latitude and longitude). Usually browsers warn the user of location detection by your app, some thing to be wary of if location is not critical to your app.
• See the W3C spec for more details.
Application cache
This is one of the significant additions to HTML5, which directly helps mobile app development. With app cache, apps can support offline browsing, improve responsiveness by accessing cached resources locally and reduce server load significantly by only downloading resources that have changed.
Resources to be cached offline are declared in a manifest file and provisions are available to query cache status and update or invalidate the cache.
• For more on app cache see: Using HTML5 application cache in mobile Web apps and the W3C spec.
Local Storage:
With local storage options, apps can persist and retrieve information locally on the client to optimize user experience, especially for mobile devices.
There are few options here:
- Web Store: A simple key value store, widely supported and less complex to use, with persistence available even when the browser has been closed and reopened. You can also do session based storage i.e. data is cleared when the browser window is closed. Not a good option if you want handle large datasets or structured data.
- Web SQL Database: Though this appeals to SQL fans and developers looking for a transactional database model, this has been deprecated and most browsers will stop supporting this at some point in time.
- Indexed Database (INDEXEDDB): This is a hybrid of Web Store and Web SQL Database. It appeals to developers looking for a transactional database model, provides asynchronous API, but has a steep learning curve. Spotty browser support, but most future versions of browsers will support this.
• See the W3C spec for more details.
Multimedia:
Support for video and audio tags / players is one of the key advantages of using HTML5 over Flash. Almost all mobile browsers support this now.
How to get started in HTML5
HTML5 is comprised of multiple technologies; so getting started is really more of a question of what you want to build. In order to develop successful HTML5 apps for mobile, developers must be familiar with JavaScript and CSS3 (Cascading Style Sheets Level 3).
The CSS3 specification is still under development by W3C, however many of the new properties of CSS3 have been implemented by modern mobile browsers and it is perfectly suited to help apps resize themselves for different form factors and screen dimensions.
Here are some basic examples to get you started. Note the fallback plans. Developers should always have a fallback plan for cases when the target browser does not support a feature:
a) Multimedia (Audio/Video)
Audio and video can be used via either HTML or JavaScript. Browsers provide a default set of UI controls for driving the video/audio players. However, the true power of these elements lies in utilizing the full API and learning to create custom audio and video player experiences. Both of these APIs are far more extensive than what I will cover here but it’s enough to get started.
Fallback plan
There is no single media format that is supported across all browsers, so you will have to encode your media in multiple formats if you want to support the full range of HTML5 compatible browsers. Further more, there are plenty of older browsers that do not support the audio and video tags. It is important to have a fallback strategy in case the audio or video tag isn’t supported. The content that is nested within the audio/video tags will only be shown in the event that the audio/video tag is not supported.
HTML audio example
|
1 2 3 4 5 6 |
<audio controls="controls"> <source src="audio.wav" type="audio/wav" /> <source src="audio.ogg" type="audio/ogg" /> <source src="audio.mp3" type="audio/mpeg" /> Backup message shown if the browser does not support the audio tag. </audio> |
JS audio example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// Create the audio player. var audio = document.createElement("audio"); // Check if this audio tag is supported. Feature detection! if (audio.canPlayType) { // Is wav supported? if (audio.canPlayType("audio/wav")) { audio.src = "audio.wav"; } // Is OGG supported? else if (audio.canPlayType("audio/ogg")) { audio.src = "audio.ogg"; } // Is MP3 supported? else if (audio.canPlayType("audio/mpeg")) { audio.src = "audio.mp3"; } // Turn the controls on. audio.setAttribute("controls", "controls"); document.body.appendChild(audio); } else { var div = document.createElement("div"); div.innerHtml = "Backup message shown if the browser does not support the audio tag."; document.body.appendChild(div); } |
HTML video example
|
1 2 3 4 5 6 7 8 |
<video controls="controls"> <!-- Firefox support --> <source src="video.ogg" type="video/ogg" /> <!-- Safari/Chrome support--> <source src="video.mp4" type="video/mp4" /> <!-- Fallback message --> Backup message in case video tag isn't supported. </video> |
JS video example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// Create the video tag. var video = document.createElement("video"); // Check if this video tag is supported. Feature detection! if (video.canPlayType) { // Check for OGG support. if (video.canPlayType("video/ogg")) { video.src = "video.ogg"; } // Check for mp4 support. if (video.canPlayType("video/mp4")) { video.src = "video.mp4"; } // Turn the controls on. video.setAttribute("controls", "controls"); document.body.appendChild(video); } else { var div = document.createElement("div"); div.innerHtml = "Backup message shown if the browser does not support the video tag."; document.body.appendChild(div); } |
Hint: A better fallback mechanism than showing a backup message is to fallback to a flash player in the event that audio or video isn’t supported. It is beyond the scope of this article but there are great references on the Web on how to do this.
b) Canvas drawing (2D drawing API):
The canvas element has brought the power of graphics rendering to the Web browser without the need for Flash. Many great gaming engines have already been built on top of this new technology.
The canvas is a drawing surface that allows you to render shapes and images to the area that the canvas occupies. The canvas API is extensive and extremely powerful. I’ll provide a couple snippets to get started with, but this element is best learned by reading the spec and really playing around with it.
Fallback plan
Use scalable vector graphics (SVG) as it has very good support for animations. Elements can be animated using declarative syntax or via JavaScript, but SVG will slow down as the document complexity increases – this is particularly an issue with games.
JS example – Draw a rectangle on the canvas
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// Create the canvas element. var canvas = document.createElement("canvas"); // Check if the canvas element is supported. Feature detection! if (canvas.getContext) { // Set the width and height of the drawing surface. canvas.width = 100; canvas.height = 100; // Add the canvas to the dom before drawing to it. document.body.appendChild(canvas); var context = canvas.getContext("2d"); var x = 10; var y = 10; var width = 80; var height = 80; context.fillStyle = "rgb(200,0,0)"; context.fillRect(x, y, width, height); } |
JS example – Draw an image on the canvas
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// Create the canvas element. var canvas = document.createElement("canvas"); // Check if the canvas element is supported. Feature detection! if (canvas.getContext) { // Set the width and height of the drawing surface. canvas.width = 100; canvas.height = 100; // Add the canvas to the dom before drawing to it. document.body.appendChild(canvas); // Create a new image. var image = new Image(); image.addEventListener('load', function(event) { var context = canvas.getContext("2d"); var x = 10; var y = 10; var width = 80; var height = 80; context.drawImage(image, x, y, width, height); }, false); image.src = "http://somedomain.com/someImage.jpg"; } |
Frameworks and native bridges
While HTML5 provides a rich set of features to begin building your Web app, there are limitations and restrictions that prevent a Web app from having the full feature capabilities of native apps. These limitations can be overcome by wrapping your web app in a native app that provides a bridge to the device’s native APIs. This bridge can be used to access many features that would otherwise be inaccessible to your app.
PhoneGap and Apache Cordova are great examples of libraries that provide this type of functionality.
More Resources
• What does JavaScript bring to the mobile HTML5 and CSS3 party?
• Sense and sensor-bility: access mobile device sensors with JavaScript
• html5rocks.com has full-featured tutorials, samples and more on HTML5, they even have a playground where you can experiment with HTML5 features interactively.
• The W3C HTML5 specification provides more in-depth details into the spec.
• diveintohtml5.info explores a hand-picked selection of features from the HTML5 specification.
• mobilehtml5.org provides the compatibility matrix across different mobile browsers for HTML5 features.
You might also be interested in exploring some of these frameworks to cut down on development time:
• Google Closure Tools
• Sencha Touch
• jQuery Mobile
• Backbone JS
• Sprout Core
• HTML5 Boilerplate for Mobile
Leave a Reply