Divine ProportionsFiled Under: Themery
I’ve been focussing a lot on themes over the past week, trying to understand what is good about them, and what is bad, and one of the things that I have been trying to decide is what the ideal proportions are for both content and sidebars.
The size of themes and of sidebars has changed quite a bit, particular with the advent of 125 ads and tabbed sidebars, and there now seems to be quite a wide variety of different proportions.
My first feeling was that sidebar, with padding or borders, should equal 220px, roughly 22% of the modern width. Why? simply because this is the amount added to make the differences between an 770px width and 990px width.
The problem comes when you add in graphics such as drop shadows. Say you use 15px on either side of the content for those, is it the main content that should be reduced, or the sidebars, or all in equal proportion.
Then we come to double with sidebars; should a double width sidebar actually be double the width of the single sidebar, or less? is 44% of the space taken up in a sidebar appropriate?
Update: A check of 15 blogs today suggests that not only is there no consistent formula, but that it tends to vary even between themes by the same designer.
The image shows the first five two column themes, and the variation is even greater for three column themes.
For, what I would consider, relatively standard sized two column themes the main content varies from 480, 520, 550, 538, 612, 755, and 760 pixels.
Sidebars come in flavours of 132, 135, 190, 200, 210, 225, 253, 260, 280, 300, 379 pixels.
I was hoping there would be a consistency about sidebar width, but it seems that the only consistency is a lack thereof.
I still believe there is a perfect proportion for a theme, perhaps it just remains to be found.
- Permalink
- Andrew Rickmann
- 11 Feb 2008 11:03 PM
- Comments (3)
February 12th, 2008 at 12:09 pm
Hi, Andrew. Do you know about the Golder Ratio or Golden Section? It have worked very well for me.
February 12th, 2008 at 12:44 pm
Hi Kaspars,
I am familar with it. I used it in a design a few years ago with high hopes but it never really felt right.
To use it on a 990px two column layout it would use a large column of 612 pixels and a small of 378 pixels (this includes the margins). Some of the ranges above do fit into these, more or less.
I will try it again in the theme I am developing at the moment, it may work out better for me this time.
There is also a handy calculator here:
http://www.thismanslife.co.uk/main.asp?contentid=phiculator
February 12th, 2008 at 4:25 pm
interesting read. I’d like to add that sidebars vary by its use. It has different meanings for different people. Some use it to try out the latest widget (which’ll lead to bigger sidebars), while others might just have to fit ads conforming to IAB standards (which’ll lead to smaller sidebars).
Of course there is more to this equation but just by understanding it’s use, maybe you can catogorize them under types and then it might not vary soo much. see where I’m going?