Get off my grid!

Grids have become an integral part of design since humans figured out how to print stuff. Grids flourished in the age of reproduction. Discussing the sense and non-sense of grids is something that designers never seem to get tiered of. Responsive web design has added an extra dimension to this discussion. That’s a good thing because any argument for a grid based approach would also need to take responsive layouts in to account. So, how well do grids hold up on the open web?

Where things get sticky is when we try to formalise this need for visual structure into a single system. A system that tries to be “the” solution for page layout, for all and any layout. You know what people say when something sounds too good to be true? It usually is.

It’s an easy mistake to think that a grid is a system but it is simply about the order, rhythm and visual hierarchy of content. This means that there is no grid without content. Also, grids are not rules, they’re more like guides. Any system that encapsulates content tends to falsely asert itself as a design and production requirement instead of a design guide. You should be free to nudge margins and widths to accommodate content because optical alignment can trump the rigidity of any grid. Furthermore, layout systems usually enforce a modular scafold in the front-end so that it can be abstracted away from the developer. I’ve seen this before, and it looks like framework lock-in. When you’re constructing a front-end for a particular design you look at the design and the content that needs to be presented to the user. Picking a layout library and squeezing your design and content into it is putting the tool before the content. Not uncommon to do, but it is possibly to the detriment of your content.

Personally I find too many frond-end developers possessing limited design knowledge and therefore prefer, or rather rely on the abstraction of grids through a system. The more you know about layout from both a design and front-end perspective the more a grid system gets in your way. Both the rigidity and the excessively verbose non-semantic markup seem to make little sense, and could even be considered harmful.

Now, don’t get me wrong, I love Swiss design. It is visually clean and very ordered, it’s simplicity translates beautifully to web design. The last thing I need is a huge messy grid system plonked on top of it. The rigid way grid systems are set up prevents them from evolving. Just look at responsive web design and the grid system markup. The two clash which is sad because responsive design works very well with grids, even benefits from them.

Just imagine the unfortunate situation of using a grid system in a large scale production and looking to move forward. You may find that it is not so easy to get rid of your grid system and end up hacking around it. This too sounds very familiar.

It’s table based layout all over again.