1. Technology

Modern Ink Magazine


HTML5 Design Gallery
Modern Ink Magazine

Modern Ink Magazine

Screen shot by J Kyrnin courtesy Modern Ink Magazine


This is a very pictorial design that looks really nice. Some of the things I like about it include:

  • There is an iPad version of the current issue, because the main version is in Flash
  • Good use of opacity in the blog headlines and photos
  • Even the ads seem to fit the style of the page

But I can't recommend the HTML. While it is written in HTML5 and it does use sectioning elements and other HTML5 features, there are some really strange things going on in the HTML as well. For instance:

  • There are LI elements sitting inside DIV elements without any OL or UL to surround them. The designers then removed all the list-item properties in the CSS, so it begs the question why they think they need the LI elements at all.
  • There are eleven linked style sheets. This is a lot, and that many could be slowing down the load of the page.
  • In a related issue, there are eight scripts loaded in the HEAD. When a script is loaded, the browser must stop loading everything else until that script is loaded. With eight at the top of the document, this is definitely impacting the speed of the page.
  • There are several untitled sections in the outline of this document and some sections that appear to have the same headline. This could be confusing to readers.

Overall, I like how this page looks, but I might consider cleaning up the HTML to help it load more quickly. It's a nice design for a very pictorial focus, and it's nice how everything seems to fit.

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.