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.
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. 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.
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.
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.
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.
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.
.:: by Molly E. Holzschlag | read the article