Design to realistic window sizes

Posted on September 28, 2000

in Visual Design

by Marlene Bruce (marlene)

Rated 3.68 (Ratings: 6) (Add your rating)

Want more?

More articles in Visual Design
More articles by marlene

Marlene Bruce

Member info | Full bio

User since: December 13, 1998

Last login: August 07, 2007

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 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):

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

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.

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.

5 comments on this article. Log in to add your comment | Rate this article:

Submitted by MartinB on September 30, 2000 - 00:35.

If you're going to design for a larger screen, though, you need to make a choice. Are you going to design/code it:

such that it will look great in your chosen resolution, and a bit poor in other resolutions (larger or smaller btw) or
such that again, it looks great in your chosen resolution, but is unusable in other resolutions - you need to scroll sideways to get to the login form, aligned images suddenly aren't etc.

Far too many sites take option 2, often without realising. The answer, of course, is testing. Now the point of testing isn't that it looks fantastic in all situations (we've all designed around too many buggy browsers to entertain that hope), but to understand the situations where it does degrade, and the extent to which it does so. Only then can you make a call about whether it needs fixing.

Submitted by persist1 on October 1, 2000 - 03:16.

In terms of choosing a target page width, I've found the approach used on this site to be - if not the best available - the best to use when there is any doubt. It does awfully limit the amount of info you can present at the moment the page loads, but properly written headers and copy can do a lot to attenuate the height of that obstacle.

Submitted by pierrej on October 2, 2000 - 08:21.

Resolution is only a concern if you're building fixed layouts. But wait -- then you're also taking control away from the user. Sure, I may have my resolution set to 1024X768, but I may also choose to have several windows open, and I want control over the sizes of those windows. For example, I may want your page to display in a window smaller than 741x404 or even 581x284. Fixed layouts don't allow me to do that, so there I am having to adapt to a designer's preferences rather than my own. And what about font sizes -- what happens to a fixed design when the user has her browser set to display larger fonts (because you wouldn't ever take font size control away from users, right?) Why not build liquid designs, designs that adapt to the available space, giving choices back to the user and forgetting about resolution altogether?

Submitted by marlene on October 3, 2000 - 07:38.

I completely agree that liquid designs are often a superior solution, but not in every case. I offer the results of my research so that, in cases where a liquid design is not chosen, one can start with an informed base for resolution choice.

Also, even with liquid designs, one might want to keep in mind some sense of the smallest area they want their design to collapse to. Those numbers might be smaller than mine, but at least this is a starting point.

Regarding font sizes, my preference is to give users that control. Often there is not a solution that will work for everyone in every situation. But it's worth it to strive for that ideal!

Liquid layout is superior and impractical

Submitted by prowsej on February 3, 2002 - 14:44.

There is a lot of support around the likes of evolt for A List Apart-style CSS-only designs. However, if your doing CSS design then you must specify a lot of things in pixels and you must take a lot of control away from your users. Give me pixels or give me death: http://www.alistapart.com/stories/fear4/

Start of page header

Other Fine Evolt.org Sites

Navigation Starts

Article Categories

Highest rated articles

Submit

Recent comments

Main Page Content