Despite 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.
#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.
#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.
#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.
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.