Website column width

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

For example if we con开发者_如何学编程sider 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?

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.

use Golden Ratio

http://goldenratiocalculator.com/

Golden proportion is very natural to human eye

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

382px and 618px.

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.

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

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 :)

• Go with 960px width. 960 pixels is good in 800x600, 1024x768, and 1280x960 monitors.

• If you want to support mobile devices (smaller resolutions) then use a fluid layout and use Media Queries for better control.

• Avoid considering ALL screen resolutions, because it will waste your time.

• Use a tracker, e.g., Google Analytics to track your users' browser window sizes, so you can determine what usually are your audiences' screen resolution.

In relation to Usability, three of the most important factors in terms of screen resolutions, at least from my experience are:

• Avoid leaving a horizontal scrollbar.
• Avoid too small font size (very hard to read).
• Avoid fixed font sizes.