Evolution Web Development

Evolution Web Development

All WordPress. All the time.

Determining Usable Window Space at Different Resolutions

Dec 21, 2008; Category: Accessibility, CSS, Design/Development; Tags: , , ; Comments Off

A certain amount of confusion exists about designing for different screen resolutions. Many web designers assume that 800×600 resolution gives them 800 pixels in screen width, and 600 pixels of depth that can be considered "above-the-fold." However, this is far from the case. All browser windows have scrollbars and toolbars that must be accounted for, and of course, there is no consistency across browsers in how much screen real estate they use.

For the sake of demonstration, I’ve created a couple of images for 800×600 and 1024×768 screen resolution, using the Windows Internet Explorer browser templates provided by Joel Laumans (thanks, Joel). He’s used the assumption that an 800×600-pixel screen allows the browser window to be sized at 800×600 pixels, which is usually true, but not always, due to monitor differences. We’re going with that assumption also, to simplify the issues. Some of the numbers below will be different with diferent browsers.

First, let’s look at width. Beyond this mention, we’re going to ignore the fact that it’s possible to open a list of favorites on the left of many browser windows. We are, however, going to allow for the scrollbar and right border, which carve out 22 pixels. Next, allow for the left border, which takes another 6 pixels. Then, to be safe, we’ll allow another 4 pixels on each side, for an 8-pixel "safety margin." Let’s do the math: 800 – 22 – 6 – 8 = 764 pixels of usable width.

Next, let’s look at depth. Obviously, web pages can be very long. What we’re concerned with is trying to identify the above-the-fold depth: the part of the screen that shows without the need to scroll down. We’ll never be able to be certain of this depth, not only because of browser differences, but because of the broad range of choices that individual users make with toolbars, tabs, status bars, etc. All we can do is try to find a reasonable depth that accommodates most users. We’ll use 170 pixels as our assumption about how much room we have to leave for toolbars and tabs (I’ve seen more than that, but those folks have "embraced" scrolling as "just something you do" on all webpages). We allow 26 pixels for the status bar at the bottom of the browser window, and another 4 pixels for safety margin. The math: 600 – 170 – 26 – 4 = 400 pixels of above-the-fold depth.

The examples: 800×600 |1024×768