We hand-pick some amazing examples of HTML5 in action, and talk to the designers behind them to find out how they were made.
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 60 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.
01. Facebook Stories
Facebook Stories is a site about sharing extraordinary stories of people using Facebook. It sits outside of the Facebook domain and uses new HTML5 elements, video, data-* attributes and SVG. The site was designed and built by Area 17.
Developer Mike Byrne of Area 17 has some forthright views on HTML5. “I got bored of HTML5 a long time ago – its just HTML with the pot stirred a bit,” he says. “There are some nice new JavaScript things but frankly the new HTML tags are boring.” SVG was used extensively within the American election coverage and Midnight Delivery parts of the site. Byrne used the D3.js library to help with the mapping and animations for both of those sections of the site.
He did have some hurdles to overcome though, noting that D3 is intended for graphing, not animation – “so the arc method isn’t for drawing a curved line, but a part of a pie chart. This same unfamiliarity followed through to the CSS as the styling attributes are different for SVG than for regular HTML elements”. Byrne explains that in the main he does like SVG, because “it’s HTML elements, so you can have events and CSS transitions and what not on them. I fell out with canvas ages ago for not being so easy to integrate and style.”
02. Video Guard
Security firm Grupeme approached design agency Bürocratik wanting a name, brand and website for a new product on the alarm market. Grupeme wanted all of this to surpass its competitors. EnterVideoGuard.
The team at Bürocratik decided to use HTML5 because they plan to make some content available offline and use geolocation to determine a user’s location for driving directions. The site also uses new elements, but Bürocratik’s creative director Adriano Esteves believes that “some are still not very clear regarding when and how they are used”.
He goes on to note that “with a site like this, we had many doubts about when and how to use them, or when not to use them”. Esteves also came across issues when using new input types and attributes. He explains the team found, “too many inconsistencies between browsers and OS, and a fallback solution was too time-consuming”. The Bürocratik team do, though, believe that this is the most exciting time to work in the web since the beginning of web technology. “The future of HTML5 is in the hands of developers and browser manufacturers,” reckons Esteves.
03. Shower
If you’ve ever had to do a presentation, you’ll know how long it takes to wrestle presentation authoring software to ensure consistent headings, spacing, colour and so on throughout – and then you’re left with the content in some proprietary format that you can’t really put online.
Vadim Makeev has written Shower, an open source HTML5/CSS3 presentation utility that gives you a slide overview, individual full-screen slides and works in all modern browsers, including IE10. You can find the GitHub repository here.
04. HTML5 Canvas Scratchpad
Kevin Roast’s canvas scratchpad enables you to load up some pre-supplied JavaScripts, tweak any values and watch their effect on the rendered code.
“I made it for myself initially, so that I didn’t need to create new pages from boilerplate code whenever I wanted to try out little canvas demos and tests,” says Roast.
“Once I got a basic [version] working, I quickly realised it might be helpful to other developers who wanted to try out canvas code quickly. It was then easy enough to add some of my other small JavaScript demos as examples for others to play with.”
05. Southern Africa Travel
Southern Africa Travel was built by Luke Hardiman of newrelease – a tiny web design and publishing outfit based in Cape Town. Not only is it impeccably designed and usable but also uses lots of HTML5 under the hood, including section, article, aside, footer, header, time, figure, figcaption and some data-* attributes.
The site also makes use of microdata, with Schema.org as a reference. “This client has a vested interest in having their content crawled in a meaningful way,” explains Hardiman. “The Organization schema even allows us to flag them as a travel agency, which should serve to reinforce their Google Local listing at the markup level. Microdata seems, to me, to be a risk-free early- adoption opportunity. The engines and browsers that don’t get it will simply ignore it. [And since we’ve] built it into the ExpressionEngine templates, [the client’s] content team don’t need to know what it’s for or even that it’s there at all.”
Hardiman is also experimenting with further schemas. “We’re implementing the Product schema for accommodations and the Place schema for the site’s destinations,” he says. “Having implemented location hierarchies on travel sites at an IA level, I’m hoping search engines may soon understand the scope of this type of content at a geographic level.”
06. The Mustache Game
The brainchild of Dan Nelson, Steve Dolan and John Dierks, The Mustache Game is an online version of a popular drinking game. The team built a JavaScript bookmarklet to enable users to play the game with video platforms such as Hulu and YouTube.
The site is built with HTML5, and Nelson comments that “learning the semantics and basic rules was actually refreshing”. New elements are used, and Nelson explains that using the <video> element the team could “easily embed a movie, use fallbacks for each browser, overlay jQuery and give visitors a chance to try out the game without leaving our site”.
Nelson also believes HTML will “force developers to help build better standards, grow the platform and showcase what HTML5 is capable of – a challenge that should produce some exciting new features and web experiences in the months to come”.
07. Yas Marina Circuit
Built by LBi for Etihad Airways, Yas Marina Circuit enables you to race around Abu Dhabi’s famous Yas Marina Formula One Circuit. Guy Jarvie from LBi explains that there’s “an abundance of interesting facts around the Yas Marina Circuit and Abu Dhabi’s motorsport scene. The danger was to either create a ‘too long; didn’t read’ page or skimp on content. HTML5 solved this problem for us as it allowed us share a wealth of information, but present it in manageable slices.”
The use of HTML5 revolved around the site’s background, where the team converted a four-metre-wide image, weighing in at 1.4MB, into
3000 lines of SVG that reduced its size by more than 20 per cent. Jarvie also notes, following some particularly careful planning, that “thanks to HTML5’s versatility, code already available and hopefully our preparation, the actual build process was not too painful.”
08. Poker Blind Timer
Philippe Pérusse decided to create this free poker clock because he was hosting a poker tournament and wanted to make sure it ran smoothly. The site was built to work on TVs and iPads, and uses HTML5 audio with the media API to play buzzers.
It also uses a few entirely new elements: Pérusse enthuses that forms “are the best thing in HTML5 and the one that saves us the most time… number input types with min and max, validation, placeholders and so on”.
Pérusse also works for V, a large Canadian TV company that regularly
uses HTML5 to put together its web presence. Rather unusually, it recently took the rather forward-thinking decision that clients with older browsers wouldn’t get the full experience, and that “we are okay with that”.
09. Energy Centre
Energy Centre is Ireland’s leading installer of solar panels. The company recently asked Colm Tuite to redesign its website. The site is responsive and was built mobile first using HTML5 and Ruby on Rails. Tuite explains that he develops all his sites with HTML5. “HTML5 elements are much more semantic, which helps code readability if you’re working with a team, and also helps to minimise CSS selectors,” he says.
The site uses a number of new elements and data-* attributes, and some ARIA for accessibility. Video is currently embedded from YouTube, which works across devices, but Tuite may switch to a full-blown HTML5 player in future.
Tuite also feels that while there is some debate over whether or not HTML5 helps with SEO: “there is a good chance Google will favour semantic HTML5 over HTML4 some time in the future. So for me, it’s a no-brainer”.
10. Currys
An increasing number of big, consumer-facing sites now use HTML5 under the hood in an unobtrusive way. A great example is the site of the UK’s biggest electrical goods retailer, Currys. Lurking underneath its traditional fridge-flogging design are HTML5 structural elements, ARIA roles and a mechanism for responsive images.
“We were already using HTML5 before we deployed the new responsive website,” Mark Adkins, proposition development manager at Currys and PC World, tells us. “We use ARIA for main [content], navigation and contentinfo roles. It is best practice in terms of accessibility, something that is important to us.”
“We started to develop our own way of loading images using a deferred load (with data-* attributes) on a basic <img> markup,” he continues, “as we only deal with two different image sizes (one for desktop, and one for tablet and mobile).
“The <picture> element proposal is really new in the W3C draft, and is still a proposal. As we were developing the project more and more documentation was forthcoming on this.”
11. Brandon Generator
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.”
12. Roger Dubuis
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”.
13. Bjork.com
When Icelandic pop icon Björk needed a new website, Jam3 built her an animated 3D interface that screams “wow factor”. The commission came about because of a blog post, explains the agency’s Mark McQuillan. “It was an innocent post about an HTML5 experiment. We were doing some testing of some 3D techniques in the canvas tag. Our
developers’ regimen includes regular R&D time so we try to document a lot of our research in our labs blog. At the time, the “whole world was
moving to HTML5” so we were just playing around. Björk’s people were searching for some pretty specific HTML5 capabilities and our post looked like a good lead to them, I suppose. The phone rang at Jam3 one afternoon, we were able to tell them more about our team and deep technical capabilities, and the rest is history.”
Jam3 collobarated with art and design partnership m/m to create the site, and getting the 3D data exported and rendering it in a way that it would perform was the main technical challenge. “The first task was to figure out how to use a Google SketchUp file that m/m created the galaxy in. Getting the data out proved to be one of the most interesting challenges our team has ever faced. It wasn’ exactly like we could do a ‘File > Export Canvas’. There was no documented way to do what we
were trying to do.
“In the end, it took about five steps and some custom parsing to format the data into something we could begin using. There were no guarantees that we were even going to be able to draw everything either: developing our own JavaScript 3D engine was fairly easy, but making all the data perform was the last difficult undertaking.”
14. Andy Wilson Financial Services
Andy Wilson Financial Services’ website is made by Laser Red and uses HTML5 structural elements, microdata and native video.
“We did initially look at using a library for video fallbacks, but we didn’t think this was necessary,” developer Elliott Stocks tells us. “We used a common method to play Flash if HTML5 is not supported, simply combining a Flash object within the <video> tag. We haven’t had any problems with this, and we prefer keeping the libraries to a minimum.”
The site still uses Cufon for fonts. Why? “We weren’t too happy with the rendering of the (free) web fonts in some browsers (mainly Firefox). Support for web fonts is improving but the smoothness of rendering could be better. The website still renders fine without JavaScript, but we display a message informing users they may have a better experience with JavaScript enabled.”
Microdata is a contentious part of the HTML5 spec, because many believe HTML should instead incorporate a W3C standard called RDFa. “One of the main reasons we decided to use microdata was because it is backed by some of the biggest search engines,” Stocks explains. “We could have used RDFa but decided against this due to its lack of support in HTML5, its difficulty of use (compared to microdata) – and it doesn’t have the backing of search engines like microdata does” (see this article on .net magazine).
15. Envelopments
Envelopments has a product customiser tool made with canvas by Bold Array. Creative director Jason Kilp says that “a key requirement was a similar experience on both desktop and tablet devices. Flash was off the table since the iPad does not support it.
“While there are a plethora of tools out there for Flash, canvas development was not too difficult; a lot of JavaScript and maths are required to make it work, but it was a great challenge and a lot of fun. Our client’s target market are users who are up-to-date with their browsers, so making it work exactly the same on every browser was not a necessity,” Kilp explains.
16. Shiny Demos
Shiny Demos is made by colleagues in the Opera Developer Relations team. A member of the rival Chrome Dev Rel team, Paul Irish is complimentary (“A fine job. Polished work, well developed, novel demos. And great on mobile!”). Designed by Vadim Makeev, it showcases getUserMedia, SVG, canvas, WebGL and more. Try it out, even on mobile!
17. Authentic Jobs
Authentic Jobs from Cameron Moll has been a popular site for web jobs since 2005. Last year it underwent an HTML5 facelift. The reason for switching to HTML5 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.”
18. Metropol Band
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. 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.”
19. Museums Sheffield
Museums Sheffield is a charitable trust responsible for four of the steel city’s museums and galleries. The site was developed by the team atRckt and uses a host of the new semantic elements provided by HTML5.
Developer John Noel explains that in addition to the features that currently exist, they’re developing a “WebGL interface (with Flash fallback) for 3D exploration of some of the museums’ collection items”.
The team are also looking to integrate HTML5 audio, video and canvas, but Noel is keen to point out that “these are always going to be enhancements rather than core to the experience of the site”. He’s excited about the future of HTML5, but also warns that: “If your hatred of IE already burns brighter than the sun, HTML5 is not going to be for you quite yet, because it only compounds well-known issues.”
20. Living Word
When translation agency Living Word requested a re-energising digital relaunch, Tribe took to creating a site to stand apart from the rest. The site needed to be effectively designed and developed to display the content in as succinct a way as possible – keeping a viewer interested without images was always going to be a challenge.
The solution was to develop a parallax effect capable of delivering a large amount of information while maintaining user interest. HTML5 ‘data’ attributes were used to deliver positional information and minimise the amount of JavaScript required on the page, facilitating swifter loading times. The idea was a brave one, but it works well, delivering a stunning, interactive and intuitive customer journey.
The old website was bloated owing to a superfluous Flash file and large images. By using the HTML5 boilerplate build script, Tribe was able to minimise CSS, JavaScript and imagery with just one process. This, when combined with gzip compression and goodies provided by the boilerplate, led to a page speed gain from 60 per cent to over
90 per cent.
21. Flickr Uploadr
The revamped Flickr Uploadr was designed by Scott Schiller who explains the purpose of the redesign. “The goal was to upgrade our upload process to include editing controls where titles, tags and descriptions can be added upfront, moving towards a single ‘upload and organise’ experience,” he says.
“Our previous ‘Uploadr’ only pushed files to the site and did not include built-in editing and organisation features, so it always felt like the metadata step was missing.”
Drag and drop
It has only recently been possible to do all this in the browser. “We use new HTML5 File APIs for file access, including drag and drop of files right into the browser,” Schiller continues, “and the subsequent retrieval and parsing of EXIF data client- side.
“We also use Web Workers to parse EXIF data, which allows us to quickly and efficiently show image thumbnails before any bytes have been sent. XHR2 is used for network transport, including progress events and error handling.”
22. LoveTEFL
LoveTEFL is another website for a company that has zero to do with web technology, showing that HTML5 is now becoming mainstream and mature enough to move beyond geeks to real people and their browsers.
LoveTEFL trains and sends UK graduates to teach English in Southeast Asia. That didn’t stop it using HTML5 for its site. “The market we’re aiming for doesn’t only use desktop computers,” says director Gordon Mathie.
“We want a site that can work on phones, tablets and laptops for young graduates who make up the majority of our applicants, and [for] our partners overseas who might be using portable devices in areas with unpredictable power and slower networks. We’re not quite there, but HTML5 seemed a sensible foundation.”
23. The Boston Globe
Every once in a while a website redesign comes along that’s talked about by people who (gasp!) aren’t even on Twitter. Like Mike Davidson’s 2003 redesign of ESPN, which opened the floodgates to sites that are purely CSS in terms of layout, the redesign of the Boston Globe site shows the way forward for mobile-friendly, adaptive, responsible design.
Scott Jehl of the Filament Group explains: “We wanted the page to perform well on underpowered devices, which meant figuring out a way to load assets efficiently and responsively.
“Every critical feature of the site was designed to work independently of JavaScript, but enhanced with richer JavaScript-driven interactions in capable browsers.
“We used HTML5 for a number of reasons,” explains Scott. “Mostly, it’s future-friendly and offered features that were useful in our feature set. We also appreciated the ability to use newer semantic elements in place of div/p/span, where they made sense.” Examples of HTML5 don’t come any better than this!
24. Catifier
Written by 16-year-old Mitch Samuels, Catifier uses HTML5 magic to add cats to a background image of your choice. Simply paste any image’s URL into the box on the homepage, then drag from the selection of felines to ‘catify’ it to the desired extent. Our screenshot shows a couple of well-dressed cats.
25. The Drumlet
The Drumlet is an app built by Epic as an experiment to see what could be created using HTML5’s audio API. Partner Henry Daubrez explains that Epic has, “some electronic music lovers working here, and it was a great opportunity to blend everything on a fun project”.
The team started out using the Audiolet JavaScript library combined with HTML5’s media API, Canvas and localStorage for caching the audio samples. “The samples used in the app come from one of the most famous drum machines: Roland’s TR-808,” Daubrez remarks.
26. Clerkenwell Close
‘Clerkenwell Close – The Pathway of Smokers’ takes us on a journey through the streets of London providing messages along the way. It’s designed and developed by Duncan Deng, who wanted to see what he could achieve to “beat Flash, which seemed to have been dominating the interactive web world”. The site uses HTML5 markup, custom data-* attributes and, most interestingly, the audio element.
A loop of street sounds plays in the background and then, as Deng explains, “A relative <audio> [element] is attached to different locations and parts of the street video.”
For example, when you reach the pub, JavaScript is used to detect where you are and play a pub sound over the main street loop.
27. Design + Hype
Design + Hype is an inspiration site that showcases some of the best creative design from across the web. It’s a side project designed byAaron Tolley and built by Trevor Morris for them to share creative websites, illustrations, typography and more, that they find each week.
Morris tells us that, “inspired by Trent Walton’s talk at New Adventures Conference only one week before launching the site, the aim of the project was to learn new skills”.
Just browsing
“I chose to use some of the new HTML5 elements, such as <header>, <nav>, and <article>, to learn more about their semantics in a personal project setting. Modernizr with the HTML5shiv is included, so the elements are style-able in older browsers, but the target audience for this project is creative types on modern computers using the latest browsers.
28. Shapecatcher
Who among us hasn’t muttered tearful thanks to the Unicode Consortium for its vital internationalisation work, and its encoding of useful glyphs such as Unicode Character U+1F63C (Cat Face With Wry Smile) or U+1F4A9 (Pile of Poo)?
With so many languages, emoji characters and weird and wonderful glyphs in the standard, it can be very hard to find the one you want. That is, until Shapecatcher hit the web!
Voodoo magic
Using <canvas> for you to draw your shape, a variety of HTML5 elements and voodoo magic on the backend, and all coded up by Benjamin Milde for his Bachelor’s thesis, Shapecatcher is, “a tool to help you find unicode characters. Finding a specific character whose name you don’t know is cumbersome. On shapecatcher.com, all you need to know is the shape of the character!”
No more hunting for hammers and sickles, wry cats or poo again, thanks to HTML5.
29. A Better Calculator
It’s an in-browser, HTML5 graphing calculator built by the folks at Desmos – a startup backed by Mitch Kapor and Learn Capital among others, that “aims to free education from the shackles of expensive, proprietary hardware and software by building great, affordable alternatives that work inside the browser and on mobile devices”.
Desmos’ founder, Eli Luberoff, told us that they hadn’t chosen to use HTML5 originally: “Honestly – we didn’t at first. Our first draft was originally built in Flash, and we switched for iPad support. We’ve found, however, that the advantages extend way beyond mere iPad support.
“Load time is an order of magnitude faster, computation is faster on modern browsers and the whole thing is way more beautiful and feels more responsive. Where available, we use Canvas, Webworkers and @font-face with fallbacks as necessary.”
30. James Anderson
James Anderson is one of the best fast bowlers in world cricket and this site, created by Manchester-based agency Cahoona, celebrates his 10th year in the game.
Built with HTML5, it focuses on Anderson’s career in numbers, with inline SVG being used for the graphic visualisation and animation of the facts and figures, thus making the site perform like a large interactive infographic.
Lead developer Scotty Vernon explains that there was a big tussle over whether to use canvas or SVG. “SVG is resolution independent, has great support for animation and is also very cross-browser compatible,” he says, “so it made sense to choose it over canvas.”
IE update
The Raphaël JavaScript library is used to provide SVG support for older (than 9) versions of Internet Explorer by switching to use VML for rendering. But in Vernon’s opinion, “Canvas will eventually take over as the leading technology to use when building games and online interactions on the web; it has so much going for it at the moment.
“However, for this to happen, IE less than or equal to version 8 needs to be eradicated from mainstream use – and we’re not quite there yet.”
31. FixMyStreet
FixMyStreet is an HTML5, responsive, Web 2.0 mash up of public data and user-generated content that is an unglamorous, useful site. Users can view and discuss potholes, broken street lights and similar problems in the UK, and report them to the local council.
It’s made by mySociety, a not-for-profit community of volunteers and (paid) open source coders that runs a number of sites, such asWriteToThem, WhatDoTheyKnow and FixMyTransport, giving people simple, tangible benefits in civic and community areas of their lives.
32. Where the f*** should I go for drinks?
Our next site is pretty unambiguously named. Type that unwieldy address into your device, share your location and the question about a suitable tavern in the vicinity is answered.
If you’re hungry, their sister site may be a useful bookmark.
33. The Space
The Space is a multi-platform site that enables you to experience the arts for free. The Arts Council England and BBC commissioned the project with the BBC’s in-house team also being responsible for the build.
Technical lead for the project Mo McRoberts notes that, “employing HTML5 was the only way that we could target the range of platforms that we wanted to, in the relatively short development time available, and from a single codebase”.
Feature packed
The site uses an impressive range of HTML5 features including new elements, form attributes and input types, as well as <audio>, <video>, data-* attributes, canvas, the History API and localStorage. In addition to that, some of the third-party pieces of art use extra HTML5 features.
The Listening Machine is an interesting, interactive piece of art that analyses Twitter and plays back a musical representation of tweets.
34. Lois Jeans
Spanish agency Nectar has built a new site for Lois Jeans using HTML5 – primarily because the firm was seeing a much larger percentage of mobile traffic visiting the site, so couldn’t rely on Flash.
The site uses new elements and HTML5 video.
Raúl Ortiz from Nectar explains the agency, “used the <video> tag element with the three alternative versions (.ogv, .webm, .mp4) of the content for the optimal playback in the most variety of browsers (open and closed source formats).”
Ortiz also remarks that while Nectar loves the idea of open standards for the web. “There are clients who need certain closure of content for some reasons (intellectual property, security and so on) and it’s difficult, if not impossible with the openness of this new technology.”
35. Schnaydermans
As you know, to be a fully qualified designer you need a check shirt – Schnaydermans shirtmakers can help you out.
The site was built by Swedish ecommerce agency Pangora; Account manager Björn Walther explains that it uses many of the new HTML5 elements as well as data-* attributes.
Natural choice
“[Pangora] aims to build sites that are exciting for both our customers, their visitors and our teams. HTML5, as a future standard, was a natural choice in that perspective,” Walther continues, adding, “the readability and beauty in the markup is fantastic.”
Following the site’s launch Pangora is keen to evaluate the effects of HTML5 on ecommerce – and its impact on SEO for Schnaydermans.
36. Lincoln Cathedral
The Lincoln Cathedral website was made by Laser Red to replace a Flash site that had become outdated and inaccessible for many new users, according to creative director Liam O’Leary (just one of many examples of HTML5 again eschewing Flash).
“We used HTML audio for the Choral Evensong to make it accessible to a range of users,” he says. “There are noticeable speed improvements compared to a standard Flash Player.
“The background gradually fades into three colours, similar to light passing through the coloured windows in the Cathedral. We used <canvas> for this.”
Browser support
The site works without JavaScript, retaining nearly all of the design and functionality, in order to remain accessible to as many users as possible. “We always try to support older browsers, and Modernizr is the perfect tool to help this process.
“We added extra CSS to try to keep the original design and layout of the website similar for users of older browsers, although we tell them they’re out-dated. They can hide the message if they don’t care.”
Cufon was used because @font-face rendering of some browsers was unsatisfactory, with fonts appearing very sharp and, at some sizes, unreadable.
After gathering analytics data on what mobile users are looking at, Laser Red developed the mobile version of the site using a combination of CSS3 media-queries, JavaScript and WordPress’s is_mobile() function to detect for mobile devices and change the design of the website accordingly.
37. Fritzo Keys
Fritzo Keys is a musical instrument app that has a continually playing, 32-voice background accompaniment. Developer Fritz Obermeyer created it as an experiment and feels it really pushes what HTML5 audio is currently capable of.
The site uses audio elements, canvas and web workers, and if you’re looking for examples of HTML5 that are more experimental, this is a great place to start.
Obermeyer explains that, “to keep the UI responsive the app does all of its synthesis in a background web worker and sends a data URI of a wave file back to the main window about five times per second. The main window then creates audio elements and plays these back, overlapping the sounds to accommodate timing jitter.”
Increased tempo
It also plays foreground audio on mouse click and motion, which are taken from samples generated on page load. The keyboard is rendered using canvas because of it’s better frame rate than SVG.
Ultimately, Obermeyer thinks that as the media API matures, “we’ll see more HTML5 song-as-app releases such as ‘3 Dreams of Black’ and ‘The Wilderness Downtown’.
At the same time, sites such as Soundcloud will be able to offer more interactive audio experiences such as collaborative mixing and jamming.” A perfect example of HTML5 at its best.
38. NZ International Arts Festival
Web design and development company Springload has redesigned New Zealand’s premier arts festival website using some aspects of HTML5. The focus was on putting mobile first with a specific mobile website to accompany the desktop version.
Elements such as time haven’t currently been implemented but the options remain to do so. Some of the new form attributes, such as placeholder, have also been improved to progressively enhance the site and users can plan their own festival programme by adding events to their very own shortlist.
39. HTML5 Webcam Toy
Paul Neave’s HTML5 Webcam Toy is a rewrite of a Flash webcam toy that he had written previously, and is one of many examples of HTML5 replacing content originally authored in Flash.
Neave says, “I’ve always hoped to make a non-Flash version. However, browsers haven’t been able to access the camera without the use of a plug-in. That all changed with the new getUserMedia API defined by the W3C, and I’ve been waiting for a browser to implement it. Opera Labs was the first!” (Check out the Opera Labs build and itsimplementation in WebKit.)
Camera to canvas
Neave’s app uses HTML5 to stream live video from the user’s camera into a <canvas>, which is then manipulated with JavaScript into a range of special effects that the user can snapshot.
Paul could have used 2D canvas manipulation for the effects, but instead chose to use WebGL, as it means every effect can be created with a GLSL fragment shader.
He explains, “A fragment shader is a simple piece of C-like code that runs for every pixel in an image and is extremely powerful. Some effects would have been impossible without it, but the most difficult effects are yet to come!”
40. The Beast
Folk singer Laura Marling’s latest album, A Creature I Don’t Know, has an accompanying website made by London agency Studio Juicewith illustrations by Shynola. It’s a site that self-scrolls as a poem is read out, while vivid illustrations and animations with parallax perspectives are revealed.
Dom Williams, technical director at Studio Juice tells us, “HTML5 provided new horizons and fewer restrictions, allowing us to be more free with ideas rather than constrained by browser capabilities.”
The site makes extensive use of new semantic elements and the data-* attributes used to trigger animations at specific audio cue points (such as scene changes, animation cues and so on) and also assigning control speeds and directions of the moving parallax elements.
Dynamic functions
“They were great for assigning any data we needed to an element, which we could then call to run through a function,” says Williams. “This allowed us to create dynamic functions that could control multiple elements throughout.”
Williams has an interesting story to tell about supporting older browsers: “Originally we had planned compatibility with modern browsers only. However, we decided to remove some of the elements using feature detection (such as the canvas animations) for older browsers to open it up for more fans.
“the-bea.st is supported as a parrallaxing piece on IE7 upwards. Due to the large size of the images and audio, the decision was made not to support mobile due to obvious bandwidth reasons.”
41. Cut The Rope
This is the HTML5 port of the popular iOS game Cut The Rope.
Sponsored by Microsoft to showcase IE, they’ve made sure that it works cross-browser without any nagging to use a particular browser. As that’s exactly what HTML5 is designed to do.
A cracking example of HTML5 taking a firm foothold in the world of browser-based gaming.
42. Sony Tablet S
A beautifully crafted site to showcase the Sony Tablet S, designed and built by digital agency Odopod. The site uses many new elements and native HTML5 video with a bunch of CSS3 to boot.
Developer Jason Eberle explains that Odopod’s standard approach to building a product site, “involves using some HTML5 technologies”.
Arguably from a HTML5 standpoint the videos are the most interesting aspect of the site. Eberle notes that working with HTML5 video is great! He goes on to point out that “there’s something satisfying about the simplicity of the video markup and API. Although it lacks some of the more advanced features of Flash video.”
Video for Everybody
Odopod used Kroc Camen’s Video For Everybody markup pattern combined with the VideoJS library to render styled controls and handle API calls.
Finally, Eberle enthuses: “If you’ve been avoiding adding HTML5 features to your sites because browser adoption isn’t at 100 per cent yet, don’t! These new features are here now, they’re extremely cool, and they’re designed to fail gracefully. There’s no reason not to jump on the HTML5 train.”
43. dabblet
dabblet is a fabulous little interactive playground for quickly testing snippets of HTML and CSS handcrafted by Lea Verou. You can also save your work as Github gists and then share with others.
There’s a whole host of HTML5 features in use, including: revised markup, the History API, inline SVG, data-* attributes and the contentEditable attribute.
Verou explains that she also uses “localStorage to store drafts, settings and the OAuth access_token.”
CORS blimey
She also relies up CORS (Cross-Origin Resource Sharing) to “avoid server-side code, which doesn’t scale as well. This way, even if dabblet becomes hugely popular, the strain on my server will be minor.”
Verou has plans to add further aspects of HTML5 when support arrives for APIs such as the UndoManager. To Verou though, HTML5 boils down to three things: “speed, universality and openness”.
44. Picozu Image Editor
Picozu Editor is a drawing and photo re-touching application built with JavaScript, HTML5 and CSS3. The app uses interesting aspects of HTML5, notably canvas for applying image filters and the Drag and Drop API, which allows users to add images from their desktop.
Developer Marius Stanciu-Sergiu explains that using Cross Document Messaging and Web Workers enables “Picozu to perform CPU-intensive operations such as fractal generation, blend modes or third-party interfaces”.
Offline storage
He goes on to note that offline storage is used, “for workspace import and export and also the state of the workspace (window location, various parameters) gets saved into it”.
Sergiu also has plans to make use of the Indexed Database and File APIs in the near future. Finally Sergiu believes that “HTML5 is a big part of the web as we know it today and I can only see it improving. I can only hope that more of its features will be available in the current browsers.”
45. iDesk2
Knowledge management software iDesk2 is designed to “keep your workflow as simple and intuitive as possible”. The (German language) website’s a bit like that: clean, simple and low in distractions, it’s the work of the small Gebrder Heitz agency, based in Freiburg, Germany.
Developer Hans Christian Reinl and designer Daniel Heitz say they opted to use HTML5 owing to its future-proof status. Everything on the iDesk2 page is ready to use (according to resource site caniuse.com) or provides an accurate fallback.
Ensuring functionality
For example, the instructional videos are HTML5. “We use web fonts with Typekit – the service takes care of cross-browser problems of using your own fonts on the web. Some functionality (videos) depends on JavaScript, so visitors without JS get a message with a link to a page explaining why it’s useful to use JS. We decided to display the content without JavaScript and ensure the main functionality.”
When asked what’s next, Hans points to correcting some ugly code bits. “I want to make the whole template more keyboard accessible,” he says. “We’d like to use the Fullscreen API, too. Another idea is a responsive design for the website, but this needs to be discussed with our customer.”
46. Gov.uk
Gov.uk is a new site built as a long-term replacement for direct.gov.uk and is aiming to become the single government website. Frontend developer James Weiner tells us that they wanted the site to be “forward-looking” and that they didn’t want to, “release something into the world that would be out-of-date from the off. HTML5 is where everything is going so it was the logical choice to make.” The site uses new elements, ARIA roles and the closely related Geolocation API to show people local services.
For more on Gov.uk, check out our story about its official launch.
47. Original Hover Effects
Original Hover Effects is HTML5, but its doctype is frankly unrelated to its wondrousness. That’s derived from CSS transitions and transforms. By hovering over an <img> with a <div> containing a paragraph and a link, Flash-like animated blingfests are created, using different CSS transitions on the various nested elements, which can be chained together so that one’s transition-delay is set so that it only begins when another’s transition-duration has completed.
There are 10 different effects achieved from the same HTML, proving that you don’t need Flash for complex eye-candy. Now, promise you won’t rush off and implement each of them on every single page… where are you? Come back!
48. Zizzi
The website, along with accompanying mobile site, for restaurant chain Zizzi has been built using HTML5 by digital agency Propeller Communications. The site uses a number of new elements, form input types and attributes, and makes heavy use of the closely associated Geolocation API.
The site retains some Flash content but developer Simon Shahriveri indicates that moving forward, “we aim to eliminate the need for Flash and develop alternative ways to integrate animation and interactivity,” with HTML5’s canvas seemingly the perfect fit to replace it.
‘Tope wins
The menus use David DeSandro’s Isotope as a base and Shahriveri explains how they “used HTML5 [data] attributes in order to target various ways of sorting data”.
Finally, Shahriveri notes that everyone at Propeller is, “very excited about the future of HTML5: being in the creative industry it’s exciting times and we have the chance to progress and develop a technology that’s still fairly new”.
49. Currency.io
Currency.io is an offline-capable, HTML5 currency converter app for the iPhone built using web standards. The app uses a multitude of HTML5 technologies such as localStorage, applicationCache, document.querySelectorAll navigator.onLine and JSON.parse/stringify.
To get the app to work offline, the team used applicationCache. Developer Ben Schwarz from ab+c explains: “We were able to store everything that the application needed to run, then rely on localStorage to have a copy of the currency conversion prices. All the conversion code is done client-side, which I’m sure could prove a point of contention for such a volatile concept as ‘currency’.”
For more on how it was built Schwarz has recorded a screencast. Although the app states that it’s built for iPhones, Schwarz explains that it will, “function on Android devices as well as webOS, but the experience wouldn’t be as tuned as we hoped”.
50. Royal Carribbean International
Cruise specialist Royal Caribbean International has taken the plunge (sorry) and is using HTML5 in its latest redesign. Frontend developer Paul Welsh, from digital agency Building Blocks, explains the reason for using HTML5. “We encourage our clients to use the latest technologies,” he says.
“HTML5 was a logical progression. HTML5 is at a point where there is enough support for most elements in modern browsers, but also enough fall-back options for those without.”
Cleaner code
New elements are used throughout the site along with ARIA roles and some of the new web forms input types and attributes. Welsh feels that HTML5 and its APIs are “making code cleaner, leaner and more consistent”.
“Beforehand we had so many different ways of doing things, such as form validation,” he says. “I love the idea that we’ll soon be validating forms using the browser’s native tools.”
51. Font deck
Another example of progressive enhancement and ‘stealth’ HTML5 is the use of local storage by Fontdeck, a web font solution from Clearleftand OmniTI.
“On Fontdeck, people can enter text and preview it in different fonts,” developer Josh Emerson tells us. “This string gets stored in local storage so that the text remains as they navigate the site.
Local store
“One great feature of local storage we’ve taken advantage of is the storage event. This fires whenever local storage is updated on another tab or window. Now every tab can have the same text instantly.
“We originally used another HTML5 API, called session storage, to store text that ensured the text only remained for a current session. What we didn’t want to happen was for a user to return to the site a week later, only to find their text still remains. To us it feels like a session thing.”
52. Reddit
Reddit has quietly begun using the HTML5 <time> element on all of its front-page posts.
The element enables you to give a machine-readable date and time in its datetime attribute, while having human-readable visible content such as ‘3 hours ago’, ‘Last Thursday’ or ‘The Feast of St Taneesha and the Immaculate Surfboard’. Other sites using <time>include Github, and any powered by the new WordPress default theme Twenty Eleven.
Time-based sorting, searching and interfaces are bound to get a boost now that Facebook has its timeline feature. Also, search engines Bing, Yahoo and Google have published markup patterns.
They use these to refine their search results, and <time> is one of the markup patterns used.
53. The Killers
Previous sites for American rock band The Killers have been built using Flash. Following the launch of IE9, which supports HTML5 video and canvas, digital agency Spark Art felt the time was right to redesign and develop it using HTML5 and related technologies.
Vice-president of engineering Daniel O’Shea explains that the opening panorama is “built using canvas, the tour page uses SVG to plot the band’s touring history on a world map and the video section uses HTML5 video”.
Double trouble
The team came across a few issues with mime types when using HTML5 video, but otherwise found the API easy to work with.
O’Shea does point out that, “double encoding the videos [WebM & H.264] was painful, but we borrowed a few colleagues’ computers after-hours to assist with the extra work”.
He also notes that there are now a good number of libraries and examples, making HTML5 more accessible for developers. Finally, O’Shea says: “Since the stack behind these sites is open, anyone can use their favourite debugging tools and see how things are implemented. We love it when people peek at the code behind sites like The Killers and see how we built them.”
54. Cell Cycle
Cell Cycle is a WebGL app for Nervous System, a design studio that writes computer programs based on processes and patterns found in nature, using them to enable customers to create unique and affordable art, jewellery and housewares. Visitors can customise rings and visualise them in 3D before purchasing.
The WebGL app was made by Jesse Louis-Rosenberg and Jessica Rosenkrantz using direct WebGL calls and Processing.js, without Java or Flash.
Responsive app
“WebGL is the only web technology that can directly interface with the GPU,” says Louis-Rosenberg, “so it was important for making the app responsive. It allows for a more integrated web experience and development than technologies that need a plug-in.
“It’s the fastest developing area of web technology in terms of performance and features, so it seemed appropriate to start developing with it now.”
55. 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. 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 content editable 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.”
Drag and drop
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.”
56. 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 is encouraging.
57. Mediaelement.js
Mediaelement.js is a multimedia polyfill that acts as an attractively styled video player, and much more. Creator John Dyer is a web developer for Dallas Theological Seminary. He tells us: “Most HTML5 players get around this by injecting a completely separate Flash player, but there are problems with this.
“You end up with two completely different playback UIs that have to be skinned and styled independently, and you can’t use HTML5 Media events like ended or time update to sync other elements on your page.
Mimicry
“Instead of offering an HTML5 player to modern browsers and a separate Flash player to older ones, MediaElement.js upgrades them with custom Flash and Silverlight plug-ins that mimic the HTML5 MediaElement API. Once the browsers all ‘support’ HTML5, MediaElement builds a fully skinnable player with features like support for the fullscreen video, and even Ambilight.”
Not only does it play H.264, Ogg and WebM, as well as WMV, FLV and MP3, but you can script the Flash/Silverlight shims with JavaScript as if they were real HTML5.
Dyer continues: “MediaElement.js also supports multilingual subtitles and chapter navigation throughelements using WebVTT, and there are plug-ins for WordPress, Drupal and BlogEngine.net.”
58. Nyan Cat
Nyan Cat is an 8-bit animation depicting a cat with the body of a cherry pop tart flying through space.
This marvellous piece of nonsense incorporates a toe-tapping melody, volume control and, under the hood, HTML5 goodies such as local storage and data-* attributes.
59. Union Station Neighborhood
With strong font choices, playful carousel navigation and neat tilt-shift imagery, the first impression of the Union Station Neighborhood website entices users to find out more.
The site tells the story of the new urban infill project located around the Denver, Colorado transportation hub, with interactive maps, videos and photography.
“Respect[ing] the history of the station while creating a forward-thinking experience centred on technology”, was the goal that Sean Klassen, creative director of Legwork Studio, aimed for to mirror the approach of the development project. “By combining classic editorial design principles with progressive web development, we’ve done just that,” he says.
Timeline behaviour
One of the Union Station Neighborhood site’s neatest effects is the unique timeline behaviour on the History page to scroll through the infographics and matching content.
“We used JavaScript to dynamically add classes, but the real fun happens in the CSS,” says Klassen. “This aided in usability and took away the need for superfluous elements on the interface, such as ‘back to top’ links.”
60. Unfinished business school
Unfinished Business School is an innovative course that introduces managers to core tools of business design. The bright one-page website uses JavaScript to specify background-positioning values and place images on different planes, an effect that can be seen when selecting a navigation item.
“It was really satisfying to see all the sections come together in a smooth flowing motion,” explained Ross McKegney of the Moso team. “The nature and intent of the site really lent itself to this type of treatment.”
Joint effort
Moso worked with the Cartogram studio to create this inviting experience. The team aimed to make a compatible cross-browser site while still taking advantage of Typekit integration and CSS3 properties.
McKegney explains: “Designing only for modern browsers wasn’t a luxury that we had, and making everything function properly in Internet Explorer 6 as well as iOS required compromises.”
- These examples of HTML5 were originally published in .net magazine. To explore more HTML5 visit their HTML5 content today.
Digitaljunky 
How much time did it take u to post “60 amazing examples of HTML5 | Digitaljunky”?
It has got a lot of great information and facts. Thanks ,Tommy
Nice answer back in return of this issue with solid arguments and describing everything about that.