1. Technology

Crane Brothers


HTML5 Design Gallery
Crane Brothers Website

Crane Brothers Website

Screen shot by J Kyrnin courtesy Crane Brothers


Just glancing at the screen shot for this site is a bit misleading. While the design is nice, and clearly well thought-out, it really doesn’t do justice to the site when you interact with it. The home page has the standard roll-over effects so that you know you can interact with various bits. But don’t stop there. Click on something.

When you click on section 1 “Suits” you get a gorgeous fade to the new page. The navigation stays the same, but you get a new image, more information, and even a new background color, and it all fades in like it was meant to be there all along.

The images on this site are huge, and they need to be to showcase the products effectively. But even the loading of those images works well with a placeholder image that loads quickly that is replaced by the larger image when it’s complete. The diagonal line that takes the place of the image looks like it was supposed to be there, and then when the real image fades in it’s almost a surprise.

But once you’ve looked at the suits, shirts, collection, and shops, be sure to check out the “Dispatch.” This is a simple three column design, almost a blog (it has an RSS feed, so it could be considered that), but what’s especially nice about this page is how it loads. On my monitor, there is enough room for two rows of images, six in total, and as I scroll down to the bottom, a “loading” icon appears and then more posts show up. This is an excellent example of a continuous scroll. As you get to the bottom, more appears, and more and more. I imagine that there is an end eventually, but it’s easy to keep reading as the pictures and posts draw you further down the site.

But What About the HTML?

This site is done in HTML5 and it’s very well written HTML. It uses HTML5 sectioning elements to define the various semantic areas of the pages. It also uses elements like HGROUP correctly. And you can see a great example of how to use links around blocks to great effect. (You could do this before, but it wasn’t valid until HTML5.)

I think the only disappointment I have with this site is that it doesn’t have a responsive design to help people on mobile devices get the most out of the pages. When I tested it on my iPad, the scrolling had some strange artifacts (covering over the navigation content, and then having it disappear abruptly). But this is minor because the site is still functional and good looking on an iPad.

All in all, I find this site very inspiring. The design is crisp and understated and the interactivity is wonderful.

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.