Optimum web-page width?

[nevdev]

I'm confused about web-page width. According to the w3schools info on browser stats for January 2006, about 20% of people are using 800x600 resolution on their displays/monitors, about 47% are using 1024x768, and about 17% are using higher resolutions. How do I apply this information in designing the size of web pages?

Say I want to create a design that's going to be comfortably viewable at a screen resolution of 800x600 (since tons of people are still using it). Does this simply mean I have to make sure that the main visible content is no wider than 800 pixels?

But hang on - isn't there browser 'chrome' - parts of the browser and OS GUI - to take into consideration as well? So presumably this reduces it some more? Let's say I leave a 25-pixel margin either side for that stuff - that leaves 750px width.

Am I therefore right in thinking that my designs should collapse to no narrower than 750px (no horizontal scroll bars before you hit that width)? And to accommodate those with wider screens, I should somehow impose some sort of maximum width (what width?).

I say I'm confused because if I mock up a design that's forced to fit inside those 750px width dimensions, it looks tiny, and some of my other web pages certainly don't fit (as neither do several "big" websites)... Or have I missed something here?

[fwordboy]

Personally, I make sites no wider than 760 pixels, as people with higher resolutions than 1024*768 often may not have the browser window maximised.

There is also a school of thought for making webpages liquid where possible i.e. they get wider and thinner depending on the browser window. This can be hard to achieve in my experience and even when you do implement a liqud design you will need to use a maximum width and a minimum width to force your design to behave.

The third way, is to create similar yet different layouts for different resolutions/browser window sizes, that are triggered by JavaScript. A google search for 'resolution dependent layout' will bring about some interesting reading for you.

[nevdev]

Well, it all sounds right! I notice that the BBC news website is still properly viewable as small as 760px wide, and I see that this website (webmasterworld) is. If I use screen guides to check various sites, I notice that quite a few aren't (eg, Apple, w3schools). Maybe they allow the site to be a bit wider in favour of the bigger number of people using larger screens, and think that the 20% viewing at 800x600 can cope with a little horizontal scrolling? Or are they identifying my setup and compensating for it using the js methods you mention?

But anyway I take it that 760px is the "golden number", in that a website should still be properly viewable as small as 760px wide. If so, that's what I'll use! Thanks!

(Perhaps there are similar values for minimum width, now that more people are getting widecreen displays?)

[tbear]

I generally use percentages, instead of dimensions (just like this site), to get a liquid layout. I don't have problems with the design holding together...

[DrDoc]

...unless I view it on my 1600×1200 21" screen :)
Then you can fit an entire book on one line.

[nevdev]

Funny you should say that - it's because I just got a 23-inch display at 1920x1200 that I started thinking about this whole subject. It's forced me to think of ways that I can ensure that designs won't look wrong when the browser/res is very small or very large.

Of course I can see how percentages can be useful here. But are there (could there be) design scenarios where using percentages couldn't guarantee that a design will still be properly viewable when it is displayed as small as 760px wide?

[tedster]

Sure - and sometimes a surprise or two in this area.

I use Opera and it has a feature you can turn on that shows the actual size of the window in pixels. I drag the window edge to resize it with my test page in it, watching for changes in display or the appearance of the horizontal scrollbar. The window size numbers in the browser chrome tell me exactly what window dimension trips the problem.