Grids, Glorious Grids
Every designer at some point learns about “the grid”. Grids are invaluable in organizing visual elements and creating a comfortable user environment. And, for better or worse, grids are vital in how web experiences translate across different viewports.
To the uninitiated, a grid would seem rigid and inflexible. But, when understood and used properly, a grid is liberating. It can hold elements in consistent, understandable relationships, allowing freedom to change emphasis and hierarchy, not to mention content, without the experience falling apart or one section looking alien to another.
This is more than a visual nicety or a trick of design. It has bearing on the gestalt function of the information presented to the end user. At its best, it augments and enhances the information. At its worst, it confuses, contradicts, or obscures that same information. And I love grids, maybe too much…
An Impostor: The Grid System
Hard to admit, but I am currently involved in what might be described as an abusive relationship with a “grid”. In fact, it is a finite set of configurations of columns, complete with prescribed variations of arrangements on different breakpoints. It was intended, so I am told, to “simplify” the authoring process by giving the author a shortlist of options.
Like many abusive relationships, my initial impression of my companion turned out to be misguided. This “grid” I first encountered eventually revealed itself to be something much worse. We might call this thing a grid’s “evil twin”: a Grid System.
Grid systems, like any system, are not intrinsically better or worse than their alternatives. Simply having a “system” does not guarantee consistency or clarity. (Neither does having a “policy”, or a “style guide”, but those will have to wait for other discussions).
I intend to write further on just how truly awful this thing is, but we can go spelunking into the dark recesses of this “system” and why it is so ridiculous in a subsequent post.
For now, I want to relate something more hopeful: how I convinced our team to break free of this system, and why it is so tough to change the way of thinking that makes people mistake an ugly, difficult “system” for a beautiful, freeing “grid”.
Let’s Not Confuse the Two
As stated above, in this particular case, there is a finite set of grid configurations, specified by break point, to which we are obligated to design. Fundamentally, this is a problem.
Any time no configuration can be found to present the content in the way we design it, we either have to rethink our approach or attempt workarounds, which are usually pretty crunchy and tough to explain to our authors. I like to think our XD team is pretty good at playing by the rules, and we do strive to match (and even map out) the grid configurations we use throughout our page designs. But the rigidity of the system means that frequently we have to settle for less than optimal display at some breakpoints. We have to play several ends against the middle, and this is damn frustrating.
Beyond Finite Thinking
We hold weekly meetings with all of the stakeholders involved in this ongoing project. We are all restricted to using this same platform, including the same grid system. We are in a season of enhancements for the platform, so occasionally we get to broach changes we want to see implemented. So far, these enhancements have not been rapid, and they always meet with some resistance, which is true of any large project. But what I believe further complicates matters is a way of thinking that is shared among many team members: everything must be rigidly defined in every particular.
This “finite” mindset is so entrenched that many team members seem to see the entire platform as though it is a shipping container: all of the boxes are squares, and each box is divided into square compartments, and every element therefore must be square. But when this gets all packed together, there’s no breathing room, and the final result shows it: pages that are at times stifled by an uncomfortable, rigid presentation.
A few weeks ago, my supervisor and myself had put in a request to change our grid system. We were both tired of searching through dozens of the wrong options only to find nothing useful for our designs. Since we have essentially a 12-column grid, and since those configurations only act as restrictions, we thought about suggesting that they just take the shackles off and let us use a true 12-column grid. Lovely, right?
Fast forward to a recent weekly meeting, where the Finite Thinking Monster was lurking. An agenda item came through requesting our XD team to submit our “list of new grid configurations”.
*Vinyl record scratch* Please, tell me this was not happening.
My supervisor was at another meeting, and I was the lone XD representative in the room, so I slammed on the brakes.
“We don’t want more configurations. We want to use the whole 12-column grid.”
Dead. Silence.
Redrawing the Lines
So, I persisted, explaining that there were numerous instances where we were never able to account for the poor display on certain breakpoints. I related how all we needed would be a 12-column grid available at all three breakpoints. This would be clear as day to spec in our layouts, and allow us complete control. There would be the added bonus of actually simplifying the platform for the author. By contrast, adding to the list of individual (finite) configurations would bloat the platform but never solve the problem, exactly because a limited set is always missing something you can’t anticipate needing.
For the author, instead of having to scroll through a list of 50+ individual configurations which are hard to tell apart at a glance, this new approach would only require one 12-cell configurator for each breakpoint, a true WYSIWYG: what you see is what you get.
Lo and behold, the UX lead and another XD from a partner agency on the phone started chiming in with “yes, that would be the right way to do it” and “do we think that’s feasible?”
Support snowballed, and within a few minutes, a quorum of interested stakeholders had assigned the task to the programmers to schedule the inclusion of an open grid on our platform.
Whew. Glad I didn’t miss that meeting. Here’s hoping it gets implemented sooner rather than later.
Love the grid? No? Maybe you were in an abusive relationship with an impostor system, too. I’d love to hear your thoughts in the comments.
