1. Technology

This Shell

By

HTML5 Design Gallery
This Shell

This Shell

Image submitted for the HTML5 Design Gallery courtesy This Shell

http://www.thisshell.com/

This is a fun example of how you can use HTML5 to create a marketing website that engages users and gets them to promote your content. It's not just a website it's a puzzle game. And if you complete the puzzle in time, you win a prize.

The puzzle uses HTML5 drag and drop, CSS3 transformations, and video to create a puzzle that is both fun and mildly challenging. With the added music in the video and the count down timer and you have a puzzle that is hard enough to feel success when you win the prize.

The site is to promote a punk rock band from Denver, CO, and so the look of the site fits that audience. I don't usually like dark sites with light text, but this site does well with the contrast and readability and there isn't enough text on the page to be severely impaired by the colors.

What I like best is how the puzzle engages the customer so that they listen to the music. As a musician it can be difficult to get new listeners because people need to spend at least a minute listening to your music to decide if they like it. This site gets the customer in playing the game and listening to the music in the background. By the time you finish the puzzle you've heard almost the entire song, and by that time you realize it's pretty good and you want to hear more.

Have you built an HTML5 site? Or do you know of one that does a great job with HTML5? Submit HTML5 site designs to be featured on this site.

©2014 About.com. All rights reserved.