It’s finally here. After well over a year of thinking about a redesign, sketching ideas, hacking code, testing and then testing some more, I can finally reveal version 6 of this site.

The last update was done back in June 2011 and was more of a tweak to the design than an overhaul. This update is a total visual re-imagining.

The content stays the same, and the organisation and navigation doesn’t change much either. What does change is the layout, the look and feel and (I hope) the reading experience.

Focusing on reading and therefore typography

The majority of visitors to this site come for one of two reasons:

1. to find out more about me and the work that I do
2. to read one or more of the (limited number of) blog posts that I’ve written over the years.

In both cases people are here to read, so making the reading experience as pleasurable as possible became my number one goal for this redesign.

For a while now I’ve been telling anyone who would listen how my iPad mini combined with apps like Reeder and Instapaper have changed the way I read online content. In the past I’d tend to skip through anything that was too long as it just wasn’t a very nice experience having to read long screens of text on a laptop or desktop.

Reading long form text on an iPad is more comfortable as it allows for a more lean-back, relaxed reading experience but many sites are not designed with smaller screens in mind and are therefore either not accessible on an iPad or don’t render very well on a small screen. Apps like Reeder and Instapaper help solve that problem by allowing me to extract the content from sites that have not been designed with smaller screens in mind, and present it on my iPad in a way that has been specifically designed to make reading on it a pleasure.

Inspired by my experiences of reading on my iPad I wanted to find a way of making reading my own site, in a browser, on any sized screen just as pleasurable.

To do this I started by looking at what made the experience so good in those reading apps. It all stemmed from the treatment of the typography. Good typeface choices, comfortable line lengths, pleasant spacing and white space, good text sizing, clear visual hierarchies and colour and contrast choices that are easy on the eye.

I spent time focusing on each of these aspects of the design and applying them to some example content from my site to get a feel for what would work and what would not. This process was not linear: I would settle on a typeface I liked for headline and body texts, play with the spacing, sizing, colour, etc and then see a new typeface I liked or find the contrast wasn’t enough on a particular device’s screen and have to rework each element again and again.

Weeks of experimenting resulted in what you’re reading today. I still have a lot to learn about designing with type (The Elements of Typographic Style is on my ‘to read pile’) but I’m happy with the results so far and think they are a vast improvement on what was here before.

Once I had the basics of how I’d like the text to look nailed down I started working on how non-text content would look. I don’t often add images to my blog posts, but almost all of my portfolio pages include screenshots or illustrations of the work that I’ve done, so I wanted a way of including images in amongst text that was both visually interesting and flexible enough that I could include images that could work on different sized screens and be referenced within the copy.

Again, before I started working on the design I turned to examples (both online and offline) of beautiful uses of imagery for inspiration. Digging around in magazines, product catalogues and blogs I built up a picture (no pun intended) of how I’d like to treat images in the redesign. I settled on supporting two sizes: full width of an article and half the width of an article. Half width images can then be placed either to the left or right of the article when space allows.

To add visual interest I’ve been cropping the screenshots that are shown at half of the width of the article to only show half or two thirds of the full image. I’ve been careful to not use this style for images where you need to see the full screen to understand what you’re looking at or when the full image is needed to illustrate a point in my text. But where I’m including a screenshot to give a feel for the design that I worked on, I think the cropped images work nicely.

With the designs for the content of blog posts and portfolio pages sorted I turned my attention to designing the navigation and branding elements of the site, and the most important element: the overall grid.

Embracing the grid

Having not had any formal design training I have only discovered grid theory in that last few years. As designing with grids has become a widely talked about technique in the web design community I’ve realised that there’s so much I don’t know. I’m still learning about the theory, and how it can work in a fluid, responsive web world, but I’ve tried to read as much as I can on the topic and relied heavily on Grid Systems in Graphic Design (Figure 2) to help me think about grids while working on this redesign.

To make the site work on screens of all sizes, I wanted the design to:

1. make full use of the space available on all screens; without breaking the carefully chosen line lengths and text proportions I’d already designed for article text
2. look consistently like my site from one screen to the next not similar in terms of layout but similar in terms of text treatment, proportions and design elements.

For this to work I developed two layouts: a single column layout for smaller screens and a two column layout for larger screens. Both layouts are designed to be fluid and expand and contract proportionally to make the best use of the screen space available. Both are based on the same underlaying proportions of an eight column grid.

I’m still learning how best to approach design using grids and struggled on more than one occasion to figure out how best to do it. But I’m glad I persevered. Purists may not agree with how I’ve applied, nor implemented the grid for this design, but I like the results, so I’m happy.

I’m still working on optimising the code and the behind the scenes tools that run the site to make is as snappy and fast to load as possible. I’m still also tweaking the type and grid styling as and when I find problems or read and learn about better techniques. I’ve tested the site now on every browser I can get my hands on and on as many devices as I could find. With only one or two exceptions (Kindle devices, I’m mainly looking at you) I’m very happy with how the site loads and looks in most of them.

As always, your mileage may vary so please do get in touch if something looks a little strange to you.