For those who haven’t come across it already, earlier this year I made a fairly complete summary of my approach to designing online with a grid, presented in conjunction with Mark Boulton at the South by Southwest Interactive Festival in Austin, Texas. There’s one crucial idea buried in that slide show, though, that I felt was important enough to pull out into its own blog post, if only so that I can have a URL to which I can point people when I’m explaining it. Here it is…
Ain’t Grid Behavin’
In print, grids are fairly static, and it’s fairly straightforward to make decisions on how to use them based primarily on aesthetic concerns. As a result, most traditional grid practitioners will line up elements right on the grid lines, like so.
Notice how the letter “G” aligns nicely to the left edge of the area, and with the thick rule above. Like I said, that’s aesthetically unimpeachable and pleasing, in part because its tight left-alignment emphatically reinforces the grid.
In digital media, though, we must, as always, make some compromises for the added factor of the way elements behave. Which is to say that, unlike the printed page, the components of a design — photos, illustrations, shapes, flourishes and type — can transform, change state, move, transform etc.
This makes working with grids just a little more nuanced than simply lining things up. Put simply, what it means is that rather than fully left-aligning an element with the grid, some padding is required so that the element is nudged away from the grid-line a little. Note in the example below how the text has shifted a minor amount to the right. Most people wouldn’t notice it, but it’s a significant change to those who look for it.
If you just blindly follow that advice — inset all your text a little bit from the grid line — from here on out, you can stop reading right here and rest assured that you’re benefitting from the majority of my wisdom on this relatively minor matter. But as with all design, the devil is in the details, and knowing why can be helpful. For those so disposed, here’s some further elaboration.
A Menu of Delightful Delicacies
Consider this simple layout, where the elements line up on the grid lines (shown in light blue). Everything looks orderly.
Things get a little tricky, though, when behavior is added to the mix. Suppose we incorporate some rudimentary interactivity into this layout, making certain elements clickable. Right away, it requires some elements to be inset from the grid lines a bit. If we didn’t nudge “Tacos,” “Lasagna” and “French Fries” over just a bit, their left edges would abut the highlight boxes, which is visually unpleasant.
Following that logic a bit further, suppose that the highlights don’t appear until the user rolls over the element, so that the off-state is virtually identical from non-clickable items. (This is horrible usability practice, for sure, but let’s just go along with it for the sake of argument.) What results is alignment that seems off, or inconsistent.
This is an essentially undesirable effect because it begins to subvert the purpose of using a grid altogether: providing a consistent logic for the placement of elements in a layout. When the placement of individual elements begins to shift based on unapparent or hidden behaviors, the layout can seem unreliable, unpredictable or less than professional.
So if we assume some minimal amount of inset on all elements, it will produce a visual uniformity in the spacing, which immediately makes the grid seem reliable again. Here I’ve tinted back the highlighting a bit so that that spacing uniformity can be more easily perceived between clickable and non-clickable elements. Note that the instructional text at the bottom has also been inset just a bit, to left-align with “Grilled Cheese” and “Lasagna.”
For most grid-based designs, of course, you’d probably be able to get away with insetting and not insetting elements on an ad hoc basis, making minor adjustments like these as necessary. To some extent, that’s even what we do at NYTimes.com (though it was a practice established before I got there).
When I can, I try to practice what I preach though. One day we’ll overhaul our grid usage at NYTimes.com, and I’ll put these ideas into place. Until then, if you look carefully at Subtraction.com, you’ll see that all elements are in fact inset, and that none of them align flush with the grid line. (Take a closer look at this page to see the grid superimposed on the layout.)
Why Bother?
This practice probably exhibits an unhealthy focus on minutiae, I’m sure. Obsessive compulsive disorder aside, attention to details matter in most meaningful design. The way I see it, there are two levels of benefits to grid usage: the first is the superficial imparting of order, in which a grid helps the entirety of a layout fall together with enhanced cohesion. You use a grid when you want things to look tidy.
For me, though, I prefer the second, more subtle level, in which the grid is a crucial tool in a larger order. The grid helps extend the logic of an overarching solution to the most tactical levels, subtly communicating to the audience that they are experiencing a considered environment, where information, its presentation and its behavior are logical, consistent and reliable. In that context, insetting elements in this matter becomes critical. To be sure, it’s a level of detail that will be missed by most people — Subtraction.com has been ripped off a few times, and this is usually one critical detail that plagiarizers forget to appropriate — but that shouldn’t matter to a designer. If the designer knows it’s there and if the designer believes it’s important, then it’s important.
+