The monitor I'm using is a 22inch wide screen. It's huge. I operate at a resolution of 1680x1050. This is not ideal for web design. Proof of that is my webpage. I need to redesign it a bit and the main thing i wanna tackle is the size of the page. What is the average viewers screen size and resolution? What is the ideal pixel size of a web page so that the average user can enjoy what they see without any unnecessary scrolling?

you want to design to the lowest common denominator, not the mean.

 

As such, an 800x600 canvas is best.

 

To design for this size, a width of 740px is the accepted maximum, and the "above the fold" area is about 450px

Or you could use liquid layouts which adapt to the availible screen estate.

Note that optimal line lengths are between 60-70 characters so you want to avoid getting lines longer than that.

so you could do something along the lines of:

 

a wrapper box of width 95%

containing

a second wrapper of width:100%; min-width: 740px; max-width: 1000px;

 

would that work? so it scales between 740 and 1000px ?

okay, answer: yes it would...

 

attached HTML file with working version (scales between 740px and 1000px depending on browser size... no JS)

 

i might actually use that before too long..

text.html

okay, very sorry for triple post, but its the only way to keep it well laid out...

 

it doesn't need the outer wrapper... just setting it to have a min and max width works. However, this isnt tested in IE6/7

IE6 won't use min-* max-*, but IE7 will.

 

For IE versions before IE7 use expressions to emulate the same effect.

That's a neat bit of coding, Penguin. Thanks.

 

Thomas, what do you mean by expressions, or are you referring to IE6 hacks? *is clueless*

using an IE < 6 hack, you could set the width to always be 740px

Here's some reads on expressions in IE and how to use them to emulate min-*/max-*

 

http://www.svendtofte.com/code/max_width_in_ie/

http://www.gunlaug.no/contents/wd_additions_14.html

Great info. Thanks!