888888.888888.88""Yb..dP"Yb..8888b..Yb..dP.88b.88....db....8b....d8.88..dP""b8..dP"Y8
88__...88__...88__dP.dP...Yb..8I..Yb.YbdP..88Yb88...dPYb...88b..d88.88.dP...`".`Ybo."
88""...88""...88"Yb..Yb...dP..8I..dY..8P...88.Y88..dP__Yb..88YbdP88.88.Yb......o.`Y8b
88.....888888.88..Yb..YbodP..8888Y"..dP....88..Y8.dP""""Yb.88.YY.88.88..YboodP.8bodP'


88b.88.888888.888888.Yb........dP.dP"Yb..88""Yb.88..dP
88Yb88.88__.....88....Yb..db..dP.dP...Yb.88__dP.88odP.
88.Y88.88"".....88.....YbdPYbdP..Yb...dP.88"Yb..88"Yb.
88..Y8.888888...88......YP..YP....YbodP..88..Yb.88..Yb

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.

Using Wordpress As A Php Framework
Using wordpress as a framework?
2 comments
page 335
Using Your Own Url Shortener
Rewriterule shorten url?
4 comments
page 1190
Post Image The Easy Peasy Way
Finding attached image with post in wordpress?
26 comments
page 1065
My Experience Of Flexx
How to edit flexx theme wordpress?
4 comments
page 1026
Wordpress 25 Exif Fields
Wordpress exif plugin?
12 comments
page 230
Post Image The Easy Peasy Way
List image attachments wordpress?
26 comments
page 1065
Html 5 Gallery
Html 5 photo gallery?
6 comments
page 1305
Post Image The Easy Peasy Way
Wp image attached linkable?
26 comments
page 1065
Post Image The Easy Peasy Way
Wp get first image for post?
26 comments
page 1065
Updating Code Snippets Here
Cacheaboutblank?
no comment
page 1338
Html 5 Gallery
Html5 photo gallery?
6 comments
page 1305
Quick N Dirty Admin Login Screen
Simple login screen css?
no comment
page 128
Six Million Ways To Die Choose One
One million ways to die?
14 comments
page 1128
Updating Code Snippets Here
Interesting wordpress websites?
no comment
page 1338
Post Image The Easy Peasy Way
Attachment images in wordpress single posts?
26 comments
page 1065
Six Million Ways To Die Choose One
Is there an easy way to die?
14 comments
page 1128
Quick N Dirty Replacement Text
Addaction replacement?
no comment
page 122
Html 5 Gallery
Html5 photo gallery?
6 comments
page 1305
Are Child Themes The Best Option
Thesis child theme?
15 comments
page 1262
Charcoal Theme Available For Wordpress
Charcoal wordpress site admin?
2 comments
page 959
Post Image The Easy Peasy Way
Finding attached image with post in wordpress?
26 comments
page 1065
How To Add Sidebars To A Theme
Register sidebar in functionphp?
10 comments
page 1053
Html 5 Gallery
Html5 chat?
6 comments
page 1305
Why I Ditched Disqus
Disqus themes?
5 comments
page 1175
Post Image The Easy Peasy Way
How to use wp get attachment url?
26 comments
page 1065
Post Image The Easy Peasy Way
Finding attached image with post in wordpress?
26 comments
page 1065
What A Body
Whatabodybiz?
11 comments
page 1126
Adding Settings To Admin Pages
Admin add field wordpress?
3 comments
page 793
Wordpress Chat
Wp chat page?
3 comments
page 1308
Html 5 Gallery
Html5 and tabs?
6 comments
page 1305
Post Image The Easy Peasy Way
Finding attached image with post in wordpress?
26 comments
page 1065
Creating Custom Urls
Custom url rewrite wordpress?
6 comments
page 80
  1 query every 1562 seconds, updated 1 seconds ago.
Tuesday, 4pm
 __
(__)
   `

 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?

Tuesday, 12pm
 __
(__)
   `

 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

Tuesday, 12pm
 __
(__)
   `

 Kaspars

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