HTML5 feature support amongst web browsers
Tom and Luke investigate some of the most popular HTML5 features and their support across web browsers in today’s market.
Video
At present video is one of the best supported specifications of HTML5. It enables us to seamlessly deliver video in a variety of formats and across multiple devices and platforms. We’re able to implement HTML5 video functionality now because it gracefully degrades, delivering Flash video or a static link as a fall-back for browsers that currently don’t support the specification.
We've made practical use of the video tag in a number of projects, most recently for Sky Atlantic. Video was delivered in a "stack":
- WebM or;
- MP4 or;
- OGV or;
- Flash or finally;
- Textual / Image Content
This ensures that as many users as possible get the best possible experience. The HTML5 video specification makes delivering this “stack” easy.
HTML5 video also allows you to interact with other content on a web page; for example, showing supporting copy / imagery alongside video at set time intervals.
Forms
Opera currently has the best support for HTML5 form elements and features. From placeholder text to date pickers and number selection with slide interfaces, HTML5 has you covered. The great thing is that you can use these elements and features now because they degrade gracefully in older web browsers. This means that we can produce code that is both lighter and faster – improving the end users experience.
Get involved! The easiest features to implement on your site are defining input types such as "date", "email", and "url" on input tags to aid a user inputting data.
Get more information here: http://diveintohtml5.org/forms.html
Canvas
Canvas is very powerful and combined with JavaScript is a strong contender to Flash. It can be used to create full and 3D gaming experiences. See some good examples here:
Canvas allows you to draw images with lines of code, creating lightweight and scalable vector images that beautifully resize and look as good on a mobile device as they do on a 60” flat screen TV!
Storage
HTML5 brings with it very powerful local storage features. Lost a connection half way through filling out a form? No problem. Store it in a client side database and send it when the connection is back online. Just like back end databases, these client side databases can be interrogated with client side SQL. Currently Chrome and Firefox have the best support for HTML5 storage features.
Geolocation
Geolocation can help deliver targeted information to users based on their location and is an exciting prospect for marketing executives. It allows a user’s web browser to work out where they are, either via GPS on the move or their IP address from a static PC, and tailor content based on graphical location.
We recently worked with BP to create 'Today's Offers' which enables users to locate the nearest petrol station and download relevant offers to their phone.