Award Winning HTML5 Websites

17 Award Winning HTML5 Websites for Inspiration

Written by Kenny on February 7, 2012 HTML5
This post gathered a list of very inspirational award winning HTML5 websites from several web awards organizations like FWA, Awwwards, etc.

17 Award Winning HTML5 Websites for Inspiration

Award Winning HTML5 Websites

HTML5 is the most famous markup language in web development nowadays with tons of new features and elements. Web developers and designers are utilizing these new HTML5 features into their website to inspire something new to users. Some of HTML5 websites even win an award due to their creativity. In this post, I have gather a list showing some very inspirational award winning HTML5 websites from several web awards organizations like the FWA, Awwwards, CSS Design Awards, etc. So, which one is your award winning HTML5 website?

Otherwise, you might check out the showcase for advanced HTM5 games.

 

3 Dreams of Black

FWA Website Awards – Peoples Choice Award 2011

3 Dreams of Black

3 Dreams of Black

3 Dreams of Black takes you on a journey through the world of lucid dreaming to promote Danger Mouse and composer Daniele Luppi’s album Rome. This site creates 3D interactive animations with using WebGL, HTML5 and JavaScript. In other words, the site wishes you could ‘experience’ the song and not simply listened to it. Have fun!

 

The Wilderness Downtown

FWA Website Awards – Site of the Year 2010

The Wilderness Downtown

The Wilderness Downtown

The Wilderness Downtown is an interactive short film for Arcade Fire’s “We Used to Wait” track. When you visit the site, you are asked to enter the address of the home where you grew up and then the site will generate a personalized music video that takes you on a journey back to your home. The site is created by using HTML5 and integrated Google Maps location base on the address you enter. Awesome!

 

360° Langstrasse Zürich

Awwwards Website Awards – Site of the Year 2011

360° Langstrasse Zürich

360° Langstrasse Zürich

360° Langstrasse Zürich is a web documentary about one of the most vibrant street of Zurich in Switzerland. Scroll yourself through the street and explore the shops and houses there with 360 indoor panoramas. You could even hear nearby tweets alongside the street. Impressive!

 

CNN’s Ecosphere

FWA Website Awards – Site of the Month January 2012

CNN's Ecosphere

CNN's Ecosphere

The Ecosphere is a real-time WebGL Twitter visualization tool launched by CNN to mark the COP17 climate change conference in Durban. The site monitors every new tweet tagged with the hashtag #COP17 and feed it into a tree representing that specific topic or discussion, and causing it to grow a little more.  The entire site is built in WebGL and HTML5 by Minivegas in partnership with Stinkdigital.

 

The Honda Experiment

FWA Website Awards – Site of the Month November 2011

The Honda Experiment

The Honda Experiment

The Honda Experiment is a physics-based game that challenges players to create a chain reaction by placing a set of objects (pop-up windows) in the correct sequence. Each object will interacts with those around it and you have to place these objects correctly to achieve the goal stated in the earlier in the game. There are six levels available in the game, and when these are completed, you get the chance to create your own chains. Enjoy!

 

Adobe – The Expressive Web

Pixel Awards – 2011 Experimental Winner

Adobe – The Expressive Web

Adobe – The Expressive Web

The Expressive Web is a resource and showcase site that highlights some of the most creative and expressive features being added to the web today by HTML5 and CSS3. The site makes extensive use of HTML5 and CSS3 features such as CSS3 transitions, CSS3 transforms, HTML5 canvas, web storage and etc to provide a visually compelling resource for learning more about HTML5 and CSS3.

 

Slavery Footprint

Awwwards Website Awards – Users’ Choice Site of the Year 2011

Slavery Footprint

Slavery Footprint

The Slavery Footprint is a website which designed to raise the awareness of consumers about supply chain laboring on their behalf. You’re asked to fill out an attractive survey about location, family size and lifestyle habits, and then the site will show you how many of your items were likely made with forced labor. Let’s do the survey and see how many salves are working for you!

 

ultranoir

Awwwards Website Awards – Agency of the Year 2011

ultranoir

ultranoir

New version of ultranoir.com using HTML5 & CSS3 technologies.

 

Kinetic V5

Awwwards Website Awards – Site of the Month December 2011

Kinetic V5

Kinetic V5

Kinetic V5 is an official website for Kinetic (Singapore’s creative advertising firm), with a strong fanzines style. Kinetic staffs share their own topics of interest and cultural phenomenon in this website but with the knowledge of non-professional and non-statement.

 

The Google Puzzle

FWA Website Awards – Site of the Day November 01 2011

The Google Puzzle

The Google Puzzle

