|
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. |
