Those of you who follow me regularly will know that last year I designed a new Metro-themed skin for my own website, The Long Climb and that if I’m honest it’s not worked very well.  The reason being that what I ended up with was a half way house between a new Metro website and a traditional style blog.  Clearly I was going to have to think again and do some major overhauling of the interface to get it right.

This got me thinking in some depth about what would make a really good Metro website and why that would be.  It’s not just a case of putting together some blocks with stuff on them along with a few circular icons and hoping for the best.  When designing a new website there are all manner of things to consider such as the visual order of the items you see on the page and how the reader is drawn around the page, how items will fit together (which is especially important on a Metro site when symmetry is vital but elements are all different sizes) and how you might accommodate external items such as advertising.

Then you need to consider how to accommodate different types of device.  These include smartphones, tablets of varying makes and sizes and full PCs where, with people running Windows 8 they could be using the Metro version of Internet Explorer, full screen on a 1920 pixel wide monitor.  These all have to be accommodated for so an adaptable design is required that will automatically rescale the elements on a page to fit the width of the browser window.

Then you have to consider that different web browsers on different devices operate in a variety of ways with some supporting plug-ins and some not, such as iOS and the Metro version of IE10 in Windows 8 not supporting Flash (or any plug-ins at all come to that).  It was clear then that the website would have to be true HTML5 in order to have any kind of longevity.

On a device such as Windows Phone or a Windows 8 tablet or computer the design also needs to feel natural and a comfortable fit for the user interface.  When Microsoft designed the Metro UI concept it wasn’t just about slapping some blocks together, it was about using symbols and iconography that we’re used to in our daily lives that allow the content to shine while making the interface itself fade into the background.

Suffice to say that when I really got into this I realised just what a major project I had taken on, especially when I began to think of all things I would want to do with the site in the years to come.  I needed a proper and full design brief then and so began to write such a document to help me get my ideas together, and that a designer and coder could use as a bible when actually building the site.  I thought I’d share this document with you, firstly as it ended up being a 52 page behemoth on how you can design and build a Metro website, but also because I thought you might find some of the content interesting or even useful if you are planning to design and build your own Metro website.

You can view and download the book on this HERE, sadly the embedding here didn’t want to work.  This new website will go live for me sometime this year.