February 11, 2008

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?

Blog-proportions

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.



Photo gallery html5?
6 comments on page 1305

I use wpunlimited theme?
3 comments on page 1141

Slidebar image gallery html5?
4 comments on page 1053

Html5 photo gallery code?
6 comments on page 1305

Wpgetattachment?
25 comments on page 1065

How do you style polldaddy css?
2 comments on page 42

Disqus themes?
7 comments on page 1175

Css log in screend?
no comment on page 128

Is wordpress a framework for php?
2 comments on page 335

Wordpress featured images?
25 comments on page 1065

Wordpress featured images?
25 comments on page 1065

Disqus add image in comment?
7 comments on page 1175

Wpcache?
9 comments on page 1310

Funny wordpress plugins?
2 comments on page 1376

Css login screen?
no comment on page 128

Photoshop framework?
4 comments on page 296

Wpfun?
2 comments on page 1376

Wordpress fun plugins?
2 comments on page 1376

Get alll images of post wordpress?
25 comments on page 1065

Gallery html5?
6 comments on page 1305

Customisable short url?
4 comments on page 1190

Wordpress featuredimage?
25 comments on page 1065

Wp multiple sites?
one comment on page 1367

Wpupdatepost not working?
no comment on page 122

Html5 photo gallery code?
6 comments on page 1305

Html5 photo gallery code?
6 comments on page 1305

Flexx theme review?
4 comments on page 1026

Css login screen?
no comment on page 128

Show image in post?
25 comments on page 1065

Html5 image gallery?
6 comments on page 1305

Wordpress get post image?
25 comments on page 1065

Html 5 gallery?
6 comments on page 1305

Wpgetattachmentimagesrc?
25 comments on page 1065

Getimagefrompost resize?
25 comments on page 1065

Fun wordpress?
2 comments on page 1376

Wordpress workflow?
3 comments on page 1226

Easy peasy images featured image?
25 comments on page 1065

Google charts tinymce plugin?
7 comments on page 71

Html5 photo gallery code?
6 comments on page 1305

Simple css login screeen?
no comment on page 128

Wp flexx?
4 comments on page 1026

Create a div in div wp?
4 comments on page 1053
  every 1724s, 1s ago, in 0.03s.
 __
(__)
   `
 Ptah Dunbar

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?

 __
(__)
   `
 Andrew Rickmann

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

 __
(__)
   `
 Kaspars

Hi, Andrew. Do you know about the Golder Ratio or Golden Section? It have worked very well for me.


0.01s