Clagnut

Menu

A new year, a new design

§ Clagnut news · Design thinking

To my surprise, Clagnut.com was last redesigned in September 2008 – that’s getting on for 6 years ago. Well, that’s all changed now, as will be evident to you, unless you’re viewing this in a RSS reader (remember those?).

I’m still pleased with the 2008 design – I think it held up reasonably well – but it was fixed-width, designed with the grid first, and starting to feel a bit ‘small’. I felt the site needed a redesign, created from the typography outwards, responsive from the beginning and elegant on huge as well as tiny screens. That and I really want to write more, so I felt – in true procrastination style – that I needed a new design with a lovely reading experience to encourage that writing to happen.

Book cover showing similar colours and typographic treatment
Front cover of Designing News

Inspiration

After a few false starts to the redesign, I came across a fabulous book, Designing News by Francesco Franchi and was hooked. It’s not hard to see that I ended up unashamedly using the book’s front cover as a basis for my graphic design. I hope Francesco can forgive me for butchering his fine work and adapting it for my own purposes.

Typography

Where my design is different to Franchi’s is in the choice of type. In all of those false starts, I had been trying to combine a high contrast serif font, set large for headings, with a sensibly sized contemporary sans for the body text. More and more I found myself drawn to the same two typefaces. Michael Hochleitner’s Ingeborg for the headings, and Akagi by Neil Summerour for the body text.

To my eyes, Akagi and Ingeborg have common typographic ancestry. They both have a vertical stress with a sturdy, rational approach tempered by a certain glamour – the very definition of substance and style. The two typefaces have similar flourishes such as the eye to the lower case g, and matching letterforms such as the lowercase a and y. The low-contrast Akagi Medium works extremely well on screens, and juxtaposes really well with the high contrast, almost fat-face Ingeborg Heavy. It works for me. As you might expect, both fonts are served up by Fontdeck.

Comparison of the two fonts
Ingeborg Heavy / Akagi Medium

Responsiveness

Firefox Responsive Design View
Responsive Design View

I’ve used responsive design techniques to help the site be nicely readable on lots of devices. At the time of writing, there are nine break points, including height as well as width. All the media queries are set in em rather than px as the break points are designed around where the design breaks rather than an arbitrary screen size. The Firefox Responsive Design View proved invaluable before an actual device testing on the Clearleft test lab was involved.

I’ve put together a kind of style guide, mostly as a check that all likely mark-up is styled appropriately. While the site has not been widely tested, it should be fine on all modern browsers. Please let me know if you come across any problems. You can also read more production details in the colophon.

Home Page

The home page is now slightly more dashboard-like, in that I wanted to include a lot of ‘live’ content from my presence elsewhere on the web. So interspersed among the blog posts are photos from Flickr, tweets, music scrobbled via Last.fm, extracts from Kennedy app, and my current Jam.

Blog Post Pages

The reading experience of the blog posts should be better now, and they can now handle much larger images and tables. I’m using machine tags to pull in photos from Flickr where relevant. The related posts should soon become more relevant too. I’m planning on introducing a calendar view to the archive, but for you’ll have to make do with paging through months and categories.

What No Comments?

The site is built on my homemade CMS written in PHP and MySQL. Unfortunately, since the great database disappearance comments have been turned off. I might reinstate them at some point in the future, but for now you can contact me by other methods. The whole site is now hosted by Vidahost who have a simpler and more reliable database backup system than Joyent clearly did.