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.
I do like your version better, Randa, and your logo change is a great one too (I’ve often thought that Chris could improve upon his logo).
Until Chris mentioned that his header image was composed of three versions of him, I didn’t even realise, and I’d been reading for quite a while! Some of that’s down to reading via my feed though, but I get your point.
Off-topic, nice to see you rewarded with a PR6. Testament to your WordPress theme design skills.
Thanks for the review, much appreciated
It’s funny how divided people have been about my redesign, I think people must have really gotten used to the old one. The header image of me and my clones is probably the cause of most of the criticism the site gets and I think I will have to do away with it eventually. I thought it was clever but most people just think WTF?
I’ll be interested to hear what others think about your advice, I have had so much feedback I don’t know where to turn now
@David – thanks. Good to finally see the PR6 upgrade – Google sure took their time with this update.
@Chris – I guess that’s the curse of your popularity huh? Everyone has an opinion and is glad to share it.
Is it popularity or do I just have a big mouth?
LOL, maybe a little of both?
I like your review, I am getting a redesign done soon (just getting in the quotes now) and I would like to come back and ask you to review it when it’s done, you seem to have a good eye for detail and I like what you did to change chrisG’s blog. it looks a lot more like new media the way you did it.
@Randa – Nice review and adjustments. I really like the Verdana font in the body – it makes it so much easier to read comparing to the Arial. The Trebuchet in the top navigation is a bit out of place since it doesn’t match anything else on the page beside the block titles. If you change the post title to Trebuchet as well – it all will be more in harmony. Also the text below the log (The Business of Blogging and New Media) – I would change to Trebuchet (I tried it my Fireworks MX – size 27, bold with 2px distance and 1px softness shadow – looks good.)… I’d leave the logo as you made it – it looks good even the font is different – it’s the logo – it should stand out
@Chris – I think the header image is meaningful, but would be better if it was obvious… something like a barely visible trail (like traffic light photos at night where you don’t see cars but light trails.. make it barely visible) – trail of your movement from one place to another… or just play with the transparency of your clones… that may be cool tool. Personally I don’t know how to create trails, but I just saw a photo yesterday of SoCal fires and there was a person that suddenly ran in front of the camera… you can’t see the person, but you can see this blur thing with some characters of a running person.. pretty cool.
Great critique Randa. I really don’t like Arial a ton, but it is one of my back up fonts since it is so widely had. I usually program century gothic, but realize many can’t see it, bummer
I love how you used orange instead of bold in the header. I’m not sold on the new sidebar font and kind of like that gradient he uses behind the sidebar titles. But I think those sort of things are just taste driven. I do agree though that with the gradient it is something your eye is very drawn to and thus may be too distracting.
Great job.
Max,
That’s a nice idea with the ‘light-writing’ tracer effect. I’d not be so sure how to achieve it myself, but I reckon it’d be an improvement if Chris is keen to keep that particular image.
Personally, I’d like it if Chris was facing the audience rather than showing the back / side of his head. However, I can’t fault him for his blogging success, which is a sign of how great his articles are.
IMO it’s much better now
[...] want to subscribe to my RSS feed. Thanks for visiting!Randa Clay, one of my favorite web designers, has reviewed Chris Garrett’s blog I’ve been reading Chris Garrett’s blog since I began blogging, and have [...]
I like the look of the site, but also liked the fact that you clearly spelled out what was done and why. I am new to this and don’t like the look of my site. This info will really help me! Thanks
PS…I a new subscriber of yours!
@Jessica- thanks for subscribing and for your comment. Your blog topic is very interesting – it’s a good idea and a niche I would never have thought of. I hope it’s going well for you!
I like a lot of the changes you made, Randa, especially to the fonts, but I really like Chris’ old logo! Maybe it’s just because I’m used to it
Did Chris ask for this review or did you just decide to do it? It’s a great idea for both of you, either way!
No, Chris didn’t ask for it. Just me being my big mouth self.
This is great; very useful seeing the impact of fonts (for a non-designer like me!). I guess I am one of the minority who does like the ‘clever’ pic on the title.
I disagree, I think the header image is the first thing that jumps out at you. It’s intriguing and makes you think…I perceive this as a bad thing though. You don’t really want to be ambiguous with users.
Great review and you tweaks to Chris’ site, I never really gave the header that much thought, the content is always good.
As a beginner in the webdesign I must say that reading your post explained a lot of the things I was looking for. It sure will changes things in my way of doing things from now. Thank you!
Nice hints and nice redesign !
I jumped on my style sheet and was happy to see I used Verdana for text and trebuchet for title !
Would love a review of my site if you got any time.
Great review. I love to see your ideas and critiques, it really helps me out.