How can I make my web pages look good on all monitors?

(Or, when is a web designer like an ostrich?)

A male ostrich was chasing a female ostrich. When her capture seemed inevitable, she stopped suddenly and buried her head in the sand, as ostriches are said to do. Immediately, the male ostrich skidded to a stop, looked around in bewilderment, and asked "Where'd she go?"*

Like ostriches, we sometimes tend to think that the world exists just as we see it. But people really do see your web pages much differently than you do, and it's crucial to maintain this perspective in your web development work.

This article aims to take a good look at the issue of monitor size, resolution, and browser window width; to clarify some important points; to de-bunk a few myths; and to point you in the direction of some solutions.

BWATechnologies.com on a 17" monitor at 800 x 600

The same page on a 21" monitor at 800 x 600

Wise compromises

A couple of clarifications, for those who are approaching this issue for the first time:

• You can't make your pages look the same at all different resolutions and window sizes, assuming you're using at least some HTML text. It isn't possible.
  
  
• There's no instant, easy way to handle this issue - there's no "make it fit" extension. We will discuss redirecting users to different pages based on detecting monitor resolution, but we don't recommend it as a solution.

Generally, there's not even any way to make most web pages look great on every monitor. A page which looks perfect at one size is going to suffer at a different size, at least to some extent, no matter how carefully you deal with the issue. But I'm going to suggest that there are wise compromises; you can please most of the people most of the time, and at least satisfy the rest most of the time.

There are methods and techniques that will help you achieve that goal; I'm going to suggest some. We'll get to those in a moment. But first, what is the issue?

(Patty, if you don't mind, I'd like to skip the very interesting and important foundational material and go directly to the solutions)

The issue is not monitor size

A web page viewed at a resolution of 1024 x 768 px on a 17" monitor will display the same exact amount of content in pixels as if it were viewed at a resolution of 1024 x 768 px on a 21" monitor (see figures above). That 17" monitor has a grid of 800 x 600 pixels to use when displaying your HTML page; so does the 21" monitor. The guy with the 21" monitor will be seeing everything a lot larger, but he won't see more of the page. Monitor size is not the issue.

Nope - the issue is not monitor resolution, either

If everyone kept their browser window maximized all the time, it would be a lot easier to address this problem. Monitor resolutions are limited to a certain set of options on most systems: 1,024 x 768, 1,280 x 1,024, etc.; if windows were always maximized, we'd have a limited, predictable set of window sizes to deal with. But this is not the case, so the target we're aiming for is not a set of monitor resolution settings either.

Continued: It's not the size of your page elements, either... -->

*Many thanks to Murray Summers for the ostrich joke.