Designing For Various Screen Sizes

One major mistake that even the most experienced web developers often make is building a site that is too big for some viewer's screen sizes. Have you ever been to a site where you had to scroll the screen horizontally in order to view everyhing? You shouldn't make your viewers do this, as most of them won't.

I have run various user tracking software on some of the websites I have built. This software tells me the number of users that are visiting my page, as well as what browser they are using and their screen resolution. I've found that on average, about 25% of surfers to these sites have their screen resolution set to 640 x 480 pixels. Of the remainder, about 50% had a screen resolution of 800 x 600 and the last 25% were using 1024 x 768.

As a web developer, you must take into account that a lot of computer users are using 15 inch monitors, whereas you may have a 17 inch or bigger display. On a 15 inch monitor, a screen resolution of 800 x 600 can be difficult to read for some people. Even today (February 2002), if you consult the catalogs of several random computer vendors, many of them are offering computer packages that include 15 inch monitors. It won't be long until 15 inch monitors are totally phased out. Until that day comes, you will have to work around them.

Your job is to make your website viewable to all users, yet make sure the site looks as good on a 640 x 480 screen as it does on a 1024 x 768 screen. Lucky for you, there are ways of doing this that aren't at all difficult.

Designing for 640 x 480

As a general rule, I always design my sites for a 640 x 480 screen resolution. When doing this, you must take into account that there is some space taken up by the browser on the left and right side of the screen. Of the 640 pixels alotted for the total screen width, you will have only about 620 to use for the web page. To be on the safe side, I wouldn't recommend designing a page of any more than 615 pixels in width.

Click here for an example of how to implement this method.

Designing the page to be flexible

Another way to make sure your site will always fit any size screen is to build the site so that it fills the entire browser window, or a fixed percentage of the width of the browser, regardless of the user's screen resolution.

Click here for an example of how to implement this method.

Advanced full screen table formatting

In this example, I made a page complete with header and footer portions, and a border. You will see many sites on the web like this, and it is very easy to make using table formatting.

Click here for an example of how to implement this method.

Copyright 2001 Fungi Software (Wicked Clean Productions)
Email: doug@dougstech.com