Web Page Dimensions

Ever wonder why some web pages fill your whole screen while others don’t? Many people have the same question: What’s with all the white (or other plain color or background pattern) around the main part of the page?

There are 3 basic design styles when it comes to dimensions relative to the screen:

1. Fixed width and height – usually 700-740 pixels wide by 400-500 pixels high (a pixel is a tiny dot on the screen). These sites look like a rectangle, usually centered in the screen, with some form of “white space” around it.
2. Fixed width only – fills the screen vertically, but is usually 700-740 pixels wide, with white space on both sides (if the page is centered) or filling up the right side (if the page is left-aligned).
3. Variable height and width – these fill up the whole screen (usually both widthwise and heightwise).

Types 1 and 2 have the advantage of allowing for greater control of design elements – i.e., you can pretty accurately decide where all images will sit in relation to the text. If you can control the font size/type using CSS style sheets, the page should look pretty much the same on every monitor. The reason for limiting the dimensions to around 700x400 has to do with two things:

1. What we call the "lowest common denominator" - i.e., what the visitor using the smallest screen resolution is using. This used to be 640x480, but now is accepted to be 800x600. See Display Resolution statistics at www.w3schools.com/browsers/browsers_stats.asp. There's even a warning there that says, "Web developers be aware: Many users still have only 800x600 display screens." Meaning they can't see all that those of us using 1024x768 or higher can!
2. Usable space left after considering for possible toolbars (such as the Address bar, Google Toolbar, etc.) at the top, bottom, or side of the browser window.

So, after we take these into consideration we're left with around 700x400 pixels to play with.

Most sites these days go with the approx. 700 pixel width and let the height fill the screen vertically. A great solution, in my opinion, as it gives you control over image placement, but also allows for a large amount of copy.

Type 3 has the "advantage" of no white space, but the cost is little control of the spacing of images relative to the text. And, you often get a lot of white space within the page if you don't have much content. I usually only recommend this type if the page is copy-heavy and exact placing of images within the content is not essential.