A List Apart: Articles: Thinking Outside the Grid

Because I’d been thinking about this article for some time, the aerial view of these cities struck me as an apt metaphor for grid design on the web. With today’s technologies and techniques, we are free to create grid designs—or we can choose to break out of grids completely. That such choice can empower a web designer is unquestionable: the true challenge lies in the way we bring ourselves to “lose small mindâ€? and think outside the grid.

An interesting metaphorical exploration of the visual and logistical aspects of web-design. Among other issues, it explores how the form (coding approach) has had an influence on meaning (visual representation of content).

It’s fascinating to me, as a person who tends to be a bit more code-centric than design-capable, to see how cemented to code our designs have been. I believe it’s been the constraints of the table-based layout that have kept us in visual gridlock for so long (figure 5). Add that to an only-now emerging understanding of CSS layout and it’s easy to figure out the reasons why.

…

There are some advantages to table-based grids, but, as with the urban-planning metaphor, a strength can also become a weakness. Table-based grids allow us to ensure that all the cells within it work in tandem. Want all columns to stretch to the same size? We don’t even think about how—it’s the natural behavior of tables. Want to apply even spacing between cells? Again, it’s a no-brainer. Of course, what if you don’t want this one-size-fits all result? The answer is a painful one: you can’t have it.

The author also touches on the maturity of the web as a whole.

CSS changes all that, and this is why I theorize, along with many others, that we’ve not yet learned to design for the web. What we’re just beginning to understand—particularly those of us who come to CSS layouts after years of working with tables—is that the visual model for CSS is far more conducive to breaking out of the grid and designing for discrete, semantic elements. Perfect, no, for despite the gains made possible by CSS, we lose things too. Stretching columns is a decidedly problematic issue in CSS design, and cell spacing is too.

The CSS visual model is all lines and boxes. That’s the stuff of grids, right? Well sure, if we want it to be. This is where the fundamental difference is. CSS allows us to take a box—any box—and do with it what we want, independent of its surrounding boxes (Figure 7).