My site is a Trojan Rabbit — a not-so-subtle Monty Python reference. It seems that in the six-ish months of uninterrupted sketching and creating (I’m not exaggerating. Almost), in between the joy of making the design browser compatible and the heartache of running out of chocolate syrup, I forgot to make the site conform to a grid — something simple in construction, but oh-so-god-damn hard at the end of the design process. This explains, among other things, why my sidebar continuously fills me with the sort of pain I expect a kidney stone will be able to manage in fifty years’ time. I imagine this is how Columbus felt when he realized, from beyond the grave, that he hadn’t discovered a westward path to India after all — but enough bananas to cover up the oversight. I also imagine that, by ending up in the Caribbean, he lost his bet with Vasco de Gama, and is still cleaning his predecessor’s laundry.
My fascination with grids stems from my perfectionism. When things aren’t lined up — but they’re soooo close — some forgotten node of my brain sets itself on fire. The resulting panic causes me to spend half an hour in my CSS just hoping that there’s a single number to change that will make things better. What I discover, instead, is the reason for half of America’s car accidents wrapped up in the jumble of my styling. That’s why I ask you, the future police officers and circus bears of America, to grid before you code. And put that banana down.
Grids and the golden ratio
The golden ratio is a relationship between numbers that, when embodied in art, architecture, or even design, creates a naturally pleasing structure. As immortalized by The Da Vinci Code, the golden ratio can be embodied by the number phi, which can be represented numerically as 1.618 (and then some). When applied to a layout, phi is the ratio between two layout elements — usually columns. Here follows a diagram — and an explanation:
Using a nifty tool called a “Phiculator”, I started with the width of Column A, 150 PX. Plugging that number into the Phiculator, I received the ideal with of Column B, 92.7 PX. (you can round if you aren’t particularly keen on using decimals). Repeating the process can help create widths for many columns to come that correspond with the golden ratio.
Even after the columns are in place, there’s still work to be done. Now that the vertical alignment of your page has been completed, it is still necessary to consider the horizontal alignment. This is where the actual process of using a grid enters play. The process — which I can’t demonstrate, seeing as I can barely do it myself — involves a handy (but not necessary) grid image to use as a background, a smattering of relative font-size:; and line-height:; (using ems ideally, but percentages may work), and all of the fun you’ve ever wanted in life, short of being shot from an enormous cannon.
I’m actually taking this way too far. Creating a grid-based layout is not as hard as it seems; I only choose to exemplify that viewpoint because I haven’t done it successfully yet — if you can call the fifteen minutes I worked on it successful. Fortunately for you, Smashing Magazine has created a detailed list of resources for those of you who are about to step into the abyss (I kid!). The list encompasses work by Khoi Vinh and Mark Boulton, whose excellent grid tutorials continue to inspire me, in my sorrow.
Notes
The golden ratio and a grid-based design can be done independently of one another; what is important for both to function, however, is consistency. It takes time to adjust to both the golden ratio and a grid-based design, but the beauty of both is evident almost immediately. This design theory, my dearies, is nature’s work, and nature (unlike our good friend Columbus) never loses.
The hardest work involved in creating a grid layout is planning and calculating. All this brooding is necessary for two reasons — ideally, your grid will be the paragon of future grid layouts to come, who will look to your design with starry eyes and whispered voices; on the flip side, you could always become an evil mathematician, gone mad from the struggle! (OK, I’ll stop!) Just a thought though…
Read 2 comments (Leave a comment?)
Kilian Valkhof said:
Very nice article. A solid grid is far more important than using the golden ratio. one 400px column and two 200px columns looks equally nice. In fact I believe there has been research that suggested that people liked the above example more than examples using the golden ratio. It’s use has also been debunked for a good number of renaissance paintings.
If you had to choose (or indeed fear madness, a very real danger when working with phi. Which is actually (1+SQRT(5))/2 :P ), leave the golden ratio to the ferns and sea shells :P “regular” grids are easier to work with.
Posted on April 28, 2007 2:14 PM; Permalink
Ranjani said:
Definitely, but I was taking my tips from Snook. It’s a lot easier for me to just make random column sizes, and I admit, making phi columns conform to a grid would be pretty scary, since most of the numbers I ended up with don’t have a common factor, other than 1, which doesn’t help any.
Suddenly I want to play with MathML :D
Posted on April 29, 2007 1:31 PM; Permalink