¶ I’ve finally got around to redesigning clagnut.com. Or at least the home page and blog post pages; the rest of the site will follow bit by bit. The driving reason for the redesign was to change the emphasis of the home page and provide a visual framework for introducing more supporting content to the blog posts. The old design was created in 2002 so I also wanted a new look to better reflect my oft-stated interest in grids and typography.
Home Page
I wanted to completely reorganise the home page. The latest blog post still takes precedence, while an unrelated but interesting (to me) photo ads visual impact. Summaries of older posts make up a significant proportion of the remaining content, with ‘column five’ allocated to lifestream feeds Twitter, Last.fm and blogmarks, with more planned. Below this main area goes more content – bits and pieces I felt needed a place on the home page, including a latest Flickr feed.
Then there’s the footer with About statement, and miniature site map forming the global navigation, shared across the entire site. The home page header is unique in the context of the site, and uses a magazine-style masthead to provide an overall explanation of the site and to highlight upcoming speaking events and the like.
Blog Pages
Blog pages now have a banner image when I’m inclined to create one. Alongside the comments I’m now using Technorati to pull in blog linkage. Each post uses keyword tags and machine tags to pull in relevant content from third party sites. At the moment this is limited to my Flickr photos and Google maps. See Seventy Penguins for a good example.
I intend to include much more content from other sites. Initial thoughts include Upcoming event details and Amazon book details, based upon event and book machine tags. Any other suggestions are most welcome. Using APIs in this way is proving quite addictive. It’s great fun working what content can be pulled in from elsewhere, and pretty easy once you’re set up with the first one.
Grid and Layout
Eagle-eyed Brits will notice that the home page in particular borrows heavily from the print edition of the Guardian newspaper in terms of layout and typography.
For the grid, I went with basic five columns, subdivided where necessary. The horizontal sizing of the grid is based on the vertical rhythm of 18px (each column is 180px wide plus gutter).
I’m using Helvetica Neue/Arial for the body copy, partly because I think it just works visually, but also because I believe sans-serif is still the way to go for most on-screen reading. The headings are set in Adrian Frutiger’s lovely Egyptienne F, but most folk will see Cambria or Georgia, with Cambria being a particularly fine substitute.
The layout is fixed width. There, I’ve said it. Essentially the content demanded it, with images and other embedded content in so many different places across the grid. That said, I’m investigating ways to make the layout adapt more to window size. Any polite suggestions are welcome.
The design didn’t really take that long to mark-up. The most time consuming part was using as many microformats as applicable (hCard, hAtom and rel=”me” mostly). There’s more microformats to be added, especially for inline content – something I’ll need to semi-automate. Styling was fairly straight forward too. The typography was set using Clearleft’s in-house style sheet (more on that in a forthcoming post) and with that, the grid was fairly simple to put in place.
To the future
There’s clearly a huge chunk of pages still to build (archive, search results, etc) and functionality to include (proper tag pages) but that will come over the next few months. For now, it’s time to start writing again.
Comments
1
This is a great redesign Richard and long overdue. I love the simplicity and minimalism of the site now, much easier on the eye and vastly more readable.
Nice work.
2
Nice one Richard. I just know that you’ll come up with a way of making this a liquid design! I don’t think we really need to suggest how as it was you who explained the various ways of doing this with images in the first place!
Very relaxing colour scheme. I’m at the in-laws today looking at the site on their Win XP machine and whilst they don’t have helvetica neu and all the things that will make this look so much better on the Mac it all hangs together really well.
I’m inspired to put a bit more effort into my own site now! Certainly the machine tags thing is nice to have. I love the ‘related photos’ thing. You’re right, it does have a very ‘Guardian’ feel to it – the dividing lines and whatnot. Will look forward to seeing how you progress it.
All the best.
3
Really, really nice, Richard. Top shelf.
4
Oh no! Now I’m going to have to go off and redesign my own website again. Whenever I see one of my favourite websites get redesigned, it’s like an itch I simply have to scratch. How could you do this to me? I am totally going to copy everything you did.
Seriously though, this is a very attractive new scheme, although I think a woeful lack of fonts on my XP machine is causing it to serve up a rather boring Arial. I must protest at the spelling of “referers”. Just because TBL got it wrong doesn’t give you an excuse.
5
Great new design, love the layout!
This website has been one of the few websites I visit daily. It’s great to see the difference.
6
Great work on the redesign Richard. I thought I saw a hint of the Guardian in there when I first saw it. The tabloid style fits well.
I’m just wandering why you chose not to size in ems rather than a fixed pixel width? This could allow more flexibility and improved scaling upon text resizing of the browser. Images could be scaled too with a simple image class included.
If you were to go with a fluid layout images can be automatically scaled with a little help from javascript. Shotview is a good example of this. It looks like a regular image gallery from first glance but you can see how it scales when you resize the browser window. A couple of options to consider at least if you did want to go with a more flexible layout.
I really like the original font choices too. Egyptienne looks in the headings. I’d also be interested to read you’re forthcoming post on Harmonise and how it helped with the layout of the redesign.
Nice work.
7
I love the refreshed look and feel. While I didn’t consider the previous design a bad one, this is a nice bit of change. I come for the content anyway, so it could be plain text and i’d still check it out. he.
8
Nice going bruv. The Guardian typeface is available mid-2008 so you can go the whole way!
9
Congratulations! The new design looks great Richard. I know the feeling. It’s a huge undertaking. You made good decisions. Cheers!
10
Well done Richard, looks really good. I guess from previous posts it is meta rich aswell, will have to look under the hood to see if there are more than these many microformats jumping out at me (machine tags maybe?). I hope it doesn’t offend if I say the unassuming style represents the character that inspires me from a far.
11
Feels like he should look properly before commenting
12
Thanks for all your feedback so far folks, keep it coming!
13
Yes. Like much better. And even better than Guardian, because there so close columns ony by another. Page should breath.
Regards, Alexey
14
Well, I’m liking this quite a bit. Love the way the homepage looks, and the inclusion of big phat images pleases the eye. The only thing I noticed that may be errant is the link hover effect on the twitter and lastfm icons in the right column-you likely didn’t want the blue background for those. Anyway, good luck slapping this great design on the rest of your site.
BTW I also just redesigned my site. Must be something in the air!
15
I’ve just discovered your site(s) and I think I’m in love.
16
Two things:
1. 90% of web designers ignore the fact that Helvetica is unreadable on PC web browsers unless you enable ClearType anti-aliasing (hidden deep within display options and DISABLED by default). Still, the number of people using Helvetica online increases every day.
2. You could server a gif logo for IE6, and the related pics / date part is broken in that browser, too.
17
Lord – thanks for your words of wisdom (why no website?). You may well be right about the Helvetica on Windows thing, but unless they have Helvetica Neue installed, all PC users will get Arial when viewing this website (assuming they have Arial installed, why is almost certain).
As for things breaking in IE6… to be honest I haven’t had the time or inclination to test in IE6. The user base accounts for only 10% of my readership, which for a personal site, is not high enough for me to worry about.
Add your comment
Comments are now closed on this post. If you have more to say please contact me directly.