CSS Grids, the new Tables?
Wed 11/Nov/2009
Back to Journal
Tags
Art CGI CSS CSS3 Graphic Design How-to Illustration Infographics Motion Music Opinion Photography Site Social Typography Web Design
Date
There’s a lot of talk these days about using grids for your web design. Excellent! Grids are pretty much the fundamentals of a solid design. Any and all initiatives towards more well designed sites should be applauded. The way these grids are being implemented however, is throwing web design a decade back in evolution.
Let’s start from the beginning. Or at least in 1999. CSS was a fairly new concept and the accepted way to layout your page was through the use of tables. To make your menu stay to the left, your body text align with the header and your page stay centered (especially vertically), tables was the way to go.
The downsides of this soon became apparent, especially if you wanted to move things around a bit; the design was more or less locked into the HTML. The logo is in the top right cell, contents cover four columns, etc, etc. Not to mention all the superfluous mark-up.
Since then things have progressed. Any professional web designer would agree upon the importance of separating information (HTML) and presentation (CSS), and of using semantically correct HTML and class names.
Looking at some of the most common CSS Grid tools – Blueprint, 960 Grid System, Grid Designer, for instance – and how they’re being used, it feels a bit like traveling back in time.
- The result often has a severe case of divitis
- The class names are anything but semantic (class="grid_6"? What if I want this information to cover 8 columns?)
- The site is required to be used in one layout/theme only
- And what if I want to use the same HTML (but different CSS of course) for my iPhone visitors?
Don’t get me wrong. The fact that web sites become more and more well designed is great. As are tools that make a sometimes unintelligible process more accessible to the common user. But locking information into a pre-defined layout is not the way to go. It took us long to get where we are today – move forwards, not backwards.