Classy HTML5 design: 6 inspirational websites

Take a look at our top 6 for the ultimate inspiration into creating a more unique and user friendly website.

Agent 008 Ball

An app in the most classic sense of the word, Agent 008 Ball is a spy-themed pool game; it's the type of game you wouldn't expect to find in a browser without a plug-in such as Flash or Silverlight.

Created by Pixel Lab, the game uses HTML5's canvas element for the pool table rendering, while the sound effects API uses HTML5's audio element.

"With the new elements in HTML5, coupled with the improvements we've seen in JavaScript engines in the past couple of years, you have a first-class rendering engine that's on par with other UI frameworks," says developer Robby Ingebretsen.

The project wasn't without its difficulties, though, mainly due to browser compatibility snags and HTML5 being an emerging standard - with good documentation and samples being hard to find.

Curiously, the performance hit expected from rendering 40-50 frames per second never materialised. Ingebretsen feels that, with HTML5 design, "we're on the cusp of something big - a new era for browser-based applications.

"The next two years will almost certainly bring a parade of tools and frameworks that make building for HTML5 even faster and better."

Sounds Good

Sounds Good is a web app for effortlessly adding sound to video. Once you're logged in, upload a video and add sounds. All of the magic happens directly in the browser, using HTML5 video/audio elements and API.

Leo Soto from developers Continuum tells us that when it came to choosing the technology, "you only have two options: Flash or HTML5. We saw Flash as a necessary evil when the web needed capabilities the browser couldn't offer. But now that all of the new browsers are coming out with HTML5 support, the decision is a no-brainer."

The team also realised that "integrating the video player and the sound editor with the rest of the page would be easier if the entire experience was coded over the same platform". Currently in alpha with plans to add further functionality, Sounds Good is worth keeping an eye on.

Authentic Jobs

Authentic Jobs from Cameron Moll has been a popular site for web jobs since 2005. As well as recently launching in the UK, it's undergone an HTML5 facelift.

The reason for switching to an HTML5 design is explained by developer Ben Bodien: "Originally (and perhaps surprisingly), it was block-level anchors that led us into HTML5. The job listings on the homepage used to be marked up with a table, but there was no way to link an entire table row with a single anchor."

The team have implemented a number of the new elements and form input types and attributes, as well as the closely related Geolocation API.

Perhaps most interestingly, though, Bodien explains how they're using the History API to "track changes to the search and filtering controls on the homepage, so that people can bookmark and share specific filters, as well as being able to use their browser's back and forward controls to navigate through their changes".

As standards such as HTML5 evolve, Bodien is looking forward to seeing "broader use of audio and video in place of Flash, and more app-like behaviour with local storage, richer forms, drag-and-drop and so on. It's fantastic for developers to have access to standardised solutions to common challenges without having to resort to JavaScript functionality plugs."

Metropolband.com

This is a lovely little site developed by Aptitude Lab in Valencia for Spanish indie rock band Metropol. Using a combination of canvas, the Drag-and-Drop API and video, the site becomes truly interactive and enables you to choose tracks to play on the video jukebox.

Using graceful degradation, developer Miguel Santolaya explains that users "with IE8 or under will see a YouTube reproduction list instead of HTML5 videos, and they're advised to use a modern browser to live the full experience".

The team at Aptitude are excited about the future of HTML5 design. Santolaya says: "for us, HTML5 is the future. Before this technology, 70-80 per cent of our websites were done with Flash. In a couple of years, probably 100 per cent of our websites will be done with HTML5.

"We're really excited with all the possibilities opened [up] with these new features. And that's just the beginning! A new era is coming. Audio, video, all the canvas stuff ... It's amazing."

The Daily Beast

Curated to avoid information overload and sometimes controversial, The Daily Beast is dedicated to breaking news and sharp commentary. The site is evolving and some shiny new HTML5 markup has been creeping in. Delving into the source shows that new sectioning elements have been used widely throughout, along with data-* attributes and WAI-ARIA roles for improved accessibility.

The site also uses RDFa, a W3C recommendation for embedding rich metadata in HTML competing with HTML5's Microformats and Microdata. It's a pity the site uses a Flash player rather than HTML5 video or audio for playing multimedia content, but the fact that it's embracing HTML5 design at all is encouraging.

Font Dragr

Font Dragr provides a revolutionary way to test custom fonts in the browser. No coding or uploading is required - you simply drag and drop them.

The site has been updated to take what was a proof of concept and create a fully functional, useful web app. Font Dragr is chock full of HTML5 and friends, including new elements; the drag-and-drop API; the History API; localStorage; the contenteditable attribute and more.

Creator Ryan Seddon explains that after the initial load, if you navigate to another page localStorage is used to "do an Ajax request, which will get the view HTML, replace it in the DOM and then cache that view HTML in localStorage. So it only needs to do a network request the first time around."

Unlike some, Seddon found the drag-and-drop API to be "incredibly powerful", despite "some quirks and cross-browser differences".

With plans to incorporate Application Cache and Cross Document Messaging, it's an HTML5-shaped path for Font Dragr. That's no surprise given that for Seddon, HTML5 "is the future". "It's well kitted out, defines features and behaviours succinctly and eventually will work in most browsers, as the latest rendering engines support it or will do in future."

Want to see more high-quality HTML5 design? Then view the best HTML5 websites of 2011.