Design: Getting Back to the Grid

Linda never thought she'd live long enough to see a magazine layout applied to Web design. She talks about the 960 Grid system in this article.

Grid Layouts and Cave Paintings

Sometimes, when I write articles about Web design, I feel very, very old – almost as old as a cave painting.

Back when I was a production manager for a business magazine on the Gulf Coast in Mississippi, I was using wax and linotype. That was well before computers. Then, we were grilled on the grid – the layout that made sense for newspaper, magazines and any other print medium.

But, with computers came layout software, and the learning curve was excruciating. Still, it was better to learn the software than lose your job to someone younger (and who would cost less to the boss). I think I was about age 35 at the time. I would have lost my job to a nineteen-year-old with pimples on his or her face.

Then, came Web pages, along with online sales. No one admitted, at least publicly, that Web design was conducive to a grid system. Oh, we tried...and tables were the result.

But, nearly all of the presentational attributes of HTML documents were contained within HTML markup; all font colours, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within HTML code, and the application still did not seem to work when applied to various browsers and operating systems.

Additionally, tables remain a horrid way to create an accessible and usable Web site.

Enter CSS

The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996. While I – and a million other Web designers – swung immediately to CSS in its simplest form, browsers and operating systems still refused to cooperate. From the beginning, all CSS did was create more confusion in interpretation of the code – what you saw in code was not what you'd get in the final design.

It wasn't until about three years later – about 2000 – that any Web browser achieved near-full implementation of either the CSS1 or CSS2 implementation. According to Wikipedia (I have to rely on something here, as my memory is foggy):

When later 'version 5' browsers began to offer a fairly full implementation of CSS, they were still incorrect in certain areas and were fraught with inconsistencies, bugs and other quirks. The proliferation of such CSS-related inconsistencies and even the variation in feature support has made it difficult for designers to achieve a consistent appearance across platforms. Some authors resorted to workarounds such as CSS hacks and CSS filters to obtain consistent results across web browsers and platforms.

Oh, right – it's all coming back to me now. The hacks. The workarounds. The misery.

I remember when (but not exactly when) Rachel Andrew wrote an article for DMX, entitled, "Many Boxes: a CSS Layout." I downloaded that article and tried to recreate a Web site. It took me a week and three bottles of Port, but I did it (I never once said I was a programmer in my resume). Still, this attempt at grids was not the perfect solution for some Web browsers.

Then, in 2005, David Shea came up with an article that inspired designers to try and make sense of browser incompatibility and grid design yet again. If that name doesn't ring a bell, Dave Shea is a Canadian Web designer and co-author (with Molly Holzschlag) of The Zen of CSS Design: Visual Enlightenment for the Web (which led to the development of the css Zen Garden Web site).  It was time to start over, to try and make sense of browser incompatibility, varying operating system snafus and CSS (with a touch of tables).

About four years before Shea's article, I gave up on Web design and went back to college to obtain my undergraduate degree in visual communications (where the GREAT GRID was emphasized – still) and then on to earn my masters in history. I was as far afield from Web design as I could get – and very happy about it, too.