Skip to page content or Skip to Accesskey List.

Work

Main Page Content

Design To Realistic Window Sizes

Rated 3.68 (Ratings: 6)

Want more?

 
Picture of marlene

Marlene Bruce

Member info

User since: 14 Dec 1998

Articles written: 10

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 px404 px741 px
4.x browsers
and up (1)
756 px409 px741 px
640x480
Minimum
Available
Width
Available
Height
Width with
Vert. Scroll Bar
3.x browsers
and up (1)
596 px284 px581 px
4.x browsers
and up (1)
596 px289 px581 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):

  • 581x284 plus scroll (for 640x480) (1.2k)
  • 741x404 plus scroll (for 800x600) (1.3k)

Notes:

  1. 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.
  2. 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.

Related Articles:

A founder of evolt.org, Marlene (say "Mar-lay-nuh") currently lives in Virginia and is a web and print designer, massage therapist, photographer, artist, burner (person who attends Burning Man), dancer, activist and yogini. In years past Marlene served as evolt.org's executive director and treasurer, though she's not much involved these days. But she still encourages visitors to give to evolt.org.

Marlene began exploring computer-generated graphics with a purchase of the first Mac 128K in 1984. She's subsequently been involved in print design, illustration, and since 1995, professional web design and development. Her other skills are information architecture, usability testing and site management (the largest at 14,000+ pages). Additionally, she's taught seminars, has been published on A List Apart, and contributed to and reviewed a chapter on evolt.org which appears in Information Architecture for the World Wide Web, Designing Large Scale Web Sites.

Check out her portfolio at DigitizeThis.com.

The access keys for this page are: ALT (Control on a Mac) plus:

evolt.org Evolt.org is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.