Flying into my home city of Tucson, Arizona late one night in November, I was impressed by how rigid a grid the city’s layout is. Tucson is one of America’s planned cities, and from the sky, it’s easy to see that Tucson’s designers succeeded in creating a city in which everything is laid out according to a precise plan (figure 1).
Figure 1
I was returning home from London, which in contrast is far from a rigid grid. London is spirals, circles, tangets, and is often seemingly spontaneous in its design (figure 2).
Figure 2
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.
Sense and the city#section2
If we extend the urban-planning metaphor to web design, there are very interesting parallels. Grid-based design can be extraordinarily useful in creating sites that are predictable, easily navigated, and visually appealing. Grids are really good at helping designers to plan where things go, and easy for site visitors to use (figure 3).
Figure 3: Ryan Brill
On the plus side, Tucson certainly is easy to get around in; you needn’t have much more than a basic sense of direction or a street map. Residents provide directions to their homes by giving cues based on the grid: “I’m at the southwest corner of Campbell Avenue and Prince Road.” Public roadways and transportation typically run north to south or east to west, making it easy to navigate the town.
On the other hand, Tucson’s designers planned for only a certain amount of growth, and this has caused innumerable problems in maintaining the city’s ease of navigation and usability as the city grew beyond its planned limits. Furthermore, the constraints of Tucson’s grid do not encourage the emergence of alternative neighborhoods and communities. Many residents of Tucson will agree that the city lacks a vibrant center—or many unique communities—as a result, and that when those isolated spots do exist, they’re easy to get to, but people aren’t motivated to get out and find them.
London, unlike Tucson, is a maze. I know Londoners who carry around a London A-Z guidebook to help them navigate! The city’s transportation system is so challenging that would-be cab drivers must pass a test demonstrating that they possess “The Knowledge” in order to drive traditional black cabs. The city’s organic growth hasn’t exactly made it the easiest place to navigate.
But in London, wonderful enclaves and interesting areas have emerged and neighborhoods with distinct flavor exist everywhere—and it can certainly be said that there aren’t just one or two central areas of cultural, community interests, but many. While navigation is perhaps more difficult, there are more alternatives, and people are therefore more motivated and able to become involved in the city’s offerings.
When examining deconstructed and spontaneous designs, the metaphor persists. How are people to navigate spirals and winding alleyways with ease? On the other hand, compelling visual work can result from breaking out of the rigid system that the Web’s design and development environment has, to date, retained. In figure 4, you can easily see how breaking down the rigid confines of grid layouts challenges designers to maintain ease of use while creating designs that look different from what we’re so accustomed to seeing.
Figure 4: AIGA Los Angeles
Coding the grid fantastic#section3
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.
Figure 5: k10k
Table layouts are great for grid designs. The markup itself reproduces a specific grid, and the tendency is for us to just fill up the boxes with the images, type, and interface elements that make up our design (figure 6). If we do create a deconstructed or spontaneous design with any visual complexity, we have to use a lot of images within the document to achieve the results, making documents weighty and overly complicating the markup.
Figure 6: Weightshift
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.
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).
Figure 7
We can use a position property or float the box, and we can add lightweight images to element backgrounds. So while we’re still working with boxes, we can present those boxes in numerous visual as well as technically efficient ways. This includes grids, but also allows far more efficient creation of non-grid designs, as you can see in Dave Shea’s Blood Lust, one of the designs he created for the CSS Zen Garden (figure 8).
Figure 8: CSS Zen Garden: Blood Lust
Figure 9 shows the boxes that created the deconstructed grid design for Blood Lust, again demonstrating the way CSS allows us to create deconstructed grids using boxes that are related to, but independent of, one another.
Figure 9
As long as we understand what we can do to or with a box, our ability to break out of the underlying grid that’s held us captive for so long becomes far clearer. Consider this design (figure 10), which can be considered highly deconstructed, even spontaneous:
And the underlying boxes positioned using CSS:
Figure 11
Not only has the underlying markup become leaner, but the CSS is downright easy for any designer familiar with CSS layout. Yet, the presentation on-screen is unusual and rich, and shows that a non-grid design can be compelling and usable, too.
Into the great wide open#section4
The beauty and challenge of working with modern layouts is that now we have options. With CSS, we have a means of creating manageable, lightweight, visually rich designs that can be grid designs if we want them to be. But we can also easily deconstruct the grid or dispense with it entirely.
This opens up a world of opportunity for the contemporary web designer. But the remaining challenge is to think in terms of these options rather than falling back on grid designs just because they’re familiar.
For those of us coming out of years of table-based layouts, the challenge is an especially difficult one. For many veteran web designers, changing the way we think about presenting our content without tables means shifting out of the underlying system we used for so long. For some, this comes easily, but for the vast majority of us, it’s difficult to make the leap. Part of the answer lies in educating ourselves about the way CSS and browser models work, but part of the answer lies in being willing to leave conventions behind.
There is a new kid on the block, and her name is “I’ve never designed with a table in my career.” To her, our old ways often seem strange and confining, and it is within this generation that we will most likely see more departures from what design conventions have emerged in the past decade.
The web is maturing, our approaches to it changing, our opportunities for innovation and creativity more apparent than ever before. We’re not limited to a planned city; we can create unique designs and have them work well. As a combined force, the empowered veteran and today’s spontaneous youth inspire a provocative notion that the way the web looks today is nothing like the way it’s going to look tomorrow. And for the most part, I’m sure you’ll agree that’s a very good thing.
Related reading#section5
The author would like to credit Mark Boulton’s grid-system articles and the book Making
and Breaking the Grid by Timothy Samara, Rockport Publishers, 2002.
Being a native Arizonan I appreciated your comparison of Tucson’s city street grid to the concentric circles and spokes of London’s roadways. However, I’m not sure that you can definitely tie a city grid-plan to its quality and quantity of cultural relevance. I’m guessing here but I would predict that London’s 2000+ years of history are the determining factor in its cultural vibrancy as well as the fact that London was the epicenter for the one of the most expansive colonial empires the world has yet seen.
In comparison Tucson has existed in one continuous form or another for roughly 300 years. Not a very long time in the grand scheme of micro-cultures.
I would not disagree that the city-grid may play a part in this cultural development (or lack there-of) but it should probably not be ascertained as the central foundation of the issue.