Before we start it is imperative to point out that this redesign is still very much a work in progress and over the coming weeks and months we will be looking to progress it further with the introduction of; fluidity, responsiveness through media queries, the introduction of new features and tweaking/removing certain aspects once we have analysed how you are using it.

We hope you will agree that this redesign is a long time overdue, as this summer will see the Doctor turn two!

When we decided to create the site our mission statement was simple; create excellent content. We like to think we have achieved this by publishing high quality articles and quizzes. However, because of this the aesthetics of the site have remained the same and we felt it was time we gave the surgery a lick of paint. Now that we’ve built up a good base on content, we felt that the time was right to give the site some much needed TLC.

Redesigning a website is hard, redesigning a website which is used by tens of thousands of people is even harder and is probably the main reason why our redesign process dates back to 18th August and is only just seeing the light of day.

More than just a redesign

The project kicked off when our good friend, Oliver Ker, was approached to inject new life into our brand. What we were looking for was an instantly recognisable symbol, something which people would be able to relate to HTML5. We think Oli has done a stellar job with our new branding and it provides us with an instantly recognisable identity to build upon. If you are interested in finding out more about the creative process then head over to Olivers blog and see what he has to say.

Once we had a brand to work from we decided to start mocking up possible solutions for a direction we could take the site in. We were all in agreement as to which areas of the site needed addressing; it had to be simpler in all aspects, easier to read and utilise more of the newer technologies available.

Undoubtedly, you will have heard or experienced for yourself the issues faced when trying to design your own site and this site was certainly no different.

We considered multiple different design solutions – probably one for each Doctor – and it was only at our fifth attempt that we finally started to head in the direction which is now presented before you. The multiple design directions we went down is something I will cover on my own blog as it is out with the scope of this article.

Layout

Barring a select few pages such as the element index (previously the glossary), HTML5 Doctor is represented with a three column layout, the first column is slim and narrow which contains meta information for items related to the page/post.

The second column is the main content holder which is where all the page, post(s) and comment(s) content appear.

The final column, which for want of a better word is essentially our sidebar that contains an array of information such as element index links, related posts, categories and authors, a twitter display which pulls out hashtags and advertisment blocks.

At the top of the site we’ve completed reworked the header which should hopefully make navigating the site much easier. We’ve provided users with two different navigation bars; the top menu provides an easy way to access all our secondary content and we’ve also introduced our ‘Doctor network’ dropdown to provide access to our sister site HTML5 Gallery. Our main menu, located on the light blue bar, has been minimised to extremes, offering links to exisiting articles, the element index and our contact page. We’ve moved our search element higher up the page and plan to introduce breadcrumbs.

Page structure

Time to break down individual pages:

Homepage

With this being the most visited page on the site we wanted to try and do something a little special with it and for a long time we were devoid of any ideas until Doctor. Oli (@boblet) came up with an idea which would help offer up all the valuable information that is scattered throughout the site and pull it all together.

First up we display our most recent article, which sits front and centre to provide it with the attention it deserves. The following item is the quick reference guide which links through to each entry in the element index. There are two very special things about our quick reference guide which we are very proud about:

1. The hover states within this section have been created in canvas, by canvas supremo Rob Hawkes. Although this might not be the correct choice – many would argue SVG – we felt that this provided a fair trade-off and allowed us to use this new technology.
2. Second is that we can use this guide to promote a special subject – special subjects will have a bright orange background – which stands out from the regular hover states.

After the reference guide we display a few more posts.

HTML5 Doctor Article/Single page

This layout follows on from that of the homepage. Here we have a meta column on the left which offers up a series of quick links for categories, tags and will when applicable show links to translated versions of the article. The main column is obviously where the article and comments will appear and the third column is where all the extra information appears.

Element Index

We’ve restyled the index so it is in fitting with the new design and we’ve added in all the content and code examples that were missing from the previous iteration. We’re sorry for being lazy and not finishing it when we first launched.

A word on technologies

At the start of this article we touched on the fact that we wanted to introduce some of the newer technologies (or perhaps more wide spread) available to the site. Some of the things we have included are:

• @font-face: We’ve used Quicksand on our heading levels as this ties into our branding. Quicksand is a free font which can be downloaded here.
• CSS3: last-child, first-child, (n)th-of-type, border-radius, canvas, gradients, box-shadow.
• There are a few more easter eggs hidden under our lab coats but we’ll let you find them for yourself

Our prescription

As we’ve said above, everything is still a work in progress, we will continue to evolve the site moving forward. Essentially, we felt that now was as good a time as any to push this out into the wild and let our readers form an opinion and offer up there thoughts on the design. If we didn’t do it now, we’d be forever arguing over the semantics of the design, the leading here and the letter spacing there. So feel free to leave a comment and tell us what you think, whether it covers design/semantics/typography. We look forward to hearing from you. Enjoy.