1. Technology

Munch 5-a-Day


Munch 5-a-Day
Munch 5-a-Day Website

Munch 5-a-Day Website

Image submitted for the HTML5 Design Gallery courtesy Munch 5-a-Day Website


This is the website to promote an iOS app that helps you be healthy and eat five or more fruits and vegetables. This is not a review of the app itself (which, frankly would get marked down because it’s only available for the iPhone—not the iPad). I am looking just at the HTML5 website they are using to promote it.

This site uses HTML5 sectioning elements well. And I must say it’s the first time I’ve seen a definition list in a long time—used very well, too. There are a few extra tags, like an article inside a section inside an ID’d section, which leads me to suspect they are using the SECTION element incorrectly for stylistic purposes only. I do like the use of separate ARTICLE elements for each testimonial. These can stand on their own (at least one hopes they can) and might be syndicated to promote the app, so it’s a good choice.

The HTML starts to fall apart towards the bottom, where they use a table to format the “Designed by” section. This is particularly confusing as that section is really just a couple paragraphs, that could have easily been formatted with CSS. The only reason for the table I can see is if this section is something that is placed on many sites and they want to make sure there is consistency across the sites. But even then it would have been less code to use CSS.

The entire bottom then loses all the HTML5 sectioning, moving to a massive amount of DIV elements where P elements would have been more appropriate. This is yet another indicator to me that this portion of the site was written by someone else, and then copied to their various sites. There is nothing wrong with doing that, but for purists, it does ruin the clean lines of the HTML5 at the top.

The design is a fairly tyipcal style you see these days. There’s a rotating banner at the top, with prompts to “get the app” and so on. The rest of the page is a three-column page with a fat footer at the bottom. The only question I want to ask the designers is this: what’s with the clouds? Clouds with a light blue background seem to be a very HTML5-ish design choice, and honestly I’m getting bored of it. But otherwise, this is a nice clean design that does what it’s supposed to—encourage me to get the app.

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.