Main Page Content
Design To Realistic Window Sizes
Once you've figured out what your target audience is using in terms of window size, you need to determine the realistic window space for designing your site. I've attempted to do the legwork for you.
In their article Sizing up the browsers, Webmonkey offers "zipped Photoshop file[s] with the chrome of all the major browsers" for 640x480 and 800x600 resolutions (both Mac and PC). These, and Webmonkey's form elements file (accessible through the same article) can prove to be invaluable.
To save you the analysis on your own, I've carefully measured all of the browser windows in Webmonkey's files. The minimum design space you have for the two resolutions mentioned are:
| 800x600 Minimum | Available Width | Available Height | Width with Vert. Scroll Bar |
| 3.x browsers and up (1) | 756 px | 404 px | 741 px |
| 4.x browsers and up (1) | 756 px | 409 px | 741 px |
| 640x480 Minimum | Available Width | Available Height | Width with Vert. Scroll Bar |
| 3.x browsers and up (1) | 596 px | 284 px | 581 px |
| 4.x browsers and up (1) | 596 px | 289 px | 581 px |
The "Available Width" and "Available Height" columns account for the operating systems and browser chrome without a vertical scrollbar. If your page will be long enough to require a scrollbar, you also need to pay attention to the final column. Otherwise, your design may get cut off by a vertical scrollbar, forcing the page to also have a horizontal scrollbar.
These measurements assume that the viewers are visiting your site at full screen. In Aardvark's article, "Real-World Browser Size Stats, Part II," his lowest results probably reflect the fact that some users weren't surfing at full-screen. I don't surf at full screen, but my monitor resolution at work is set to 1152x870.
Conclusion:
It is my opinion that with the increasing number of surfers now surfing at 800x600 (2) one can possibly design safely at 741x404. However, to really be on the safe side (15% at 640x480 (2) can add up to a lot of visitors), design to 581x284. If you are too lazy to make your own base Photoshop files, you can download mine (zipped):
Notes:
- As of this article's publishing, Webmonkey's files only include browser version up to the following: Win - IE 5.x and NN 4.5; Mac - IE 4.5 and NN 4.6. Perhaps sometime I'll measure the chrome for newer versions, and report them here. If you feel like it and get to it first, please comment on this article with the results.
- The 1998 GVU User Survey (yeah, it's ancient) demonstrates that, even back then, only 11% of users reported being at 640x480. If we add 11% of the "don't know" category to that figure, it brings the total up to 13%. One can hope there are more people now using monitors at higher resolutions than there were two years ago.
