Injecting new life into the Doctor

by .

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.

21 Responses on the article “Injecting new life into the Doctor”

Frits says

Interesting, doesn’t validate.

Kevin Sweeney says

Interesting indeed, but this site will be around for a while—they have time to fix it :)

Guys, the new design is looking really sharp! Not sure how I feel about the header+image+button combo for the Element Index and Ask the Doctor sections or the actual utility that the Twitter feed serves, but this is definitely going in a good direction.

Przemek says

Not in my taste, but it’s OK. The old version was nicer and more readable.

This blue colour is too bright and takes away attention from the main text. Also I would make body text darker. In general it’s hard to read articles now, you’ve got some strange “too bright” visual effect, in my opinion.

“Submit Comment” form doesn’t work in Opera.

Bertil Wennergren says

Looks nice to me, but a site called “HTML5 Doctor” really has to use perfectly valid HTML5 all the time.

Natalia Ventre says

In my experience, once you have the “regular” website done, it’s very difficult to start using media queries, dealing with backgrounds is specially annoying, I find it much more easy to begin with the smaller layout and then add the branding and aesthetics.

The home page and the element index are much more useful now and the code snippets are great, there are many nice details. The font choice (color, size) theoretical is excellent, but in context as Przemek pointed out, it looks too light.

Dominik Porada says

I really like the redesign, but—in my opinion—html { -webkit-font-smoothing: antialiased; } in your main stylesheet does more harm than good (also tweeted this). It’s really a plague on the web.

You replied claiming that it looks good, but it’s illegible, at least in Safari/Mac, because it’s not the native reading experience on this platform. If it weren’t for Safari’s Reeder, I couldn’t be able to read it at all.

Please use -webkit-font-smoothing: subpixel-antialiased for main body text instead.

(I’m not the only one who thinks using antialiased text (instead of subpixel-antialiased) on a bright background is wrong.)

Paul D says

I’m not a big fan of this redesign. It looks like one of those cookie-cutter templates that you find on low quality, ad-riddled content farms. I think you might be doing your excellent content a disservice with such a generic design.

Having said all that I don’t really care. Since I started using HTML5 in anger this site has gone from being an interesting read to an invaluable resource. It’s my first stop for HTML5 help and I don’t see that changing any time soon. So keep up the great work guys and good luck with the ongoing redesign. Cheers…

Paul D says

Oh – I quite like the new logo though. Especially the grey/black version that appears in the footer.

Christopher Jeffrey says

Most people probably don’t come here to discuss design, but I think it’s fair to say, overall this is, at the very least, comparable to the old one. I think the markup should always be the first concern though – particularly for this site.

John Faulds says

Wow, can’t believe so many people comparing this new design as worse or only comparable to the old one. I think it’s streets ahead and I personally don’t find any problem with the font, its anti-aliasing (‘illegible’, surely a gross exaggeration?) or the colours.

I think it’s a really solid piece of work and my only slight criticism would be that I think the margins on h3s in the body are wrong (should be more space above and less below).

John Faulds says

Having said that, did just have a bit of trouble getting the comment form button to submit in Chrome on a Mac.

kas187 says

Good start but I think performance of the site can be much further improved. Minify and concatenate your css, js files. Sprite up and compress your images. As a test I compressed the logo.png from 11.71kb to 8kb.

Alexander Savelev says

Intarface become more convenient. It is easier to find new information on site.
Looks great!
Thanks!

jibjab says

Easy access to the information I need. Convenient navigation.
-> I like it!
Thank you!

grumpydiv says

Ignore the commenters ranting about validation: they don’t get it.

I agree with @Dominik Porada about the font though, it is a bit annoying. Plain old Times New Roman looks good in Safari.

Bertil Wennergren says

grumpydiv:

Ignore the commenters ranting about validation: they don’t get it.

Well there are validation errors, and then there are validation errors. Sometimes, if you know what you’re doing, it can be totally OK to code something that won’t validate, because you know why it’s needed, and you know that it won’t do any harm.

But the errors we’re seeing here is not of that kind. They are just sloppy and completely unnecessary mistakes, and some of them could actually cause real problems, e.g. duplicated id attributes and end tags that are misplaced (for no reason).

If this was just any random web site, I wouldn’t mind. But this is HTML5 Doctor, where we come to learn how to use HTML5 in the best way. Quite a few visitors will actually look at the source code to learn from it.

Anthony James Bruno says

I think I speak for all of us when I say its been a pleasure learning about HTML5 and discovering this new language together. Its great having a resource like this that is thriving and growing and for that, we thank you.

Oli Studholme says

@Bertil & other validistas — we had a hard deadline on this, so some mistakes have crept through. However as the man said “this redesign is still very much a work in progress”. This means errors will be fixed stat. Please hold fire until then, or at least only cast the first stone only if you’ve never experienced a validation error [crickets] ;)

@all — thank you for your feedback, even the “I don’t like it” kind :D We’ll be tidying things up over the next few weeks, and appreciate you pointing out anything we missed or you feel egregiously offended by

Shelley says

I find the hgroup validation errors to be humorous in a dogfood eating kind of way, considering the past discussions about hgroup.

Interesting play on the HTML5 shield logo. I’m not overfond of blue, but looks clean, and uncluttered.

Oli Studholme says

@Shelley – yeah, that was kinda … :O Fixed now though! I don’t have access/know where the comments HTML is hidden, which is the majority of the rest of the non-spurious errors are.

Also, the HTML5Doctor logo comes from angle brackets not the W3C’s shield logo.

George Katsanos says

The new design looks G-R-E-A-T. Light, readable, design not at all obstructive, or distracting from the content (which is King in this website).
One small remark, I’m browsing with a small 14″, and currently in the HOME, the “Featured” news item takes away almost 1 screen (I guess because of the 4 comments on the sidebar), then you have the element index, and only then (3rd screen) you get the “More Posts…”
I don’t really see the solution (if it is indeed a problem) but maybe you do…

Join the discussion.

Some HTML is ok

You can use these tags:
<a href="" title="">
<abbr title="">
<b>
<blockquote cite="">
<cite>
<del datetime="">
<em>
<i>
<q cite="">
<strong>

You can also use <code>, and remember to use &lt; and &gt; for brackets.