The Size Of A Web Page
By Dave Nienberg, President/CEO
Copyright © 1998 Dave Nienberg. All rights Reserved

Designing pages for the World Wide Web is an incredible challenge. Perhaps the greatest challenge of all is defining the size of a page. As you may or may not know, Web pages have no fixed size. This doesn't mean we can't use good judgment to help us find an average. There are three steps to this process: determining the average resolution, finding the actual viewing area of web browsers and knowing about browser offset. We will discuss the first two steps in this lesson. Before we start, however, we first have to discuss the reason for this lesson.

Scrolling
When your design exceeds the viewable screen area your audience must use scrollbars to see your information. Many studies have been done on scrolling and what users think. To sum it all up, they don't like it. They find scrolling disorienting and confusing which in turn causes them to leave your site. Scrolling cannot always be avoided, nor should it, but it can be minimized. I have three scrolling rules which help guide me.

  1. The more important a page is (as in your home page) the shorter it should be.
    You don't want to make it any harder to navigate your site than you have to. Ideally it would be nice if all of your links on your home page were accessible with no scrolling. This isn't always possible or even feasible. Just keep this thought in mind and design toward this goal.

  2. Users will scroll to get to the information they want.
    On pages such as this one, users are willing to scroll to see all of the information. In most cases it's not practical to try to fit everything in one "screen."

  3. Never make users scroll to the right.
    This is as absolute as rules get. There may be an occasional case in which it would be acceptable but I can't think of any. Avoiding scrolling to the right is the main reason why you need to know the size of a page.

Step 1: Resolution
The resolution of your users screen is the most important factor in determining the size of a Web page. The following table breaks down the resolutions people use.

Resolution statistics

As you can see, most people by far have their resolution set at 640x480. There are many reasons for this. First, this is the resolution every computer from the factory comes set at. Companies do this to reduce the amount of technical support they have to provide since this resolution will generally cause the fewest problems. Second, most people don't know they can set their resolution higher. For that matter, they don't even know how. Therefore, it does little or no good to tell your users to increase their resolution to accommodate a larger design.
    Since most people use 640x480, this must be considered the highest resolution we can use to prevent scrolling to the right. This is the first half of determining the size of a page but the second half is equally important.

Step 2: Actual Viewing Area
We now know what resolution to design for, but not all of this area can be used. Menus and toolbars occupy a certain amount of the screen. In order to determine this amount, I've created a test page to determine the actual viewing area. I have presented the results from the two most popular browsers, Netscape Navigator and Microsoft Internet Explorer in the table below.

Viewable area statistics

Now in order to design for the largest possible audience we must now take the minimum values in both directions to come up with the size of a page. This gives us a maximum value of 610x302. At last the mystery is revealed.
    Many people will argue with this size for a couple of reasons. First, not all people maximize their browser and therefore the actual size of a page is considerably smaller. This is true, but you have to draw the line somewhere. I, myself, never maximize my browser on my desktop computer. Then again, I run a much higher resolution than 640x480. When I'm on the road, however, I'm forced to use 640x480 on my laptop. In this situation I do run it maximized.
    The second argument is that you can greatly reduce the amount of space taken up by toolbars by optimizing your browser. I am in total agreement with this and the previous lesson, Setting up the browser, discusses this topic in detail. Unfortunately, very few people take the time to change the defaults their browser comes with. There is really nothing which can be done about this so we just have to live with it. Luckily the defaults only affect the height of a page which as we discussed, is much less important than the width.

Now that we have a target size (610x302), how do we use it? One way is to not create graphics or tables larger than 610 pixels wide. This would be the end of the story if images and text butted right up against the left side of the browser window, but they don't. Welcome to the dreaded browser offset problem. I'll discuss and explain what it is and how to work with it in the next lesson. Until then, happy coding.

For more information contact us at: info@4guys.com