HTML5 Gallery » Commercial

The Test Market

Derek Johnson — Mon, 23 Aug 2010 21:00:01 +0000

A brochure site for an advertising campaign testing service.

The main body has no heading, therefore is untitled in the document outline. A section is used to wrap the main content area when div would have been more appropriate, and a series of headings is used that could be contained in an hgroup.

URL: http://www.thetestmarket.com/

Das HTML5-Buch

Derek Johnson — Sat, 21 Aug 2010 17:00:08 +0000

A website promoting a German HTML5 book by web designer and developer Peter Kröner.

The site is very well coded, for example the content of the asides on each page relates to the page content rather than the site as a whole, so they are therefore nested in the content sections. Peter could maybe have used nested sections in the asides to drop their content down a level in the outline so it isn’t at the same level as the main content.

There is also a demo section that includes video, canvas (with animation), drag and drop between two browser windows, and new form input types.

URL: http://html5-buch.de/

Helpcare

Derek Johnson — Wed, 11 Aug 2010 17:00:25 +0000

A website for a Polish distributor of ergonomic orthopedic products.

The menu element is used for the list of links on the left of the page. nav would be a better choice as menu is intended for interactive elements in applications. input type="email" is used in the contact form, but type="text" is used for the phone number. type="tel" can be used and has full fallback support across browsers. There are quite a few script tags in the head, so removing the type attribute would shave off a bit of weight.

URL: http://zdrowie-wygoda.pl/

NottyPooch

Derek Johnson — Tue, 10 Aug 2010 13:00:14 +0000

A site promoting an Etsy shop selling products made from recycled billboards.

Using hgroup in the header to group the heading and sub heading would get rid of the implicit section created by the h2. section and article are frequently used to wrap content where div should have been used.

URL: http://www.nottypooch.com/

Mac Guru

Derek Johnson — Mon, 09 Aug 2010 13:00:16 +0000

A brochure site for a Mac repair specialist.

The hgroup could have been used in the site header to contain the h1 and h2 to give the site a clearer outline. address would also work well for the contact details and postal address.

URL: http://www.helpmemacguru.com/

Wavetech

Derek Johnson — Sat, 07 Aug 2010 13:00:56 +0000

A brochure site for a company promoting datacentre products.

hgroup could have been used for the main site headings (although the h2 duplicates part of the h1 so it could be dropped). There is also an untitled section wrapping the main content area on the home page. div would be the appropriate element to use for that purpose.

URL: http://www.wavetechassociates.com/

Central Mass ChemDry

Brian Arnold — Thu, 29 Jul 2010 05:00:26 +0000

Doesn’t use the meta charset="UTF-8", and the script elements are using the type attribute. Uses header, nav, and section elements. There’s an empty div element with an ID of footer that could likely just be a footer element.

URL: http://www.cmchemdry.com/

P3

Derek Johnson — Sat, 08 May 2010 15:00:20 +0000

A brochure site to promote a co-working space for creatives in Philadelphia. Some section elements are untitled and header isn’t required if it only contains an h1. smallwould be appropriate for the footer and new form input types could be used e.g. type="email".

URL: http://pcubd.com/

Cumbria Glass Fusing

Derek Johnson — Sat, 08 May 2010 11:00:39 +0000

A business and personal showcase site that uses new HTML5 elements. The nested section elements inside the news items are only used for styling, although sections could replace some of the divs e.g. ‘leftcol’. Most of the script elements and all of the link elements have a type attribute.

URL: http://www.cumbriaglassfusing.co.uk/

Alligator Books

Derek Johnson — Fri, 07 May 2010 15:00:28 +0000

Brochure site for Alligator Books, a childrens’ book and stationery specialist. There are a lot of IE conditional comments used to create div elements around new HTML5 elements. Good use of aside for the sidebars and article for the main text.

URL: http://www.alligatorbooks.co.uk/