I’ve been reading Chris Garrett’s blog since I began blogging, and have always found it to be an outstanding resource. Reading his e-book, “How to Write Killer Flagship Content”, had a great deal of impact on how I think about my content. If you haven’t read it, stop on over there and subscribe to his feed to get a free copy.
ChrisG’s recent site redesign was in some ways a nice update to the look, but much of the updating left the site looking a bit like “Old Media” rather than “New Media”, and doesn’t do Chris justice. It’s a good case study for the difference just a few tweaks in design and typography can make, so I thought I would make some adjustments to the site (using the great Firebug tool for editing CSS live) to demonstrate.
First some comments, and then I’ll show you the results:
Typography:
- Using Arial everywhere gives the site an old-fashioned look. Verdana is a much better choice for body text, and for capitalized headers, Trebuchet is much more attractive.
- Some heading fonts have been styled with negative letter spacing, which makes for poor readability.
- The blog description is set in bold font, and as a general rule it is better to increase the size and use a normal font weight, rather than use bold. What about specifiying Arial Narrow for the description with Trebuchet as a back up? A decent percentage of people have Arial Narrow, and it goes great with the title image. Or, even better, make the whole left side of the header an image.
Design:
- The first thing that jumps out at me is the background image in the sidebar headings. It’s rather jarring to the eye, and a solid color would be much better.
- I had never understood that header image until I asked Chris about it. I always thought it was several guys standing around watching Chris work, and I never understood why he would choose that image for his header. Now that I know that it’s just Chris and his “clones” in the picture, symbolizing all the different roles a blogger has, I sort of get it, but I suspect that most people never realize that it’s not just a couple of guys standing around a computer.
- Overall the header could be much slicker looking. The gradient used on the left side isn’t all that appealing, and the font choice for the image is a bit clunky. I also don’t understand why the dot in the “dot com” is red. There’s no other red on the site – it’s seems an odd choice. I’ve changed the CSS and header to reflect the comments above-
Check the new version out here. What do you think? Obviously not huge changes, but subtle tweaks that make a noticeable difference in the visual appeal of the site.
I enjoy doing this kind of blog design review, and I think it’s profitable to look at how some simple changes can make a big difference. If you’re interested in your site being a subject for a design review, let me know. Obviously, I can’t do every site submitted, but will need to choose sites that make for good case studies. Chris didn’t ask for this review by the way, and I hope he won’t mind my constructive criticism. This post is written with the best of intentions.