Made to measure
Posted on 18 September 2012
Well, it looks like I’ve redesigned my site again.
This recent spate of redesigns might seem a little masochistic — and quite possibly a little insane, too, given that we’re launching Insites: The Book tomorrow — but this one comes from a deep frustration with the previous design: a design that, when created, served the purpose of allowing me to play with my ‘art directed’ series of web type experiments, but over time became nothing more than a burden; a design that got in the way of me actually writing. Specifically, the measure (line length) was just far too wide. Yes, I could have adjusted that, but why polish a turd? There’s something liberating about knocking everything down and rebuilding from scratch.
Unlike the past two incarnations of this site, which were designed entirely in the browser and during a very short period of time, I designed this one in Photoshop as part of a workshop that Keir and I taught last month, and then I sat with it for a while. After realising that I still liked it a few weeks later (a rare thing indeed), I began the process of writing the markup and CSS (directly within the Harmony interface) during the odd evening, and then, whilst waiting for a one-and-a-half-hour-delayed train on Sunday, I got the bulk of it finished. I hope — although only time will tell — that the gaps in between the creative process have made for a more informed design.
Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal.
Rather than count characters, I’ve gone for something that simply looks right. There’s fluctuation, of course, because this is a fluid, responsive design, but when I have done a quick count, I’ve been pleased to find that the measure generally conforms to Bringhurst’s guide. Most importantly, though, the main article’s measure dictates the entire layout of the site: media queries kick in at certain points to nudge things back into place. Unlike almost any other responsive site I’ve designed, there’s no
max-width set anywhere in the CSS file: it’s actually padding set on the
html element that does a similar (but more flexible) job. This was a happy accident after finding that there was no way to set a
max-width on either the
body elements whilst still maintaining the relationship with the faux column on the left (which you’ll see if you’re reading this in a browser window wider than 720 pixels).
When we focus on measure, we are of course focussing on the pleasure of the reading experience (which, in turn, feeds the pleasure of the writing experience) and that is exactly why this design is so minimal: there’s almost nothing to it beyond the actual article — and why should there be? This version represents the culmination of my move away from unnecessary design fluff. If anything, it’s something I came close to with version six before getting distracted by the idea of art direction in version seven, but the thing I’m most proud of with this design is that although it’s utterly minimal, there’s still room for art direction if the post requires it: check out the slightly refactored ‘Tomorrow’s Web Type Today’ posts about ligatures, subsets, swashes, and stylesets for examples.
Of course, I know some people will hate this. I can guarantee I’ll get comments saying things like, ‘the site is barely responsive when everything sits in such a narrow centred column,’ and ‘on my 27″ iMac, there’s loads of space at the side you could’ve used.’ But such responses miss the point. Responsive web design isn’t about filling every available bit of whitespace — it’s about balancing the innate flexibility of the web with a designer’s desire to control the output. And, in case you’re wondering, I’m writing and reading this on a 27″ iMac.
One last note on the typography: due to so many complaints from readers about the poor rendering of Skolar Light on (some versions of) Windows, I’ve switched all type to Skolar Regular — which is better hinted than the Light font — and used
-webkit-font-smoothing:antialiased; to thin everything down (for WebKit browsers, anyway). Hurrah!
If there’s anything else you’d like to know, feel free to ask in the comments. And, although I redesigned more for myself than anyone else, I do hope you enjoy the new look. Perhaps this one might actually stick around for a while, eh?