75 amazing uses of HTML5:
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.
Not only will we bring you some the best examples of HTML5 websites around, you'll also get to hear from the designers 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. And you can find all our web design-related articles here.
01. 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.
To realise his vision for the animations on the site, Hartwig makes full use of CSS3 and the power it provides, even using 3D animations where possible. Hartwig caters for capable browsers and devices, too. He says that "the site utilises a tiered animation system to achieve the best performance on modern browsers, starting from hardware accelerated CSS3 animation to standard CSS3 animation with a JavaScript based backup for older browsers".
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".
02. 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.
SVG was the answer. “We used MooTools for animations, Ajax and DOM manipulation,” Howard adds, “combined with Modernizr for detecting browser support for SVG and touch. Where there is SVG support, the page HTML is converted into SVG elements, giving us freedom to clip and mask into triangles. Working with SVG elements meant getting back to using coreJavaScript and creating elements within the SVG namespace.”
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.”
03. Wonen zoals ik dat wil
'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.
04. 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.
05. The Two Minute Test
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”.
06. Subtask
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."
08. Moodmet
Moodmet is an experimental project to plot people’s mood around the world. Developed by Carlos Palol, it uses geolocation and localStorage.
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."
09. Field
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.
10. Brightly - Preflight Nerves
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.
Built using Yeoman on the client side, backed by Angular.js, it's animated primarily using HTML5 animation, with someJavaScript helpers where required. The stock footage was primarily taken from Archive.org - "I've used that for a bunch of our videos previously, as the footage is out of copyright and generally wild," explains group member Charlie Gleason.
11. 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".
12. 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."
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."
13. 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”.
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.
15. 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."
16. 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."
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 agencyUltranoir 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”.
18. Bjork.com
When Icelandic pop icon Björk needed a new website, Jam3built 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."
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.
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."
19. Andy Wilson Financial Services
Andy Wilson Financial Services' website is made by Laser Redand 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).
20. 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.
No comments:
Post a Comment