Yes, I’ve decided to give the blog a new look again. I couldn’t wait to get this up, but it’s not quite finished. I still need to do a few tweaks here and there. (Surprise surprise, it looks a bit guff in Internet Exploder.) But it’s quite late now and I can’t bring myself to switch it back to the old theme, so I’m throwing caution to the wind and leaving it up.

I’ll update this post later some time in the afternoon explaining the thinking behind it all. In the meantime, if you spot any problems or if you have any suggestions, please leave a comment.

Update: Okay, so now I have the time to post a bit about what I’ve done here.

Perhaps the first thing I should point out is the fact that, regrettably, some URLs have changed. Permalinks to posts and the like should still work perfectly. But you’ll notice that I’ve moved the pages in the navigation panel around a bit. I’ve also reorganised the categories (in fact, I haven’t quite finished that yet).

Speaking of categories, I have finally created a ‘media’ category. It never quite made sense for media posts to be listed under ‘entertainment’, particularly if I was writing about some kind of media coverage of a serious story. So I’ve gone ahead and separated them, and now television, radio and newspapers are listed under media. As such, some category URLs have also changed, so sorry about that if you had them bookmarked or something.

So why the change? Well, I am still very fond of the old design. It will probably make a reappearance somewhere — possibly on another blog. But perhaps I will release it as a WordPress theme for others to use — if I can find the time to make the appropriate tweaks to it.

Despite my pride though, I was always aware that a lot of people were not very keen on the previous design. And it has been there for almost a year. (Maybe this change will become an annual occurrence, a doctorvee Christmas tradition.)

Common complaints were about the dark background (apparently an acquired taste) and the bright links. So I’ve decided to swing back to a white background and rather more muted colours, if you can call green muted.

This is also the equivalent of growing a moustache to try and signify that you are growing up (not that many people grow moustaches these days, but you know what I mean). The previous design was deliberately jazzy and distinctive. But since then I have become a can’t-get-away-from-it adult. And in the next few months I will hopefully be finished with university.

So that means ditching the childish neon colours and adopting a serif font. I have spoken before about my devotion to Verdana, but I am afraid I have become rather tired of it. It is suffering from Times New Roman syndrome.

You know. It’s become a ubiquitous, default font. As such, it is used in so many pieces of ugly design. We have all stumbled upon badly thrown-together websites written in Verdana, just as we see too many passive aggressive notes written in Times New Roman.

I had become very keen on the recently redesigned websites for Times Online and Guardian Unlimited. Both use plenty of Georgia, so I was going to use that. Besides Times New Roman, it’s the only core serif font anyway.

But while I was designing I visited Modern Life which uses Cambria. It is basically the Vista version of Times New Roman, but lovely. I fell in love and decided to use the font on my blog. But as far as I know Cambria is only available on Vista, so for everyone else it is still Georgia.

A funny thing about Cambria is that it appears to be extraordinarily small, so the font size is rather large. But there’s nothing wrong with that I suppose.

Headings and some other bits and pieces are in Helvetica where possible, although Windows users (including me!) will have to make do with Arial. I know it’s a bit clichéd, and rather too ubiquitous, but you never grow tired of it. I do love Helvetica so I was keen to use it when I decided to give the blog a cleaner design.

I suppose now is a good time to talk about the general inspiration for the redesign. I was tempted to go back to a clinical, Helvetica-led design when I first saw screenshots for the new beta version of Delicious. Delicious is a very apt word. Mind you, the end result on this blog has ended up looking very little like the Delicious screenshots.

A more direct inspiration has been the beautifully-designed Lokesh Dhakar website. In fact, parts of this blog’s design have turned out to be embarrassingly similar. I first came across his blog when I read this guide to different kinds of coffee and it instantly struck me as an excellent design.

Layout-wise, I very much went for the ‘less is more’ approach. This has meant compromises in places, but I’ll go on to that. The main change is that I’ve moved away from a three column layout to two columns. I had read somewhere that multiple columns just confuse people, which makes sense. So it’s back to one sidebar.

I was keen to get everything lined up nicely with each other. This does make it look quite neat, but one problem is that the main column is quite close to the sidebar. The solution was to have a neat line running along the left of the sidebar, although I’m still not sure if it is enough. I toyed with using full justification, but decided in the end that the cons outweighed the pros.

Despite the intimate position of the main column and the sidebar, the page is wider than before. Making good use of the space available and all that. As such, the design only really works if your screen is at least 1024 pixels wide. But the same was true of the previous design. And people with smaller screens make up around 3% of this blog’s visitors. Sorry to those 3%, but the rest of us just get masses of white space.

On to the content. One thing you’ll notice is that categories are now taking pride of place above every single post. They used to be hidden away, only appearing in the sidebar of single post pages.

The reason I’ve made them more prominent is because over the years I have become more and more guilty about the fact that this blog is a bit of a ragbag of different topics. And the Formula 1 posts in particular are beginning to overshadow everything else. So having the category as the first thing of every post is just a heads-up for everyone, so that you know what the post is about and you can easily skip the posts you aren’t interested in.

Another new addition is subtitles. I saw this on a few other blogs and really liked the idea, so I’m going to give it a go. Inspired by this article, I did it using custom fields, a feature of WordPress that I have never really explored before.

Gone from the top of the post, however, are the date and the comments link. The date still appears there on single posts, but I am thinking of including them everywhere again. I already feel a bit lost without them (although I didn’t use dates much on any of the designs I used before the previous one).

I am also open to putting the comments link back up there, although the link still appears at the bottom of the post as expected. Any comments on this would be appreciated.

