3 Best HTML5 Websites and What Makes Them Awesome

best html5 websiteDespite the fact that HTML5 is a fairly new technology, its potential has already been demonstrated numerous times, so it’s no wonder that the number of HTML5 sites is rising so quickly. Whether we’re talking about new websites or older sites that were converted to HTML5, one thing is clear – HTML5 gives web designers some pretty interesting features to work with, leaving creativity to be the only limit. In case you’re not familiar with HTML5 and just how powerful it really is, this HTML5 crash course will help you get through the basics and jump right into the game.

This article will present 3 amazing HTML5 works of art that combine HTML5, JavaScript, and other technologies to create websites that are elegant in their simplicity or simply sophisticated.

#3 The Colors of Twitter – http://www.thecolorsoftwitter.com/

The Colors of Twitter occupies the 3rd place in our top. At a first glance, the site is just a simple webpage full of colored squares. Nothing special about that, right? Wrong. Hover your mouse over one of the squares, and you will notice that it actually represents a tweet somebody sent on Twitter. And if you look a bit closer, you will notice that the tweet contains the name of a color in it, which, not by coincidence, is the same color as the square that represents it. So, basically, Colors of Twitter is a website that collects tweets that mention colors and arranges them into a large graphical representation using colored squares. Oh, did I mention that it has real-time updates? That’s right, every time someone posts a tweet that contains a color, a new square will appear on the page.

The magic behind this site is represented by HTML5’s ability to work with various JavaScript and APIs. In this case, the Twitter API is paired with some JavaScript code in order to collect data from the Twitter stream and some additional HTML5 coding filters the colors and creates the graphic representations. You can learn everything you need to know in order to create a similar site from this HTML5 APIs for JavaScript online course.

#2 This Shell by The Garmits – http://www.thisshell.com/

The second place of our podium is occupied by This Shell. The site was created as an HTML5 experiment by Legwork Studio, starring a music video of the punk-rock band named The Garmits. What’s interesting about it is that the music video is created as an 18-piece puzzle that you have to assemble. What’s even more interesting is that you have to do this while the video is playing and complete the whole thing before it ends. Get it done and you will be rewarded with a free download of the track. Those of you who thought a puzzle game can’t be interesting, thing again.

Behind the scenes, this website uses a simple HTML5 video player, split into pieces by using canvas elements and a touch of JavaScript. What makes it special is that it puts together two elements that are a bit boring on their own, a video clip and a puzzle game, and combines them into something that’s not necessarily super innovative, but rather uncommon in a good way. If you want to learn to do it on your own, this online course will teach you how to build a video player in HTML5 and this online course will teach you how to create a game from scratch in HTML5.

#1 Flat Design vs. Realism – http://www.flatvsrealism.com/

A website created by a digital media agency to serve as a New Year e-card takes the first place in our top. The site cleverly tackles a debate that’s been circulating around the Internet for a while – what type of design is better, flat or realistic? As you may have noticed, a lot of big companies have recently changed their 3D logos into simpler flat versions, an action that some people found benefic, as it lead to a simpler and cleaner design, while others found it to be cartoonish . Flatvsrealism.com takes this whole battle of the designs and puts it into a comic book style, showing you what really happened with the designs. The storyline is quite interesting and, to make things even more interesting, at one point you actually get to fight for the cause you believe in by choosing the character that represents one of the sides and fighting the character that represents the opposite side. The whole concept is very creatively put together and makes you a part of the story. In the end, there is no winner or lose, just an unexpected ending that will bring a smile on your face.

On the technical side, the site is nothing but the classical scroll-till-you-bleed HTML5 website, seasoned with sound effects here and there and a funny game near the end. The other courses presented in this article already cover the stuff you need to know in order to recreate the site on your own, but as a designer, the two different styles of icons and elements might have caught your eye, so check out this online course on how to create flat design icons like the ones in iOS7.

Conclusion

If you were one of the people that considered HTML5 just a fancy revision of the classical HTML language, but not a worthy competitor for Flash or other technologies, you just had 3 websites demonstrate that you might want to think again. Yes, HTML5 cannot do all the things that Flash can yet, but it will get there. Let’s not forget that Flash has been around for quite some years now, whereas HTML5 is still a baby and, judging by the pace at which people adopt HTML5 and focus on it, chances are that HTML5 will catch up quite quickly, and most probably overtake them all.

So, if you’re a designer and you were wondering whether learning HTML5 is worth the effort or not, the answer is a loud and clear YES.