Wow, I'm not sure how I managed to miss the boat on this one, but I guess "grids" are kind of a big deal with Web design these days. (At least in certain circles, anyway.) Who knew?
I did, of course, know about grids in the context of print layout, but in the past, any time I picked up a book on the subject, I was immediately overwhelmed by page after page of boring, academic diagrams. And each time, I would carefully but quickly put the book right back down where I found it. I find that when I'm designing something, I prefer to focus on being creative with the organization of content, the color schemes, fit and finish, etc. My appetite for math in this context is meager at best. However, all that said, I really had no idea what I was missing.
Over the last week, while researching an unrelated topic (Flash & DHTML navigation widgets) I kept coming across grids for some reason; eventually my curiosity overruled my distaste for numbers, and I actually started reading about it. Well, in fact, it's all very easy and simple. I don't know what I was afraid of.
Worth Reading:
From Subtraction.com (blog/web site of Khoi Vinh, design director at nytimes.com)
"Deeper" Reading: (Meaning it looked just TOO boring and I didn't actually read it, but it does look like one of those things one should really read if they want to be well-informed)
Handy Tools:
- Grid Calculator - Create your perfect grid with this easy to use web gui (I love this tool)
- ctrl+shift+g - This little tidbit of javascript will display a grid as the background for your HTML, so you can see how you're doing... (I never used it, but it seems interesting)
CSS Frameworks for Grids:
- BluePrintCSS
A lightweight framework put together by Olav Bjorkoy, a student of some sort, from Norway, apparently. Anyway, the framework is lightweight and easy to use, but relatively untested so far.
- Yahoo! YUI Grids
Still lightweight, extensively tested, rock solid - but much more complex to implement. Created by Nate Koechley at Yahoo!. Besides being far more complicated to implement, my biggest problem with it is that the gutters between columns are not a predictable, uniform size. Which sort of destroys the whole thing, to my mind. On the other hand, the Reset, Base, and Fonts CSS components look absolutely terrific. I'm thinking about using the Yahoo! Reset, Base, and Fonts CSS components in conjunction with the BluePrintCSS framework. Hopefully that's not illegal or anything...
Anyway, today was my first opportunity to actually implement any of this in a real-world design. Nothing terribly complex, and certainly nothing groundbreaking, but I do like the way it turned out, and I think using the grid-system-philosophy-thingie really did improve the design considerably over what it would have otherwise been.
http://www.wsna.org/library/2007.appalachiastrike/
As I said, nothing earthshattering, but I like the result! Obviously it won't work for everything, but I'm glad I've added it to my bag of tricks, and I'll definitely be using it again soon.