HTML5 is the latest version of HTML – the markup language used to display web pages. Although it’s technically still in development, it’s very much ready to use today, to build websites and web apps. Of course, we’re a very long way from every web designer using HTML5 to build their sites. So here, thanks to our friends at .net magazine, we’ve collected together 50 examples of HTML5 in action that show what it can be used to achieve. Check out these brilliant websites and hear from the people who made them just how they achieved their goals. Meanwhile, if you want to learn more about HTML5 then check out our list of great HTML5 resources.
When Microsoft asked LBi to create an interactive animated story to promote IE9, they jumped at the chance. That’s not surprising considering who was on board for the project: director Edgar Wright and Marvel and Lucasfilm illustrator Tommy Lee Edwards. “Edgar had the opinion that any technology we used should fit the story rather than being shoehorned into the narrative,” explains LBI’s Simon Gill. “This led to a hectic two weeks at the outset, sorting out the main story points, with ideas for elements to build and how they’d fit together. We wanted to try and redefine what an online film is – learning how a Hollywood scriptwriter, an illustrator/animator and a software company could combine on something interesting.”
The decision to use HTML5 and not Flash was a straightforward one, says LBI’s Riaz Ahmed. “While you can do some really cool stuff with Flash, you can now almost do the same with HTML5, CSS3 and jQuery. The mix of these technologies, coupled with SVG and canvas, allows you to put together a visually rich, immersive and interactive experience by enabling developers to create stunning 2D/3D animations and transitions, with the ability to play back high definition audio and video. These technologies are very appealing to developers and ultimately to the web audience, who have no need of downloading or maintaining any plug-ins.”
Roger Dubuis is a master craftsman: a highly skilled, talented watchmaker for those with an eye for beautiful design and a deadly accurate timepiece. The website for his stunning range of watches needed to reflect those qualities; built by French agency Ultranoir and using a host of HTML5 features, the site offers memorable experiences for the user.
Mathilde Vandier, strategic planner at Ultranoir, reveals that along with HTML5 audio and video, the History API is used “to offer a fluid navigation through pages without total reload – it helps to create an immersive experience”. In addition, the closely related Geolocation API is used on the store locator to localise users on the map. Vandier goes on to tell us that if there is an occasion where a browser doesn’t support the site “we provide fallbacks (which are invisible for the user) to keep the consistency of the experience”.
04. Andy Wilson Financial Services
