Grid Systems in Web Design

"A foolish consistency is the hobgoblin of little minds..." - Ralph Waldo Emerson.

I admit I believe that it's always good to challenge conventional wisdom. "Thinking Outside the Grid" puts forth the idea that we as designers and developers must learn to work outside of the grid system that was imposed on us by the limitations of HTML tables. Yet, I think that grids will be with us for a long time to come for several reasons.

1. Grids are much older than the web.

In fact, grids are as old as printing. Look at the layout of a newspaper, book, magazine or research paper and you can draw a simple grid around all of the content. The reason why is obvious. A grid is an effective way to organize content. Contrary to the author's argument, we don't put content in grids because we're limited by HTML tables, we put content in HTML tables because it's by far the easiest way to lay out a grid.

2. CSS is still quite limited.

The author contends that the CSS box model, along with absolute positioning allows you flexibility to create a more open, free flowing layout. This idea isn't exactly new. See if you can find a few web design books published in the late 90s when "theme" designs were all the rage. We had some around the iMarc offices years ago, though they've been long since purged from our bookshelves. The web was a brand new medium which was going to cause a paradigm shift in how everything was done. The old rules weren't applicable to the web. Designers were eager to apply a new look and feel to the new medium and a brief design free for all ensued. Buttons got replaced by theme related icons. Designers tried putting main navigation, sub navigation, content, and advertising everywhere. Many designers abandoned the rigid grid layouts, using deeply nested tables and clear images to shim content right, left, up, or down.

While in my 5 ½ years at iMarc, we've done our best to limit this practice, we've hosted and maintained a few sites that were originally designed by others who used these techniques extensively. I can tell you from personal experience that these sites can be a nightmare to work on. But the question is, does CSS change this? I contend that while CSS allows us to do some creative things with less code, it's still quite limited. The CSS box model is still a box; 4 sides with 90 degree corners. The box model doesn't allow for circles, ovals, triangles, trapezoids, stars, etc. What if I want to put my content into a circle? What if I want to lay it out like a pie chart? It can be done, but you still have to rely on the same old hacks that we used before CSS was widely supported.

3. People's expectations have been established.

After a period of time in which all sorts of creative to crazy design ideas were tried, the design principles that won out weren't all that different than what designers have been doing in the print industry. A great deal of time and energy has been devoted to figuring out how people use web sites. With a little digging, you can find statistics on where a user looks to find a home page link, company logo, product search, contact information, etc. A user's subjective opinion of a site's value is often closely related to how easy, or difficult, it is to find what they want. Users don't want to navigate a maze, they want to go straight to the cheese. The shorter the user's learning curve, the better.

Users come to a web site with certain preconceived notions of how it will work. The designer risks alienating the sites users if she deviates too far from the user's expectations. If 87% of web users expect the company logo to occupy the top, left corner of the page, the designer will tend to put it there. Web design becomes a self fulfilling prophecy in a sense, as expectations drive design, which in turn, reinforces expectations. User expectations fit well within the grid design layout used today. Major web sites won't likely stray too far from the status quo any time soon.