views:

147

answers:

7

Hi,

I am interested what column widths you would suggest for two-column and three-column websites.

For example if we consider two-column layout (total width 1000px), some possible widths would be: 900-100, 800-200, 750-250, 700-300, 600-400. Which layout is best for usability, possible ad placements, widget integration?

+1  A: 

use Golden Ratio

http://goldenratiocalculator.com/

Golden proportion is very natural to human eye

dfens
+1  A: 

960px - http://960.gs

It's the best number to divide into any available columns and that site has all sorts of guides and grids for helping you make the layout.

It's also as wide as you want to get and still fit in a 1024 wide screen - 1000px will cause horizontal scrollbars.

I'd also advise against a % based width as it's near impossible to control layout.

DCD
A: 

382px and 618px.

Kyle Sevenoaks
+1  A: 

This really depends on what web site and what particular function on each col you are going to implement. But asking for usability, most probably I don't use fixed width cols. Setting cols with percentage width (and yield a total 90%+) would mostly utilize reader's screen. You can probably start from 20% - 60% - 20% for 3-col and 30% - 70% for 2-col

xandy
Stress on depends. Also, @keks: if you wish to include ads, I suggest you use a separate column for it, on the right side.
ANeves
A: 

I would suggest looking at this pdf: http://www.subtraction.com/pics/0703/grids_are_good.pdf

If gives a bit of history of grid systems and then goes through the process of building a grid based on an ad unit. It worth a look.

matpol
A: 

960 px - total width. I think it's the best standard. Then you can try 160+800 or 800+160

DaDa
A: 

Use the 960 grid as DCD says above.

Easy to work with from mock-ups in photoshop/fireworks to including in your html. You'll get a layout quickly once you familiar with the simple concepts of the grid "framework". It takes care of the margin/padding stuff for you.

Many top site designs use this grid.

As for you questions specifically:

960px width (using 960 grid): container_12 and inside of that include a 9:3 or 10:2 grid layout for 2 columns OR container_16 inside of that include 3:9:4 grid layout for 3 columns

But there are no hard rules on this. Make it work depending on your context & use.

If you provide more info on what you intend doing, I could give you more specific advise :)

ForerMedia