The grid system is a strong, traditional design tool for presentation of visual information. Based on a table armature of regular divisions, grid systems allow for the consistent, legible, and visually pleasing presentation of graphics and text.
Grid systems are not for everyone, nor are they appropriate to every design. Used well, a grid can supply boldness and readability to a design; used poorly or dogmatically, grids can make a product staid, atomized and confusing.
Traditionally, grids have been used in areas for which media size and scale are fixed: books, magazines, posters and newspapers. CSS has been slowly taking on the complex task of supporting grids for the web through the development of the Grid Positioning and Template Layout Module. As of this writing, only IE10 supports these proposals, which are in “working draft” format and still subject to change.
Designers frustrated with the lack of grid support on the web have typically taken one of three routes as their solution:
- Especially in the first decade of the web (but still, sadly, continuing) designers have used
<table>markup in an attempt to position text and graphics on a page. As we have discussed, this approach is non-semantic (tables should only ever be used for tabular data) and extremely difficult to modify. - In the latter half of the web’s development, absolutely positioned elements, usually divs, have been used to arrange content across a grid. These also have their drawbacks: they are non-semantic, difficult to adjust, and fixed.
- More recently, JavaScript and CSS frameworks such as the 960 Grid System, Blueprint, YUI and YAML have attempted to create simplified CSS systems that rely on an implied grid. While they are all good tools in the hands of professionals, they have drawbacks of their own:
- Like DreamWeaver and other tools, they all tend to separate the user from the code, to the point that design questions become “What button do I push to make things look this way?” rather than asking “What methods can I use to achieve this effect/layout?”
- Because designers are using the same tool, rather than relying on an understanding of underlying principles, the results tend to come out looking somewhat similar. That’s not to say that they have to – a well-designed grid template has enough possibilities to accept a great many different designs – only that the tendency is there. Resultant designs also tend to be created that exist within the limited solution-space and abilities of the tool, rather than from the full range of design possibilities.
- Like DreamWeaver, the tools tend to produce non-semantic, difficult-to-understand code.
- Again like DreamWeaver, reliance on a tool that produces code which is only usable in the presence of that tool is, generally speaking, a bad idea. Take away an understanding of 960 Grid code, for instance, and the markup and CSS no longer make sense.
For rapid prototyping or the very quick creation of templates, CSS frameworks are a godsend, but I would leave them until you have a strong understanding of CSS itself.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
