HTML5 Examples for Web Designers

For Web Designers, HTML5 is one of the upcoming major developments in front-end Web Design.

We’ve wrote several times over the year about the HTML5 Draft Specification from the W3C (Wide Web Consortium), providing our thoughts on the new markup, in addition to covering the Discontinued/Introduced HTML5 Elements (followed up by our in-depth HTML5 Video).

Across the web are several inspiring examples and resources showcasing how web designers have begun to experiment with the new website design tools and elements that are available within the HTML5 specification.

To view and interact with the below examples, please ensure you are using either Firefox 3.5 or Google Chrome as your web browser.

HTML5 VIDEO – DAILY MOTION OPEN VIDEO

http://www.dailymotion.com/openvideodemo

Using the <video> element, one of HTML5′s many interesting features is the ability to embed videos within a web design without the need for additional plugins such as Adobe Flash.
DailyMotion has put together a very creative video showcase demonstrating what is possible with this new tool when combined with Javascript, Animated PNG’s and CSS3.

HTML5 CANVAS AND AUDIO EXPERIMENT

http://9elements.com/io/projects/html5/canvas/

HTML5 will also enable web designers to render and code graphics within a browser window using the <canvas> element. In addition, using the <audio> element, developers can provide audio content without the need for extra plugins. This is a fantastic example of the two elements in action, combined with Twitter posts on HTML5 conversations & thoughts.

HTML5 GAME – TORUS

http://www.benjoffe.com/code/games/torus/

Torus is an online game created entirely using HTML5 elemts, in particular the <canvas> element which I referenced to in the last example. It’s an eye-catching and stunning example of the many possibilities within the HTML5 markup.

HTML5 GALLERY SHOWCASE

http://www.html5gallery.com/

Across this website is a portfolio of web designers who have built websites that integrate the HTML5 elements. All of them provide a great insight into hopefully what will be the future of web standards compliant website design.

For even more great web design resources, check out my blog post on CSS Resources for Web Designers and watch our  latest web design video blog on How to use the ‘Save for Web’ feature in Adobe Photoshop.

That’s all for now!