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.

P.S.:  In the following illustrations you can see how our homepage (which was designed for a percentage-defined page width of 100%) looks in both 800x600 and 1024x768 resoluions.  You'll notice that it adapts well to both resolutions, utilizes all the screen real estate available, and doesn't require you to scroll horizontally:

You can freely reprint this article.  Just include the following resource box at the end:

Mario Sanchez publishes The Internet Digest ( http://www.theinternetdigest.net ) a website and newsletter that gives you free advice on web design and Internet marketing.

To read other articles, go to our Archive.

To receive a short Email every time a new article is published, send a blank Email to:

TheInternetDigest-subscribe@topica.com

Your e-mail address will never be sold, rented or given away to anybody.  You can unsubscribe at any time.

SEND THIS ARTICLE
TO A FRIEND:

[ More Articles ]

Support The Internet Digest by buying great books from Amazon following these links: