HTML5 Gallery » Brochure

Redline Engineering

Gerard Druiven — Sun, 15 Jan 2012 14:45:22 +0000

Redline Engineering are specialists in the servicing, restoration and sales of the classic AC car marque.

The site is built using some of the new HTML5 elements such as article, nav, figure, header and footer. There is no real need to use an article for the main content, because that creates a new section in the document outline. You can think of sections as mini-documents, so it makes more sense for this to be the main page content. Using input type="email" would also improve the forms on the site.

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

Tumaini Group

Gerard Druiven — Sat, 27 Aug 2011 14:00:22 +0000

The Tumanini Group entertainers brochure site. Besides some missing sectioning element headings the markup looks well thought out with a good grasp of how the new HTML5 elements fit together.

URL: http://tumainigroup.com

Self Titled

Gerard Druiven — Fri, 26 Aug 2011 14:00:10 +0000

Self-Titled is an art collective comprised of four good friends who met during art classes at Etobicoke School of the Arts. There are a number of section‘s that aren’t required. Each piece of work is split into it’s own article which is good. The content within the page footer could arguably be an aside.

URL: http://self-titled.ca/

Museums Sheffield

Richard Clark — Tue, 23 Aug 2011 14:17:44 +0000

Museums Sheffield is the charitable Trust responsible for four of the city’s museums and galleries: Millennium Gallery, Weston Park Museum, Graves Gallery and Bishops’ House. The markup is generally could although there are some areas where other new elements like time could have been used and some areas would benefit from improved sectioning.

URL: http://www.museums-sheffield.org.uk/

Proficient Plumbing

Gerard Druiven — Thu, 18 Aug 2011 08:00:41 +0000

Website of a Yorkshire based plumbing business.

Fairly clean HTML5 code using the header element to contain a hgroup (with a h1, h3 and h4 - not sure what happened to h2) and nav. The main page content is contained within an article which has a h1 heading. The information sidebar on the right is contained within an aside.

Remember that the type attribute is no longer required on the script element.

URL: http://www.proficient-plumbing.co.uk/

Print Discount

Gerard Druiven — Fri, 12 Aug 2011 14:30:54 +0000

While this site is validly able to lay claim to using HTML5 tags, the reality behind it’s implementation is quite different. Asides are used as functional blocks, it seems a find and replace has been done on the code to replace divs with sections! Layout of code is appalling with no hierarchy and little consideration for semantic markup or for that matter, any element of code design. Safe to say that whoever wrote this code, needs to go back and read a few books.

The

’s in root, just have an image, which is an aside, yes but there is no aside information attached.
small-> container ,section> should be a div
Within ,

should be

( I dare say), but the ,

in-there, definitely should be

and maybe

but not ,

Net Lash Project

Gerard Druiven — Fri, 12 Aug 2011 11:30:25 +0000

More a script-canvas test, than it is HTML5, although does showcase how canvas can be used as an effective replacement for something previously done in flash. Within header, could be wrapping

and
could be used around image.

’s used ok but
used as a functional, as opposed to informative manner and repeatedly so. A div here would have been better. Really just an experimental site. We look forward to seeing the finished product!

URL: http://www.netlashproject.be/

Gravity Framework

Gerard Druiven — Thu, 11 Aug 2011 11:57:44 +0000

Gravity is a SASS based front end developer framework. The intro area is the perfect place to use hgroup for the title and subhead. The ‘Killer features’, ‘Also cool’, etc areas could each be sections rather than divs. small could be used in the footer.

URL: http://gravityframework.com

UpMarquees

Gerard Druiven — Sun, 17 Jul 2011 16:07:26 +0000

Marquee Hire from Up Marquees by Kev Adamson. Lots of new elements used. The news excerpts could be wrapped in individual article elements to section the content more appropriately. Some sections could do with headings for a better outline.

URL: http://upmarquees.com

thinkBIGGER

Gerard Druiven — Sat, 16 Jul 2011 11:52:58 +0000

thinkBIGGER! A training & consultancy company for the television industry. Several new elements used throughout the site. The blog articles on the homepage could be more semantic if they used the article and time elements.

URL: http://thinkbigger.org.uk