Writing

Beyond the Style Guide

With Drew kind enough to let me write for 24 ways again, this year’s contribution was an opportunity to bring together a series of thoughts that had been languishing in my drafts folder. These centered around modular design, in particular the growing use of front-end style guides:

In straddling the realms of graphic design and programming, it’s the point at which they meet that I find most fascinating, with each discipline valuing the creation of effective systems, be they for communication or code efficiency. Front-end style guides live at this intersection, demonstrating both the modularity of code and the application of visual design.

I also wanted to write about the role CSS preprocessors can play in this context, one that ensures their use is more considered and focused. Such is the power of preprocessors like Sass, that without exercising restraint, we can find ourselves creating endless abstractions, with even the most fundamental aspects of CSS being drawn into the mixin. Much like jQuery (and frameworks like Bootstrap and Foundation), we can find ourselves growing dependent on such tools, to the extent that simpler, more effective alternatives get ignored.

Thinking of Sass an an intermediary between CSS and a visual language, is one way I try to keep my reliance in check: if you see a mixin or variable in my CSS, it should relate to an attribute in my design system.


So, I end this year much like I did the last, with one final article on a topic of interest. Unlike last year, I’m looking towards a new year that sees me write less long-form pieces like this. Instead, I wish to spend more time making things (my list of abandoned/neglected/potential side projects can only grow so long), and perhaps embracing a means of writing that’s a little more fast and loose.

Taking the Plunge (And Coming Up for Air)

Freelancing can sometimes feel like a roller coaster of emotions, and this post finds me at one of its lowest points. Eight months in, now seems like a good time to consider the ride taken so far, and consolidate some of the lessons learnt.

Two Years Hence

For the last few years I’ve employed a little life hack: signing up my future self to things I would ordinarily avoid.

Creative Direction

For the last year I’ve been working at the Guardian under the leadership of a creative director. I’ve never worked with a creative director before – at least not in the traditional sense – and have found this to be a fascinating yet also frustrating experience; for the first time in my career I’ve not the been the arbiter of good taste.

Naming Things

My contribution to this year’s 24 ways attempts to tackle one of the most difficult aspects of web development, naming things:

Working in-house may mean working with multiple developers, perhaps in distributed teams, who are all committing changes – possibly to a significant codebase – at the same time. Left unchecked, this codebase can become unwieldy. Coding conventions ensure everyone can contribute, and help build a product that works as a coherent whole.

Even on smaller projects, perhaps working within an agency or by yourself, at some point the resulting product will need to be handed over to a third party. It’s sensible, therefore, to ensure that your code can be understood by those who’ll eventually take ownership of it.

Put simply, code is read more often than it is written or changed. A consistent and predictable naming scheme can make code easier for other developers to understand, improve and maintain…

This is the fourth successive year I’ve been involved with 24 ways (including last year’s redesign), although this article rounds out a year in which I have been deliberately quiet in terms of writing and speaking. I don’t intend for that to be the case in 2015.

The Web Aesthetic

The Web Aesthetic

At the beginning of this year I was struck by a realisation, prompted in part by the discussions around responsive images but also the artistic ingenuity of the image optimisation techniques being used by Jeremy. How might the visual aesthetic of the web change if we were to acknowledge its nature and embrace its constraints?

Build a Responsive Website in a Week

Since returning from San Francisco, much of my spare time has been spent writing a tutorial for .net magazine. Published as part of their ‘Responsive Week’, this is for developers who want to learn about responsive web design but don’t know where to start.

Middle Class Memories

Heritage Lawn was an embarrassingly lavish name for a desperately average cul-de-sac. Yet, in and around a maze of opulently named cul-de-sacs, a few areas of wilderness remained.

Offscreen Magazine

Offscreen Magazine

Offscreen is a new magazine edited, produced and beautifully designed by Kai Brach, focusing on the personalities behind the pixels – in a good way.

The Beach

The Beach

They call this place Ocean Beach, perhaps because both take up most of the view. The sky is hard to truly make out, with only a faint line separating two sweeping blue canvases, each in many ways a reflection of the other.

Thoughts on Adobe Muse

This week Adobe revealed Muse, yet another web application but this time aimed at print designers looking to transfer their skills to the web. However this app has created some controversy, not only due the quality of the code it outputs, but also the claims made in the marketing videos.

Looking for older posts? Browse the archive