The Google Puzzle is an interactive online puzzle developed by Japan’s famous quiz developer SCRAP. Users are challenged to solve various puzzles designed around Google products. The site is makes use of HTML5 cross-window feature. You have to know the basic knowledge and tricks of Google product in order to solve the entire puzzle. Good luck!

 

Soul Reaper – HTML5 Scroll Book

FWA Website Awards – Site of the Day January 30 2012

Soul Reaper - HTML5 Scroll Book

Soul Reaper - HTML5 Scroll Book

As stated in the title, Soul Reaper – HTML5 Scroll Book is the first HTML5 scroll-activated digital comic book web application developed by Saizen Media. While you scroll the digital comic book, you’ll see the characters and objects will move accordingly to your scroll position, and it is no longer a static images comic book.

 

Google Music Tour

FWA Website Awards – Site of the day February 01 2012

Google Music Tour

Google Music Tour

This is not a usual ‘About’ page as you seen before. The Google Music Tour page demos the product features using attractive animations created by HTML5 Canvas. You could easily navigate through the page and the line will guide you to selected topic. As you learn, you build a track that’s yours to keep.

 

Treme

Awwwards Website Awards – Site of the Month September 2010

Treme

Treme

This is a promotion website of HBO series Treme for France. The site makes extensive use of HTML5 video tag and audio tag to create the animated and sound effect. You could actually drag the site to left and right!

 

Paramount Farms

Pixel Awards – 2011 Green Winner

Paramount Farms

Paramount Farms

The official website of Paramount Farms, the world’s largest vertically integrated supplier of pistachios and almonds. The site has nice graphics and effects built with HTML5, CSS3 and JavaScript.

 

Toyota Prius Projects

FWA Website Awards – Site of the Day March 04 2011

Toyota Prius Projects

Toyota Prius Projects

The Toyota Prius Projects is a home to a series of Prius projects created online and in the real world. It highlights the changes in the world made over the past and allows users to envision what are the upcoming projects. The site was built using HTML5 and WordPress, it’s mobile and tablet friendly, and encourages participation around each unique event.

 

Ben the Bodyguard

FWA Website Awards – Site of the Day January 03 2011

Ben the Bodyguard

Ben the Bodyguard

The Ben the Bodyguard website is a promotion website for Nerd Communication iPhone Security App that protect your mobile data such as passwords, notes, PINS, and log-ins. The website was built with HTML5 and you could move Ben by scrolling down your page.

 

Youtube – One Hour Per Second

FWA Website Awards – Public Shortlist

YouTube - One Hour Per Second

YouTube - One Hour Per Second

Holy Nyans! Every second, one hour of video is uploaded to Youtube. The site has shown an interactive collection of what happens in Youtube in a second.


» This Might Interest You «

User Feedbacks (11) Share Your!

  • Sure you can share it! Thanks.

    2 years ago! Reply
  • Hі! Would you mind if Ι share уouг
    blog with my facеbook group? There’s a lot of people that I think would really enjoy your content. Please let me know. Cheers

    2 years ago! Reply
    • Sure you can share it! Thanks.

      2 years ago! Reply
  • Sky

    Thanks for this…

    2 years ago! Reply
  • wrendl

    The one thing that all these sites seem to have in common is that they don’t work, and all of them ask me to upgrade my browser…! Cheers for the advice on that…

    Maybe I’m missing something but perhaps some help with the coding should be provided to these developers before the awards are dusted off.

    3 years ago! Reply
    • Yes! Since these websites are using latest web technologies: HTML5 and CSS3, unfortunately these technologies are not supported by old Internet browsers. You have to use modern browsers in order to browse these websites well.
      Perhaps there are something can solve the browser compatibility issues…

      3 years ago! Reply
      • wrendl

        Yes indeedy, there is something that can solve the browser compatibility issues… it’s called Flash! =)

        2 years ago! Reply
    • Robena

      Yes, it seems what the creators of these websites are missing is the point that when you adopt technologies and techniques that do not have widespread browser support, your site should degrade gracefully and the essential message is not lost.

      Unless of course they just don’t care about that portion of the population using lesser browsers or other assistive technologies.

      2 years ago! Reply
      • Robena

        EDIT… above comment may read a little more harshly than I was intending. By “don’t care” I’m essentially saying that they appear to have made a conscious decision to target their message to a specific set of visitors instead of the broader internet community as a whole. (at least I hope it’s conscious, otherwise it’s just obtuseness)

        2 years ago! Reply
      • Yes, I’m agree with you Robena! There is not compulsory to adopt latest technologies into our site. It is just depends on your target audience and whether there is a need to have it. Of course, if your site users are mostly using old browsers, you are not advised to use it, else, why not ENJOY the new features? =)

        2 years ago! Reply

Leave a Feedback

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>