Designing from the content out

Last Friday I gave myself a challenge. To redesign this blog. Before the weekend was out. So with little else on, I set about doing just that…

The previous design of this blog was a little inelegant. I devised a basic grid and threw a few things at it (colour, fonts, an eskimo… maybe) to see what stuck. As an experiment it was okay. The most important aspect of this exercise was that I could no longer excuse myself from writing due to an unfinished design.

Later I adapted the design so that the layout would scale in response to the size of the browser window/device screen, and wrote about that process. Some elements remained fixed, while others became flexible. Technically it became adaptive rather than responsive.

Content out

A year of writing has familiarised me with a blog post’s constituent content elements, and comfortable in my own style of word-smithery. Enthused by Mark Boulton’s A Richer Canvas post, where he encourages taking a content out approach to design, I figure the content of my posts should provide the direction for a new design.

The design process begins with two decisions. One: to use Georgia for my body copy, set at 16 pixels. From previous experimentation I had concluded that a column width of 480 pixels would give me a reasonable line length for text set at this size. Decision number two: 480 pixels will be the maximum width of my content column. Content-led constraints.

Hold up! 480 pixels is too wide a default for mobile. I want to make sure that I give equal consideration to the site’s appearance on mobile devices. More mobile too than mobile first. This blog is not intended to be exclusively a big screen experience. With this in mind, I have decided to design a 320 pixel wide view (yes, I’m an iPhone user) in parallel.

Designing the views

When I say to design the two views in parallel, I do mean this literally. I set my Photoshop canvas wide enough to accommodate the two views – a 480 pixel pane and a 320 pixel pane – one next to the other.

Content out design of Andy's sketchbook

My starting point – two simple columns of content, representing how the content would be viewed at different sizes

This allows me to experiment with the appearance of content elements (i.e. headings, body copy, lists), key to a post, in each view simultaneously. Removing the distraction of periphery design details helps me focus on the relationship between content elements within a view and across the two views.

At this stage both views are very linear. This is the objective for the smaller view. The intention for the larger, that it be one of several columns in a larger design. My next step – to define the grid, and work out how to expand both designs to incorporate the header, navigation elements and a sidebar. This time around I have opted for a single unit of 40 pixels for both columns and gutters, to increase flexibility in the design. The result:

Content out design of Andy's sketchbook - final draft

The final draft demonstrates how a page as a whole fits together at different sizes, within the system I have designed.

Designing in the browser

The mock-up is incomplete – it doesn’t illustrate actions, such as :hover or :focus events. It is enough to build the HTML structure though. And with a working prototype I can put these details in place.

It is also an opportunity to take a closer look at how the design scales up from the linear view. There is no width control in this linear state to allow for maximum flexibility. Media queries introduce the more complex layout elements. The columns are completely flexible, but in choosing to set a maximum-width on their container, this constrains the design to an optimised maximum. The design requires one additional (significant) layout change at an interim width to prevent content becoming overly squashed as it scales down to the linear view.

IE

Always problematic and in need of remedial treatment, is our friend Internet Explorer. Versions 6-8 of IE don’t support media queries, so this means a number of targeted tweaks:

  • All three browsers get text optimised for the desktop.
  • The IE6 view remains linearised (I hope – I am yet to test this out)
  • IE7 and IE8 have the larger design view, but remain flexible within set minimum and maximum widths.

Room to grow

As a starting point for a quick redesign, the content out approach has made sure I focus on the essential and not get bogged down in fussy decorative detailing. The result is a typographically-led design, but this is a place where my thoughts are most expressed through words. It is also deliberate. I knew upfront that I wanted to play with the typography, to explore contrast using big big headings and capitalised text for example. This has led me to create a patterns page, demonstrating (and to serve as a reminder of) how the different elements interplay.

Designing in a weekend doesn’t give you much time to reflect on progress, so over the coming weeks I will continue to make improvements to the design. If you have any feedback, please leave it in the comments!

I realise that in the design of this site I haven’t had to deal with anything hideously complex, such as multi-faceted navigation or fixed width advertising blocks. I am confident in my approach of designing in parallel, regardless of scale of project. By considering content elements simultaneously across several key views, the result is a more harmonious design across a growing scale of device sizes.