Various techniques for dealing with different browser sizes

Another option is to use Javascript to determine the viewable width of the users screen and then show/hide content.  You can show ads on the right side if the user has greater than 800 pixels, but this can become a problem if they have the window sized to 801 and you add 200 pixels of content.  

i'm curious - why would you want your website to display at 425 pixels wide?  a pretty normal minimum resolution in today's world is 800px (some monitors are still down at 640).  What is the point of coding it 425 px wide?

I was wondering that myself.  

For what it's worth (not much), here are some stats on users browser settings (January 2004, source - www.w3schools.com/browsers/browsers_stats.asp):

640x480  1%
800x600  37%
1024x768  47%
higher  10%

16mil colors  65%
64k colors  31%
lower  4%

JavaScript turned on  92%
JavaScript turned off  8%

thanks humeniuk for proving my point!  :o)    - i knew the stats for 640 and stuff were low - i didnt know they were that low!  As a developer, i gotta say, its nice that the majority of people use a resolution of at least 1024x768!

Heh, a news page trying to fit everything into 450px O_o

LOL.  Well there is another key thing to think about with your resolution decisions.  Your Target Audience.  If you are building a games site or a site about pop music, you can expect the majority to have larger resolutions since the audience is most likely younger.  However, if you are building a site that is retirmement or investment related or about classical music, your audience is going to be older and they tend to have the larger resolutions.  

In my office age is a big determining factor.  When we are developing our site www.investmentwizard.com, everyone looking at it that is 45+ years old say they cannot see it at 1024 or greater, likewise all the younger people in 20's and early 30's cannot stand looking at it in 800.  Everyone in between can go either way.  

It is still a good thought to design for 800 and make it expand when in larger resolutions.  Nothing will annoy people at 800 more than a scroll bar.

Point is, determine who will be looking and then write for them, but it is best to err on the smaller resolution side.

PK

Good points by plaleda & CleffedUp.  All valid considerations.  The problem is, if you want to be 100% inclusive (if that's even possible), you're going to end up with a pretty bland site.  To me, all of these considerations makes the CSS solution, aka Zyloch 2 (not as cool a having a star named after you, but not bad), look even better, though CSS isn't universally supported either.

<<  Until the browsers actually comply with all the W3C specs we will have issues like this.  So as a developer, you must decide what is an acceptable error rate in your code.  >>
Amen.  And W3C specs are a good place for a developer to start (or at least end up).

<<  MOST often, the discrepancies are between IE and everyone else  >>
This is a big part of the problem, because about 3 in 4 people use some flavor of IE, so Microsoft doesn't feel the need to think like everybody else.  Standardization doesn't help a monopoly.

<<  span {position:absolute;top:5px;_top:6px;} The second one is IE only. Note that it has to be in this order so the second one will replace the first one for IE.  >>
Good tip.  Gotta use that.

About the 450 pxs min:

If we consider that about 40% of the web users have 800 pixels screen width (thanks humeniuk for the stats ;) is a must to have support for it.
When we discuss 800 width monitor resolution we need to focus on the browsers display area wich will normally be (in a maximized window) somewhere between 770 and 780 pxs.
But how many users will browse the net in a maximized window? Any stats for that?

In my experience many people will browse the page in the size it appeared. usually browsers (specially IE) have their way to display the window smaller than we would want them to and I have to keep maximizing the window.
So I figure, in a news site that will be browsed by many different age groups (with a plus on the 30+ range) a very professional layout will have to support not only the 770 width but also the smaller variations that come from windows that are not maximized.

I myself try to support 500 or 550 pxs, but for this Q I thought I could push it down to 450.

>>The problem is, if you want to be 100% inclusive (if that's even possible), you're going to end up with a pretty bland site.<<

Depends,
If for a simple html page you are trying to have a "nice fit" in every possible browser, you'll probably end up with something that looks like google.com's entry page.
That's why I am proposing using programming technologies to change the page's layout and content in orther to have a "nice fit" for most (if not all) users.

Let's say our MSNBC site has about 800k visitors a day. Let's say we also have about $1mill year budget. Let's say we also want to have our names written in history as the ones that made the "perfect fit" site.

How ca we make 99.9% of our visitors have a "nice fit"?

I think the best way to go about it is completely separating the content from the layout. Then setting up some nice code that will consider the visitor's browsing capabilities and prepare a web page that this unique visitor will be most satisfied with.

Sounds reasonable?

From what I have found, you cannot determine the browsers width and height server side.  You could build a start page that has javascript that determines this, then passes it server side.  Then on the server for the 2nd page, you would capture that data in a query string and return the correct style for that size.  the big problem will be if they then want to resize after the page comes down.  

An example could be a XML data and XLS display solution.  Here are the steps:

1) user comes to default.htm
2) User gets default.htm and the javascript determines the browser display width and height.  In this case it determins the width to 550
3) default.htm redirects to "contents.asp?width=550"
4) contents.asp reads the query string and uses a if then statement that says if width is < 560 then use small.xls, if width is > 560 and < 780 use medium.xsl and if width is > 781 use large.xsl.
5) contents.asp transforms the XML with the small.xsl style and the user gets the appropriate size.

PK

>>As a developer, i gotta say, its nice that the majority of people use a resolution of at least 1024x768!


remember those stats are from w3schools - other developers.  for normal users there would be more 800x600 and less 1024.768

I was under the impression that the stats were meant to represent general users, not just developers.

from their site:


"(The statistics above are extracted from W3Schools' log-files, but we are also monitoring other sources around the Internet to assure the quality of these figures)  "



so most of the stats come from their own site - most people who visit their site are developers, not lay people.  that's all.

There you go.  Thanks for clearing that up, bruno.  It certainly puts those stats in a much different context.  Any idea where more general stats can be found?

This page has some nice stats, worth the time:

http://www.dreamink.com/design5.shtml

coulda sworn i posted a response last night....now it's missing.  oh well.

anyway i just said that the best thing to do was check the logs for your own site and design for your own unique vistors.

i do like the w3schools stats because they show a definite rise in those using Moz....

Thanks for the link Esopo.

Thanks for the ideas.

Do you think browsers will be fully compliant with CSS-2 somewhere in the near future?

probably not, but we can dream.

Heh, maybe when we reach CSS-5, IE will understand CSS2

Wait a minute . . . what's this CSS you speak of?

Are you personifying IE3?