I have also taken the plunge and decided to add a ShareThis button, despite what I wrote about it a few months ago. I’m still experimenting with the position of this, so any ideas would be welcome.

Over to the sidebar. I’ve reduced the amount of stuff that’s there to a bare minimum. The latest comment is still there as I like to highlight the great discussions that go on in the comments, which is really what blogging is all about.

Twitter is still there, although I’ve reduced it to just the latest update rather than the last three. Delicious too has been reduced to just the five most recent links. I normally post to Delicious more often than five times a day, so this might be a bit odd. But there is method to my madness.

I made a decision a short while ago that this blog should concentrate mainly on original content. That’s just the way the blog has evolved, and I don’t really like to fob people off with YouTube clips all the time.

But it’s good to highlight interesting websites and videos. After all, that was the original meaning of the word ‘weblog’, celebrating its tenth anniversary this week. So I will create another home for them. Probably a tumblelog, but I will get round to that later.

The other prominent feature on the main page (and, indeed, every page, the big whore that I am) is adverts. An early version of this design had the adverts appearing in a garish green colour scheme, but I screwed my head on enough to revert to a more sane grey version. I am ridiculously proud of having the idea of paying homage to Associated-Rediffusion, which wouldn’t really have worked with the green scheme.

The part of the design I am most worried about is the comments. For some reason, I always find the comments section the most difficult to design, and this time was no different.

I decided to move the comment author information to the left of the comment rather than above. Part of this was to get the full size of the Gravatar displayed, which would take up too much room if you have it above. It is also a layout familiar to message board users, so no real issue there.

There is a problem, however, if somebody has quite a long word in their name. In a recent example, Bellgrovebelle is cut off, although there are worse examples. Thankfully, these are quite rare and hopefully not too distracting.

As has already been noted by Ollie in the comments to this post, there is an inconsistency between the sizes of the Gravatars and the Identicons. I’ve not worked too hard on this yet, although my attempts so far have only produced pixellated-looking Identicons. I am working on it though.

Other features I’m thinking about adding to the comments section are favicons and OpenID.

In the pages (about, archives, etc.) I have also removed a lot of stuff that I didn’t really consider important any more. I’m thinking of completely uninstalling the post popularity plugin as this blog now has a post ratings system which I prefer. As for the other stuff, see if you can work out what’s gone. I doubt anyone will be too upset.

One last thing. I am using some icons from the Silk set by Fam Fam Fam. I’ve still not quite finished this aspect of the design, as I’m not sure which bits should have icons and which shouldn’t.

I think that just about covers it. Sorry this post went on for so long. I would be grateful to hear any comments or ideas. And of course, if something seems broken then please let me know about it!

11 comments

  1. Quite a bold change! I’d be interested to hear the thinking behind it!

  2. I actually quite like upon first impressions. I certainly like it more than the previous iteration. I’ll have a scoot around later, but one thing I did notice is the size of the gravatars. It looks as though a height and width hasn’t been defined and those pulled from gravatar are about four times as big as the given ones. I think they look better when bigger, but look out of place next to the others. Nice work Duncan.

  3. Yup, the avatars thing is one of the bits I still need to tweak. One of the reason why the comment author’s name and other info now appears on the left rather than at the top was so that I could include a full-sized Gravatar. Unfortunately, the Identicons are generated at 40×40. There is an option you can change, but I changed it and it didn’t seem to do anything. Maybe it was a cache thing or something, but I’ll look into it a bit later.

    Thanks for the comments!

  4. Add me to the list of people who are liking the new design – a lot easier on the eyes than the old one, but not quite so distinctive because of that!

  5. OpenID good plan (which I’m obviously in favour of). But, um, can we by any chance have a them switcher plugin? Or at least a stylesheet changer?

    I’d be happy with the complete layout as is, but, um, WHITE? GAH! It Burns us it does! OK, acquired taste, but it’s my taste.

    BTW, haven’t tried it, but if you DL the Powerpoint viewer package on the MS website and install it, you get the new fonts as well, even on XP. Which is nice. Really have to get around to that, the new version of Verdana/Ariel is quite nice I understand.

    White! No!

  6. Liking it… black Serif on white seems to be in vogue at the moment and it’s one of the more traditional styles, but you’ve complemented well with the extra touches like the Helvetica and the splashes of colour. I’ll even overlook the fact that I’m planning a refurb over the holidays and you’ve swept the rug from under me somewhat by getting in there first! :D

    Shame you couldn’t get the Associated Rediffusion logo to spin, though. That would have been class.

  7. Will P, I’m tempted to try an animated Rediffusion logo now! Might be a bit distracting though. :)

    MatGB, I’ll look into getting a switcher plugin of some sort. Failing that, what would be a good background colour? Would a light grey be okay?

    By the way, I’ve already got the Tumblelog I mentioned in the main post up and running. It is here.

  8. I suppose, as an old geezer, I should like huge font sizes but, for some reason, I don’t. The white background is, ummm, white, there’s no denying it, and everything else is suitably muted and unobtrusive. Which means it’s a good design, I guess.

    Must admit I preferred the old one, however, weird as it was…

  9. Pale grey would be better, yes—I really don’t like bright white backgrounds, hurts my eyes too much after awhile, and I’m online virtually all day.

  10. duncan2

    White bg much better than black. I think part of the reason it seems to be extra-brite now is the liberal use of bright green and yellow for everything else. If you used more muted shades, the overall effect may be more pleasing. Or perhaps stick an off-white colour behind the right-hand side of the page

  11. […] MatGB wanted a darker background. I have made the background slightly darker, but you probably won’t notice it isn’t white. It is a very light grey. I tried darker greys, but it never looked right to me. […]