¶ 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.

more