I think few will disagree that HTML5 is the future of web development. It has introduced web designers to a palette of enhancements and new tags for a variety of cool features, that previously required proprietary plugins like Flash. The major browsers continue to add these features to new versions and many of them are already supported.
As a web designer this new trend is exciting, and it’s important to keep up with the development and the all new possibilities. Please note though that HTML5 is still in working progress, and it is not expected to be fully approved until 2014. This means that W3C is still making changes to the standard and that some visitors will not benefit from the new features.
Below, I have compiled a list of cool websites implemented using HTML5 tags. We have also posted an article about pre-designed HTML5 web design templates. One of the cool new features with HTML5 themes is responsive design. You can use this as inspiration for your own website or to be impressed of the awesomeness which HTML5 brings to the table. Have fun browsing this collection, and please add your comments and suggestions below. I also encourage you to share this post with your friends and co-workers.
[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);echo $filestr;[/exec]
BuffaloWildWings
On this website you will find a really fun HTML5 game implemented using the canvas element. Dont get started playing if you are in a hurry…. you will be late then… This is a true HTML5 showoff and proff that Flash is up for some real competition!
Dropr
Dropr have a really cool simplistic navigation design and a carefully created and unique design overall. The front page have a “infinte loading” script to get the features descriptions when visitors scroll. The explore menu opens a right sidebar where various navigation options are available. The pages are loaded without reloading the web page, using ajax .
Don’t forget to try out the “Splash” full screen feature… it is cool and a great example of interactive HTML5 design. Spend some time exploring as there are many hidden gems here!
![waytoogood[3]](http://www.tripwiremagazine.com/wp-content/uploads/2012/10/waytoogood3_thumb.jpg "waytoogood[3]")
Sony Tablet
The Sony product showcase use a really cool vertical scrolling of HTML5 sections where images, backgrounds and text fly in from the bottom. When the mouse is at the bottom of the page the cursor is followed by an interactive button. This is a cool and unique navigation idea. On the right the sections can be navigated using a traditional menu.
Leadmotion
Leadmotion have created a unique website with a stunning interactive slider. It is not just swapping slides but taking visitors on a time line journey with lots of animated elements.
Lamoulade
This is a must see website if you like alternative and to the edge use of new options. It is a parallax scrolling design and I found the variations and effect to be simply…jaw dropping. Have a look for yourself!
We New
We New is an amazing HTML5 and one page style website with loads of animated effects. The footer is really cool as a it slide into the page from the bottom. It features a moving backgournd that makes the fish silhouettes move across the screen.
Phive
Phive has some nice features to explore as a visitor. The slider has a effect that allows you to drag the sporty people into other angles or see other images. There’s also a cool drop down feature that allows you to see more or less of the images.
Dangersoffracking
This is a parallax scrolling website that takes visitors through an amazing visual journey… see it for yourself!
This website have some really cool animations and use a well implemented one page layout. It starts with a vertical loader screen and when it enters the front page visitors see a grill with nice animated smoke (images being swapped). When clicking the Find out why button or the timeline to the left the page scrolls to the next page. The last page “Explore” have all the options to explore flying in from the top.
Elladesign
There is not a lot of HTML5 and CSS animation on this page, but it the design is very illustrative and HTML markup is used on the pages.
PmBennett
One page layout for the front page with a really simple navigation. There is a fun hover effect on the logo.
Cartelle
Cartelle has a huge slider on the front page with a cool timer effect. The website also uses grid-like design for their blog which work quite nice.
WoodWork
WordWork has a stunning way of showcasing their work using a slider effect. If you click on one of the pictures the rest of the slider images will be pulled to the side just like a theater curtain – check it out! Online portfolios like this can be created fast using templates with portfolio layout. Check this collection out.
Vivas Communication
This website has a splash of colors moving in the background as you scroll down. It’s a cool effect for a creative website. Full screen background websites are great for showcasing creative work. It is not hard to get a website with this kind of effect. All you need to WordPress and a fullscreen website template.
1minus1
This website has a beautiful design with lots of well crafted illustrations. They have a nice little animation effect on the front page illustrating how their work support key customers – check it out.
Diesel
Diesel has a cool hover effect link on the front page and a convincing product “showroom” with a bigheaded zoom and nice front/back view option.
PWL Partnership
A beautiful full screen website with a dynamic slider that support the beautiful pictures.
![pwl-partnership[3]](http://www.tripwiremagazine.com/wp-content/uploads/2012/10/pwl-partnership3_thumb.jpg "pwl-partnership[3]")
Touchtech
This website has a cool way of combining slider effect and floating images with navigation.
Diehlgroup
This website has a nice one-page design with an awesome full screen slider. It has a calm minimalistic design and grey color combination making it right for a serious business website.
ExtraBold.
This website has a very dynamic front page with floating images and fonts. You just want to scroll all way to the end. The designer has used a nice color combination and with help from HTML5 he gives visitors a cool experience.
Hyper
This is a beautiful designed website with an awesome slider, floating objects and a cool portfolio. The designer make use of sections tag for the content blocks on the front page.
[exec]echo get_avatar( get_the_author_email(), ’80’ );[/exec]
Anders is Co-founder of Tripwire Magazine. He is into WordPress topics, Web design, Web-development and also interested in SEO and Online Marketing. He has started Splashmagazine.com and he’s also writing for other blogs. Anders is a passionate blues musician and a family-man, as well.
These pages are nice. You do not feel, however, that they prefer the beauty before the usability? Web seems to me not to be a work of art.
True, the web is a place primarily for business and learning. However, so are museums. And what do they ALSO have… pretty pictures.
I believe you have to be innovative to stand out online, and these certainly do that. Kudos to the designers!
PS: Hellovica.com is not actually real… but it should be.:)