11 Innovative HTML5 Websites

Demos or Experimental

1. Photo Manipulation

Remember when Microsoft was showing off their "Surface" tables? Sure, not too many of your friends rushed out to replace their coffee tables, but it was still innovative. One of the coolest features was the ability to pull and drag a photo to manipulate it however you wanted. In the past, if you wanted to accomplish something similar on the web, you needed to use Flash or some pretty creative Javascript. With the HTML5 canvas feature, it is low impact and silky smooth, as this site demonstrates.

2. Cloth Experiment

Out of all the demos, this one warrants the most hours of meaningless play time. It is just a cloth, and a very plain one at that. Still, it's not something you could do with your mother's HTML. Click it with your mouse, and it wiggles as though it were hanging from a clothesline. Hold a key while pulling up an end, and you can pin it in a different location. Imagine an interior design website that would let you hang curtains in a virtual representation of your house before purchasing.

3. JS-Fireworks

Another fun toy to take away the boring tedious clock watching of your workday is js-fireworks. As the name implies, it is a javascript app that makes use of the HTML5 canvas tag. Essentially, it is a picture of the London night sky with fireworks shooting up and writing out the message of your choice. After you create your message, you can then conveniently send the shortened URL to your fiance for a very cheap fireworks proposal.

4. Canvaspaint

Remember Paint for Windows? Who didn't love that program? Now Paint has been recreated on the web in all its glory with HTML5. The app works just like you would expect it to, giving you a palette of colors and all of the familiar basic tools, without the need for a CPU-sucking Flash plugin.

5. Font Dragr

While it calls itself experimental, this is actually a very useful tool for designers and publishers. It works quite simply. Grab a font file from your fonts folder and drag it onto the spot on the page that says "Drag your fonts here". The text to the right will instantly morph into the font you selected. It really is that simple. It also keeps track of each font you drag so you can quickly click back and forth to see which one you actually want.

Working Sites

6. Center for Public Integrity "Looting the Seas" book

The Center for Public Integrity means business, and their book is not something you will read to your kids at bedtime. Nevertheless, just flipping through the pages of the interactive ebook is fun all by itself. Using HTML5 technology developed by Treesaver, this book automatically resizes the text to fit whatever screen you are using, and you can turn pages with your mouse, finger (on a tablet), or keyboard. It is the most natural web-based ebook I have seen.

7. Grooveshrark (only partial)

Grooveshark is one of the coolest of the online music players out there (and there are a lot) because you can pick whatever song from any artist you want. It has a radio function like some of the other popular music web apps, but Grooveshark is primarily about giving you the power to choose what you want and create playlists at will. Until now, it has relied exclusively on a Flash application. Now, it has been redesigned with an HTML5 interface. Unfortunately, it still uses Flash to play the songs, but it is a step in the right direction.

8. VideoJS

While the site itself is very nicely done, the innovative element of VideoJS is the HTML5 video player they have created. It is fast, customizable, easy to use, and completely free and open source. It supports fullscreen playing and comes with a number of interfaces, including several that mimic popular video sites such as YouTube, Hulu, and Vimeo.

9. Wantist

If you ever went blank when it came time to buy that special someone a gift, Wantist is for you. I'm sure some people will use it just to shop for themselves, but it is designed using HTML5 to make it easy to pick something of a certain category for someone of a certain persuasion (I'm not making this up. Look at the site). It has cute little popup images that show you prices, and clicking on one shows you multiple images, a description, and several stores selling the item.

10. Onion Google TV and Chrome WebStore

Onion News Network not only brings us the latest satirical news. It now uses the latest technology to deliver it. As the URL indicates, this app is designed for Google TV and is also available in Chrome's WebStore, but you can go directly to the URL from within Chrome as well.

11. AviaryHTML5 Editor

Need to crop, rotate, flip, resize, or knock out some red eye, but don't have access to a desktop photo editor? Aviary has an HTML5 photo editor for those quick touch-ups. You can upload the image for your computer or pull it directly off the web. You can even add text to your creation. When you are finished, it has a nice jpg save tool.

Guest post by: Tavis J. Hampton is a librarian and writer with a decade of experience in information technology, web hosting, and Linux system administration. His freelance services include writing, editing, tech training, and information architecture. He loves gadgets and gets his tech advice from the web server hosting geniuses at 34SP.com.

• Get Ready for HTML5 – the Wave of the Future
• Useful CSS3 Generators: Follow the Easy Path to Web Design
• Better Loading Times with CSS Sprites
• 4 Ways HTML5 Is Better For SEO
• Media Queries: An Evolution in Web Design
• Ultimate Web Design Errors
• jQuery: The JavaScript Developer’s Best Friend
• 5 Very Cool CSS3 Tricks
• 5 Top Web Design Trends for 2012