With so many different resolutions (640x480, 800x600, 1024x768,
etc.), browsers (Internet Explorer, Netscape, etc.), and
platforms (Windows, Mac, etc.) in use, it is very difficult to
design a page that looks good (or at least looks the same) in
all configurations.
To design a page that looks good with most configurations, let's
start by defining our main objective: we must never force a user
to scroll horizontally. In other words, our page must always fit
within the available screen width. This would suggest that we
have to design our page for the lowest common denominator:
640x480. However, less than 1% of Internet users utilize this
archaic resolution (which was common when 14" screens were the
best you could get).
Therefore, we can rationally make the decision to ignore the
640x480 resolution (since forcing 99% or users to read a low
resolution page to accommodate 1% of our user base doesn't sound
too efficient), and design our page for resolutions of 800x600
and higher. Since 800x600 remains the most popular resolution
today (May, 2003), we must optimize our page design for this
resolution, meaning that our page should look best at 800x600.
Bear in mind that I'm not saying that we must necessarily design
an 800 pixel wide page, only that it must look best in screens
with 800x600 resolutions (read on and you'll see what I
mean...).
At this point, we're ready for our next decision: should we
design a fixed-width page, or should we specify the width of our
page in percentage terms?
There are pros and cons for both. The main advantage of a
fixed-width page is that the layout will always remain as you
intended, even when viewed at higher resolutions. The main
disadvantage is that users with larger screens, set at higher
resolutions, will not be able to fully utilize them, and will
instead see large, unused blocks of space around your page
(certainly, a disappointment to those users who spent a lot of
money for a large computer screen).
The advantage of establishing our page width in percentage
terms, as 100%, is that the page will adjust itself to the
resolution of the screen. This is called a “liquid page
design" (although I like to call it a “bubble-gum page
design", since the page looks as if it has been stretched
horizontally when viewed at higher resolutions than intended).
The main benefit of this method is that all the available screen
real estate will be utilized. The disadvantage is that the
layout of your page will change, and users may find it
uncomfortable to read the extremely wide sentences that will
result when higher resolutions are used.
If you decide follow our advice to optimize your page for
800x600, and then decide to follow the fixed-width page method,
you must take into account that not all the 800 pixels will be
available (some of them will be used by the browser to display
the scrollbar and other “browser chrome"). To accommodate
most browsers and platforms, specify your page width at a
maximum of 750 pixels.
If you decide to specify your page at 100% width, you won't have
that problem, since it will adjust automatically to the
available width. Just make sure that your page looks best at
800x600, and that the layout doesn't change much when you view
your page at 1024x768.
About the author:
Mario Sanchez publishes The Internet Digest (
http://www.theinternetdigest.net ), an online collection of web
design and Internet marketing articles and resources. You can
freely reprint his weekly articles in your website, ezine,
newsletter or ebook.
