Before you collectively spray your coffee all over your monitors, let me explain the title of this post. I naturally don’t mean we should literally fuck grids. Come to think of it, not metaphorically either. In fact, let me rephrase: let’s try to think differently about grids for a second. Yeah, that’s better.
I, for one, have retweeted Mark Boulton’s thoughts about the upcoming CSS grid layout draft on several occasions. Specifically looking at the terminology included in the WC3 draft, Mark is arguing against redefining typographical terms that have existed for centuries, such as using the words grid lines instead of gutters, grid tracks instead of fields, etc. It’s very much like calling it line-height as opposed to leading (in both the literal and practical sense), only on a bigger scale. And I support Mark. I agree with his objections. Or do I?
Perhaps, if I look at it from a different point of view, insisting on keeping web design and print design aligned may lead to a loss of opportunity, a failing to embrace the new media completely. We’re working in a responsive environment. We’re producing layouts that are displayed on an unimaginable array of devices (present and future), yet they all have one thing in common: they are screen based and flexible by nature. Quite unlike print media then.
Terminology aside, we’re working really hard to make grids work on the web. There are countless frameworks and plugins that help us arrange columns, units and fields across our monitors and I’m sure there’s as many answers to “What is the best responsive grid system” as there are web designers (at Primate the flavour of the past couple of months is Susy). However, there’s an area of overlap where most grid systems are identical: they replicate, in one way or another, traditional grids as used in print. What print designers use as a visual aid – an underlying, but not prescriptive, layer of guidelines – web designers are implementing as core structural limitations in CSS. For the sake of curiosity, why?
What print designers use as a visual aid – an underlying, but not prescriptive, layer of guidelines – web designers are implementing as core structural limitations in CSS
What if we started afresh, not trying to make an old concept work in a new world, but attempted to create something native, something unique to the medium? For example, instead of placing columns and gutters we could slice the viewport into panels or tiles. To be clear, I’m not arguing semantics here; it really doesn’t matter to me what we call the elements of our layout structures. What I’m getting at is that the traditional mindset of print designers may not be the best for web designers.
Yes, we need structure. Yes, we need content areas and modules. But more often than not I find myself discussing responsive structure at a very coarse level, meaning we seldom utilise more than four columns – call them areas if you like – for most layouts. And if it’s more appropriate to use wholes (100%), halves (50%), thirds (33%) and fourths (25%) as opposed to twelve (or whatever number the grid dictates), six, four and three columns – why bother with traditional grids at all?
Web sites need structure, not grids (necessarily). So fuck ‘em.