How can I make my web pages
look good on all monitors?
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.
a 17" monitor at 800 x 600
|The same page
on a 21"
monitor at 800 x 600
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
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.
not the size of your page elements, either... -->
*Many thanks to Murray Summers for the ostrich joke.