Web Appearance between Different Monitors?

How should a website’s appearance change as you go between different monitor sizes, computers, resolutions, platforms, etc?

For example, if I was on a website (e.g. LA Times) and was viewing the site on my MacBook which has a tiny monitor, and then I went to a larger 19" desktop monitor, should the website look exactly the same, or should I see more on the large monitor?

That is, as a user’s monitor’s size increases should your website just scale proportionally or is it that the user with the larger monitor gets to see more?

Attached is a screen-shot of what I see on my MacBook when I go to the LA Times and then I zoomed out in Firefox to possibly mimic what a user would see on a larger monitor?!

Hope this makes sense?! (:



Proportional scaling may not be appropriate, as sometimes you’re dealing with 240 pixels width, and at other times 1600 pixels width.

Here’s a good article about how to provide different layouts for different widths.

Ideally, all browsers would support media queries, and then we could offer stylesheets designed to work at a range of resolutions - eg, you could have a small-screen version for mobile devices, a normal-screen version for a typical PC/laptop monitor and a huge-screen version for people with monster-sized displays, with the layout remapped for each one to make best use of the available space.

However … first, too many browsers don’t support media queries, and second, that makes a lot more work for you as a designer - to create, test and maintain multiple stylesheets. So there are very few (if any!) sites that actually make that effort.

What I try to do is to ensure that a site will scale and stretch within reasonable boundaries to fit the screen. The layout will work best at a typical resolution of 1024×768, but as you make the window narrower, the site will squash down inside the narrower window, until you get to a point where it just can’t sensibly get any smaller. Going the other way, the content space will expand as you enlarge the window, up to a point where it says “no more!”, the point after which lines get too long to comfortably read. (If you set this max-width in em rather than px then it will change as the text size changes, ensuring a certain number of words per line). As you continue to enlarge the window beyond that, you generally won’t get anything more on width-ways.