Blog

HTML5 – Oooh, and wow!

HTML5 is the latest hero in the world of digital marketing. It’s a massive topic though – so I’m only going to scratch the surface here, whet the appetite if you will…

Techie bit:

HTML5 is the framework that enables a multitude of browser-based capabilities.  Most applications of HTML5 use JavaScript to facilitate interactive behaviour, and CSS3 to deliver the visual WOW factor.  The examples below will generalise to include a combination of HTML5, CSS3 and JavaScript – the three key pillars of a truly dynamic, modern browser-based experience.

In the interest of keeping your attention, I’ll skip straight to some visual examples.  But it’s worth mentioning that there’s a LOT more to it than what you’ll see below.  So much so, I’m sure we’ll post future blog articles that drill down into specific areas of this environment.

NB – not all browsers support HTML5.  We would advise using a modern browser like Chrome, Safari, Opera or a recent version of Firefox or Internet Explorer.

Graphics

Canvas and SVG graphics – these enable powerful 2D and 3D graphic rendering and interaction in the browser. This is one of the key ways in which HTML5 is able to achieve what has previously required Flash.

This really falls into two very distinct areas: SVG (vector) and Canvas (raster). The distinction is loosely speaking that SVG graphics are infinitely scalable (a bit like an EPS graphic can be), and canvas graphics will pixilate if zoomed.

A great showcase of Canvas can be seen here.

Similarly, some great examples of SVG can be seen here.

One of the team’s favourite examples of Canvas + CSS transforms can be seen here.

Multimedia (video and audio)

Video and audio files can be played, and even modified dynamically, within the browser. Currently MP3s, videos, etc. require a plug-in to play them. The intention, through the HTML5 draft specifications, is for multimedia to be played within the browser, without requiring third-party plugins (i.e. open standard format).

Current debate over suitability of various open standard formats rages on – meaning there is no accepted standard for these file types. However, it is likely (given market forces) that Google’s development of the WebM video format and the wide acceptance of the Ogg Vorbis audio that these two formats (or a close relative of them) will emerge as future standards across all modern browsers.

Some great examples and tutorials can be found here.

One of my favourite examples can be found here.

Drag and drop

Dragging and dropping text, images and/or files between a browser window and your machine’s desktop. Currently (in HTML4 and older) to save something from an online environment, or to upload to a site, you need to navigate through a ‘browse’ selection window. HTML5 streamlines this considerably.

A simple example of this can be found here.

Offline web applications 

As we become increasingly reliant on web-based applications and interactive sites, and we access these through mobile devices, it’s important to ensure these don’t break if the connection to the server drops. HTML5 enables the browser to identify which resources should be cached and made accessible offline – preserving the experience when the connection is lost.

A lovely example of an online ‘sticky note’ tool that preserves content when offline can be found here.

I could go on… there are so many areas that warrant discussion, but there are whole sites dedicated to the topic of HTML5, so not something I can do justice to in a lowly blog post.  Hopefully I’ve given you a taste of some of the more visual aspects of HTML5 (and associated technologies).

At Oculus, we’re already using HTML5 throughout a number of projects to great effect.  Feel free to get in touch if you’re interested in finding out more, or perhaps applying some of the capabilities outlined here to your projects.

Be Sociable, Share!