1. Technology



VoiceWorld website

VoiceWorld website

Image submitted for the HTML5 Design Gallery courtesy VoiceWorld


This site was submitted to the HTML5 Designs gallery by David Ciccarelli. Thanks David! See other HTML5 designs submitted by readers.

This is a website for a conference for voice acting professionals. The design is very clean and minimalist in style. But unlike many minimalist sites it uses color well and isn't boring looking. I especially like the photos the designer used in the scrolling banner. Photos of people make any site more attractive. And even in the photos where the person is not the focus, the photos are very colorful and appealing.

I like the background image and how it fades into a grey color the lower you go down the screen. This fits with the minimalist theme. And since it's not black, the shadow around the content area displays just enough to give the whole page a more 3-d appearance. The greys on this site also keep the focus on the branding colors of blue and green.

When you view the source of this page, the first thing you notice is the huge amount of meta data stored in the HEAD of the document. The site uses the X-UA-Compatible meta tag to force IE into the most cutting edge compatibility it can use. It uses the viewport mobile meta tag to set the width and scaling on mobile devices. It sets a pingback link, an alternate link, and four external style sheets. But that's not all. There is also a bunch of Open Graph meta data to describe the page.

The source is very DIV heavy with no HTML5 sectioning elements that I could see. This was disappointing after seeing the Open Graph data. I would have also liked to see the scripts and the CSS files combined into one file each. This would help the site load more quickly. Some scripts need to be loaded in the HEAD, but there are then eight scripts that load at the bottom of the page, and each one is loaded as a separate file.

This site is a great example of a WordPress site that doesn't look like a blog. The only things I don't love on this site are the moving elements. The countdown timer is really cool and fun, but it's a bit distracting. And the slider is also really nice, but it moves really fast, which makes it distracting as well. However, this may not be an issue for most customers, as they probably scroll or click past the top part of the page relatively quickly.

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.