A new design

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 design which better reflected 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 eye catching photo ads visual impact. Summaries of older posts make up a significant proportion of the remaining content, with the ‘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’s header is unique however, as uses a magazine-style masthead to provide an overall explanation of the site and to highlight things such as upcoming events.

Blog Pages

Blog pages now have a banner image when I’m inclined to create one. 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 but I intend to include much more – initial thoughts include Upcoming event details and Amazon book details, any other suggestions are most welcome. Alongside the comments I’m now using Technorati to pull in blog linkage. Using APIs is great fun and pretty 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 a 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 on-screen reading. The headings are set in Adrian Frutiger’s lovely Egyptienne, 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. 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. 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.