Discover HTML5

Taken literally, ‘HTML5’ simply describes the latest incarnation of the web’s mark-up language, which, granted, has its fair share of fresh delights: native video and audio support, and the much-lauded dynamic Canvas element, to name but two. But what really gets designers and developers excited is ‘HTML5’ used in its broader sense – as an umbrella term for various interlinked technologies, notably CSS3, WebGL and JavaScript, which are helping to shape the future of interactive design.

“It’s the combination of multiple web technologies, not an element in isolation, which makes the delivery of rich open web applications possible,” argues Derrick Holmes, chief technology officer at London-based Digit. “This encompasses not only front-end, but also exciting back-end technologies that are often the silent muscle behind scalable, faster, real-time and multi-user web apps.”

Ian Hart, lead developer at interactive production company Stink Digital London, lists a selection of inspiring HTML5 projects that have caught his eye – including Google’s ‘20 Things I Learned’ and Nike’s ‘Better World’. Stink’s own clients include Nike, Lexus, Diesel and Hugo Boss.

“I think it’s interesting when you don’t realise that it’s HTML5, or any particular technology,” reflects Hart. “That’s when creativity and technology meet.” He argues that you shouldn’t need to compromise in order to design around one browser’s lack of support for a given feature, pointing out that successful digital projects rarely look identical across all platforms: “We just need to make sure the design and interaction can adapt,” he insists. “It’s the best way to future-proof sites and apps across platforms, especially mobile.”

One of the first HTML5 projects to cause a genuine stir was the highly interactive ‘The Wilderness Downtown’ for Arcade Fire, which won two Cannes Lions, a Grand Clio and three Webbys, not to mention both Black and Yellow Pencils from D&AD.

Combining Google Maps with in-browser 3D and beautifully shot footage, it enables viewers to customise the experience with their own childhood neighbourhood as the setting. It was a global collaboration between cross-platform production company B-Reel – founded in Stockholm, and since expanded to London, New York and LA – and creative developer Jocabola, which moved from Barcelona to Berlin before finally settling in London.

As the founder and creative director of Jocabola, Eduard Prats Molner had been working in Flash for more than a decade before trying his hand at HTML5: “When it started to be partially adopted by major browsers, it felt natural to start exploring its possibilities,” he recalls.

“Although Jocabola has almost fully abandoned the use of Flash now, HTML5 is still immature by comparison, with many features that are not yet natively supported, such as webcams and microphones,” Molner continues. “But HTML5 is based on web standards, which means the full adoption of CSS and progressively CSS3. It makes simple things even simpler – especially type and layouts,” he adds.

HTML5 has been hailed by many as the great Flash killer, particularly where iOS is concerned, but Hart believes that the two technologies actually complement each other well: “Flash is still better at handling elements like audio and webcams, and if you combine this seamlessly with a truly native experience you can get the best of both worlds,” he argues.

“It’s impossible to talk about HTML5 and not mention Flash,” agrees Holmes. “Flash may have become a dirty word for some clients, but there’s no need to hate it: there are still cases where it’s the suitable tool for the job. HTML5 has just decreased the number of cases where Flash would have been the default choice.”

Digit is a firm advocate of open source, and HTML5 embodies this approach: “One exciting feature is WebGL, which, combined with WebSockets and Node.js, enables real-time 3D directly in the browser,” enthuses Holmes. “However, until WebGL builds become more stable – and support is added to the iPad – it should be treated with caution,” he warns. “Technology should always improve the user experience, and not just be fancy.”

Molner points out that Google Chrome, Firefox and Safari can all now support WebGL natively, bringing 3D graphics into the browser environment. “People such as Mr.doob are contributing massively with open-source libraries like Three.js, and I believe WebGL will become the Web3D standard of choice,” he says, highlighting the widely celebrated interactive movie Three Dreams of Black as an example. “Hopefully it’ll soon be properly adopted in mobile devices too,” he adds.