We hand-pick some great uses of HTML5, and talk to the designers behind them to find out how they went about it.
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. And here are some great examples of HTML5 in action, to see exactly what you can achieve with it.
The Lowdi is a small, loud, and stylish speaker that connects to your phone, tablet or other device via Bluetooth. It has a stylish website to go with it, built by Momkai, a digital creative agency based in Amsterdam. Momkai used to specialise in Flash websites but has made the natural move to HTML5 only.
Mark Hinch, senior developer at Momkai, explains that this is "so that the site would be as accessible as possible by as many people as possible on as many devices as possible".
The Lowdi site itself is simple enough: a one- pager with smooth scrolling, which Hinch describes as "a fairly straightforward user experience". Throughout the site, no HTML5-specific features were used for the end user's specific benefit.
That said, the use of HTML5 semantic tags in the site - which Finch finds "hugely beneficial from a structural point of view (both for code management and standardisation)" - gives it more potential for being future-accessible for end users.
02. Legwork Studio
Located in Denver, Legwork Studio's site makes heavy use of HTML5. As well as taking advantage of some of HTML5's more semantic elements, the website also leans on the <video> element for a lot of its content.
538 is the largest radio station in the Netherlands. Rotterdam-based agency Supersteil created its site. The agency decided to use HTML5 when building the site from scratch. One of the main challenges Supersteil faced was "developing a content-heavy website that offered a user experience that was as rich as possible on multiple platforms", explains creative partner William Duijzer.
"We successfully used the Audio and Video APIs to optimally emphasise 538's central service, radio broadcasting, on different platforms," Duijzer adds. "For us, the final product is a good example of how HTML5 can be implemented into a project to create an uninterrupted user experience."
Bilekjaeger is an advertising agency based in Stuttgart, Germany. Its clean-looking new site was built using the latest technologies, of which HTML5 was one. As well as making use of HTML5- specific elements such as <header>, <nav>, <section>, and <footer>, bilekjaeger also chose to make use of the History API.
"For providing a single-page experience while navigating through the page we Ajax-ified all the menu items," says technical director Benedikt Kastl, "but we included full history support with the History API. Browsers that don't support the History API will use hashchange for the history support."
In addition, use was made of HTML5 video through the popular MediaElement.js library. Of course the site is also responsive and bilekjaeger has developed a proprietary method of serving adaptive images.
Leicester-based agency Cite was tasked with producing a microsite for Cafédirect, which wanted something "visually engaging to promote its ethical RealiTEA report", according to Veronica Bagnole, marketing coordinator at Cite.
The document structure uses familiar HTML5 elements such as <header> and <section>; some new <input> field types such as email were also deployed. Some graphical elements use HTML5 canvas via Chart.js and, adds Bagnole, Modernizr was used "to bring the whole thing together and provide progressive enhancement where possible".
Subtask is a web application for structuring and organising projects using mind maps. Developer Michael Partheil chose HTML5 because he wanted the web app to feel native, run across multiple platforms and rule out Flash, Silverlight and so on.
But as he points out, this is easier said than done "because support for several HTML5 features isn’t that good on mobile devices". Subtask includes a host of HTML5 - including XHR2 for file uploads, localStorage and application cache for offline support, SVG, new structural elements and Server-Sent Events.
07. Arsenal FC
Arsenal.com is the home of the Premier League football team. It was recently relaunched by digital agency Rippleffect. Twenty per cent of traffic to the site now comes via mobile, so the team wanted to give those users a better experience.
"HTML5 allowed us to code cleaner and make the markup more accessible with the benefit of the new tags," developer David Churchill explains. "It also allowed us to create a more data-driven site via the use of the new data attribute types, and this helped us achieve our aim of serving the same markup to all devices."
Churchill remarks that the site also uses a number of new form input types (such as tel and email) to aid UX and the video element on non-Flash enabled devices. Data attributes proved invaluable for serving different size images to different devices, and Churchill explains that "using a placeholder element containing a data attribute for each image size allowed us to determine which image to load on the client side, optimising bandwidth for visitors."
Geolocation is required because each user’s contribution is only useful when stored against its location. Palol explains that localStorage is used to "preserve the user’s viewport of the map between visits. This is a very fast and convenient way to store client’s state data."
Is this the coolest HTML5 experiment yet? Certainly the interactive audiovisual experiment to promote the Nike+ Fuelband (see our review here) is enormous fun and strangely addictive.
The site, which you're best off viewing on a desktop computer in a modern browser like Chrome, is a audiovisual feast of colourful abstract dots, which spring to life when you start moving your mouse around.
You essentially create your own animated dance track in the process - so headphones are essential! Plus we'd recommend the Full Screen option for maximum immersion. The site was created by Los Angeles studio Fair, with Dinah Moe, David Mikula, Alaa Mendili, and David Knapeg working on the project, with music by Nosaj Thing.
For their new single Preflight Nerves, Melbourne-based electro folk band Brightly came up with a cheeky little solution based on the Twitter API. Basically the online music video serves up the lyrics of the song as highlighted portions of the latest tweets, against a background of archive stock footage. This unique approach has got the band a ton of publicity via social sites like Reddit, Facebook, and Twitter.
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".
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."
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”.
14. 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.
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."
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."
17. 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”.
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.
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."
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).
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.
21. 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!
22. 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”.
23. 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."
Museums Sheffield is a charitable trust responsible for four of the steel city’s museums and galleries. The site was developed by the team at Rckt 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."
25. 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.
90 per cent.
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."
"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.
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."
28. 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.
"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!
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.
30. 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".
'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."
32. 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 by Aaron 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".
"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.
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!
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.
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."
35. 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."
"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."
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 as WriteToThem, WhatDoTheyKnow and FixMyTransport, giving people simple, tangible benefits in civic and community areas of their lives.
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.
38. 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".
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.
39. 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."
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.
"[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.
41. 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.”
42. 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."
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.
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.
44. 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 its implementation in WebKit.)
Camera to canvas
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!"
45. The Beast
Folk singer Laura Marling's latest album, A Creature I Don't Know, has an accompanying website made by London agency Studio Juice with 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.
"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."
46. 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.
47. 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."
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."
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".
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".
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."
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.
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."
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.
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!
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.
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".
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".
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."
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."
56. Font deck
"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.
"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."
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.
58. 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".
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."
59. 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.
"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."
60. 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."
61. 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.
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.
"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."
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."
63. 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.
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.
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.
"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."
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.
66. 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.
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."
67. 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. Enter VideoGuard.
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 Bürocratik team 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 creative director Adriano Esteves.
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.
"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.
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."
Forecast is a global weather service based on Dark Sky, the iOS app that can predict that it’ll start raining in 13 minutes and stop 22 minutes later, from where you’re standing. “We’ve layered on detailed forecasts out to seven days,” explains developer Adam Grossman, “and created a ‘time machine’ that lets you explore weather data going back decades (and we use it to extrapolate months or years into the future). We’ve created a map that shows you how local and global weather patterns will change over the the upcoming week, with a beautiful, smooth animation.”
It was implemented in HTML5 for a true cross-platform experience, and Grossman says the team went to great lengths to make the mobile experience indistinguishable from a native app. “We [took] the controversial step of requiring iPhone users to save it to their homescreen ... we really want people to think of it not as a web app, but an app you install from the web.”
Grossman describes getting precipitation maps (a 500x500 canvas on the desktop version and full screen on phones) to work properly. “We learned a lot about how to structure code to take advantage of just-in-time compilation and other optimisation shenanigans the browser engages in, and this improved performance tremendously. We’re now at 60 fps on the desktop, and 40+ fps on the iPhone 5. And that’s for a full screen canvas element that rewrites every single pixel each frame!”
One of our favourite examples of HTML5 being used creatively, Syd’s Kickass Drum Machine showcases just how rapid application development can be with HTML5 and third-party APIs. Developer Syd Lawrence says: “I wanted to make a keyboard-driven drum machine. I saw a Google example that had a drum machine, but it was more complex. I stripped out the bits I didn’t need, added keyboard events
and restyled it. I added recording and uploading to SoundCloud. Oh and I also added the cat loading bar.” Time to web? About three hours.
We're always on the hunt for examples of HTML5 tools that can make designers' lives easier - and here's one we found very recently. Presentate enables users to create great-looking presentations in the browser to be shared on any device. It was designed and built by the dynamic duo of Faruk Ateş and Justin Hileman. Ateş explains that they "wanted a presentation creation and sharing experience that was a first-class citizen on the web, and HTML5 allowed us to make that".
The File API and History API are two of the many HTML5 features included alongside new semantics, full screen and new input types. Ate points out that the most noticeable issues they’ve come across so far are "with inconsistent browser support for input types and attributes, despite these features having been codified for years".
Fullscreen also provided some niggles: Ateş puts that down to the spec "not taking enough use cases into account". More interesting HTML5 features offer something intriguing to the Presentate team so, Ate remarks, "there's a lot more to come".
There are many examples of HTML5 being used by universities in increasingly creative ways. Take Drexel University, who wanted to find an interesting way to inspire and recruit potential students. BKWLD came up with Get Going Today - a site featuring a series of shareable cinemagraph-style videos. BKWLD creative director Jeff Toll says that by using HTML5 the team were able to “reach mobile devices with animation and sound - something we were unable to achieve with any other technology".
The Drexel site is built using HTML5-specific features such as <audio>, <video>, localStorage and the History API. Thanks to Backbone.js, the BKWLD team found working with the History API a breeze but, as Toll explains, working with video was more challenging. “Our developers have a strong Flash background, where working with video is far more predictable and flexible. Many hours were spent learning how different web browsers preload video, along with tricks to clear it from browser memory.”
These issues mean video has been cut from the tablet version of the site because of playback limitations. Ultimately, Toll believes that “even with inherent limitations, open source combined with HTML5 allows us to push the web forward.”
75. Flash vs HTML5
The merits of Flash vs HTML5 are open to (heated) debate. This site from Waste Creative is a study of the current industry landscape for creating rich interactive experiences. It presents two versions of the same game and allows the public to vote on which they think is better. With one in Flash and one in HTML5, let the games begin!
“As part of our R&D initiative (Playschool) we set out to test the capabilities of Flash Player 11,” says Mike Petricevic, creative partner at Waste Creative. “After sharing the game on Twitter, Adobe came to us and asked if they could use it to showcase the latest version of AIR running on iOS. We said yes.”
The project evolved and the team ported the same game to HTML5, creating a custom WebGL rendering engine that falls back to canvas for unsupported browsers. All versions of the game, on mobile or desktop, were effectively the same.
“With this in mind,” says Petricevic, “We decided to indulge in the current industry debate and put the two games head-to-head. As a result, Flash vs HTML5 was born.” It’s a terrific site for a raging debate.
76. Adam Hartwig
When building this brilliant portfolio site, as well as getting the chance to use some of the new semantic elements, designer and developer Adam Hartwig also wanted to take advantage of deep linking and the History API. "The site is essentially a single page and the advantage of the History API is being able to drop the use of hashes that used to be required to deep link so it behaves like regular URLs," he says. It's visually pleasing, with many colour changes and animations. Every page shows something different. Even browsing to the homepage, sitting and watching brings a host of animated changes.
This approach also helps to provide smoother animations on tablet and mobile devices. Hartwig makes the point that "the site was mostly an experiment to prove that web apps can hold their ground in terms of performance as opposed to just a clunky browser experience".
77. Neutral Magazine
Neutral Magazine is built by Plump Digital. “Our creative director laid down the challenge of creating a triangle-based article index, so we needed to work out how we could break out of the standard rectangle-based HTML/CSS,” says technical director James Howard.
Finally, Plump used the HTML5 History API to track users’ progress through the site: “Articles are loaded over Ajax so we made use of the History API to update the URL in the browser, allowing deep links to articles be shared or bookmarked.”
'Wonen zoals ik dat wil' (or 'living the way I want to', for those of us whose Dutch is a little rusty) is the site of Groningen-based architect Dirk-Jan Schotanus.
The site was built by Arno Hoogma, with Bart Wortel providing the concept and Wouter Nip the design. The site employs some of the new HTML5 elements and input types as well as taking advantage of HTML5's data-* attributes. "All sites I code are HTML5, so there wasn’t really any decision process there," says developer Hoogma.
Even if the site's a little incomprehensible to those who don't speak Dutch, it's hard not to be charmed by its smart design and fantastic architectural photography.
79. You Decide
At first sight, it looks like a straightforward university website. But on closer inspection, strong use of large images, together with some subtle but effective transitions and scrolling effects, raises this site above the norm.
Titled 'You Decide', the site was designed and produced by Boston and San Francisco-based Weymouth Design for Bridgewater State University in Massachusetts, to encourage new students to join the school. A stripped-down approach to information focuses attention on the key messages, and grabs attention instantly.
Weymouth art director Matt Amyot explains the agency "used HTML5 markup because it’s progressive and more expressive". Several new elements are used, along with data-* attributes to control the speed of moving elements on the site. "Getting semantics right is important," notes Amyot, "but worrying about getting them right 100 per cent can compromise on productivity. We do our best to find the right balance between the semantics and productivity."
HTML5 video is also used with the help of Projekktor, a wrapping library that does the hard work for you. Weymouth also found using HTML5 helped when prototyping. "With the semantics and relaxed nature of HTML5 (compared with XHTML), we find our design team can more easily approach rapid prototyping of concepts and frontend development, once the initial learning curve is tackled," Amyot says.
The Two Minute Test is one of several elements in a campaign to recruit teachers in Norway that offers a two-minute test of your knowledge, logic, and more.
Fred Kihle of Norwegian agency Apt, which build the site on behalf of the Ministry of Education, explains that they chose HTML5 "because we strived to design and develop a solution that also could run on tablets, smartphones and browsers without Flash". Apt also wanted to avoid compromising on the design and animation effects required to create an engaging user experience.
The website uses a number of new HTML5 elements, but the bulk of the work is carried out using the Canvas element and API to add an extra interactive layer to what would otherwise be a very vanilla test. Kihle notes that owing to the rise of HTML5, Apt has reorganised its Flash department, with “all programmers now handling both Flash and HTML/ HTML5 on different levels”.
This is an updated and extended version of an article that previously appeared on Creative Bloq