A Note About Screen Size and Good Web Design

The most common screen sizes (resolutions) are the older 1024 x 768, and the newer wide screen resolution of 1280 x 800. But even though the screen size is, say 1024 x 768, that doesn’t mean that’s the usable area. On a Mac the actual usable width is about 1004 and on a Windows machine it’s a little less. The accepted width for a site is 960 pixels. If you wish to ignore the old standard and just design for the new wide screen resolution then use 1020 pixels as the width of the site.

As for the height, that’s kind of a judgment call, but I’ll give you some things to think about. Whatever screen size you are designing for you have to subtract about 120 pixels for Safari on Mac and about 180 pixels for Internet Explorer on Windows because of menu bar, tool bar, etc. Just as in newspapers web designers think of what’s “above the fold.” For a web browser above-the-fold would be the area above where the user does not have to scroll down. So above-the-fold on a 1024 x 768 screen running Internet Explorer on Windows will be a little less than 600 pixels, but above-the-fold running Safari on a Mac will be about 640 pixels, and FireFox about 600 pixels.

So, the safest above-the-fold page design would be 960 x 600.