Welcome to WebmasterWorld Guest from 54.210.61.41

Forum Moderators: open

Message Too Old, No Replies

Optimum web-page width?

     
1:20 am on Mar 16, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 27, 2005
posts:68
votes: 0


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?

12:21 pm on Mar 16, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 23, 2003
posts:165
votes: 0


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.

5:00 pm on Mar 16, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 27, 2005
posts:68
votes: 0


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

7:04 pm on Mar 16, 2006 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Feb 10, 2002
posts:937
votes: 4


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...
10:05 pm on Mar 16, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


...unless I view it on my 16001200 21" screen :)
Then you can fit an entire book on one line.
10:22 pm on Mar 16, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 27, 2005
posts:68
votes: 0


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?

11:01 pm on Mar 16, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members