Can anyone list some real examples of 'HTML5' being used in the wild?

Question

I am using HTML5 in the same way everyone seems to be using it these days, meaning: HTML5 tags, Canvas / 3D / javascript and CSS3.

I am struggling to find examples of sites that are using these technologies practically and that are not just a demo of something cool someone has managed to do using Canvas or CSS3 transforms or shapes.

I am looking for sites that have a nice visual look but also take advantage of things like animation, scrolling and offset à la Silverback or the Canvas to create an interactive and I guess 'Flash-looking' site.

These are some examples that I have found:

Scrolling

• http://nikebetterworld.com/
• http://benthebodyguard.com/

Animation

• http://www.elladesign.com/contact.html

Other

• http://www.pirateslovedaisies.com/

I am using HTML5 loosely and I hate to be using it. I would be happy if you listed a really visually appealing Javascript-based site but it didn't have the HTML5 doctype.

Answer 1

I find these 2 sites to be good & practical examples of HTML5 usage -

• “20 Things I Learned about Browsers and the Web” is an online illustrated guide from Google aimed at casual users. There are plans to open-source the code.
• Stephen Walther's JavaScript Reference built with HTML5 & jQuery. The source code & explanation on how it was built is available from the author's blog.

Answer 2

The Stack Exchange network (of which this site is a member of) uses HTML5 for its authentication. That's why you can visit any site in the network and once you've logged in manually at least once, it will automagically log you in later.

Try it out - if you have membership on more than one site (say, here and Stack Overflow), clear all your cookies and temporary files. Then log in here, and then go to Stack Overflow and don't log in. Give it a few seconds and it will automatically log you in, even though the domains are totally different.

Answer 3

Yeah, in fact, I did it a long time ago... 2-3 years ago, I'd guess. I made a web site that basically allows people to move stuff around on a floor plan to see if their furniture fits. It was done with JavaScript, but the problem was that JavaScript didn't have a very good way to rotate the furniture.

Back when IE didn't support the canvas tag, this meant using a different image for 0,5,10...85 -degree turns, and then I'd rotate those images by 0, 90, 180, or 270 degrees in order to cover rotations from 90 to 355 degrees. Not only was it annoying to create, but it was quite slow in its execution. FF, which supported the canvas tag, could rotate the furniture pretty much in real-time, but IE's rotation of it was pretty terrible. IE took somewhere between 0.75 and 1.00 seconds to respond, and doing it at 5-degree increments was terribly annoying.

Answer 4

Here's a nifty flash-like website made by Chris Coyier of CSS-Tricks.com: http://chris-mcgarry.com

Chris mainly is using JQuery here, with the aim being that a visitor can play the music tracks and navigate to any page without the music stopping.

Chris is a strong advocate of using Html5 now. This example does not really use that many Html5 elements, but it really captures the spirit of a flash-free future.

Answer 5

Our site (We, the Pixels) is founded upon using the HTML5's canvas. We use it in a way that Flash would normally be used, and in fact had to use Flash for IE, because excanvas just wasn't cutting it for what we needed.

The site isn't all canvas, but it's main application component is.

Answer 6

Scribd is using HTML5

Answer 7

I'm not sure why you would ask for examples of HTML5-based pages without the simple HTML5 doctype--I'd want the unequivocal switch for that mode. Anyway, this site makes rather extensive use of the single-page principle with contextually-applied graphics using HTML5 and CSS3 techniques: https://www.airbnb.com/annual/