Developing fixed-size Web pages is a fundamentally flawed practice. Not only
does it result in Web pages that remain at a constant size regardless of the
user's browser size, but it fails to take advantage of the medium's flexibility.
Nonetheless, Web site creators continue to develop fixed pages.
The current standard page size is 800x600 pixels. Some sites even explicitly
state this with the disclaimer "this site best viewed at 800x600." If part of a
page falls outside the viewable browsing area, scroll bars appear. Surfing the
Web with a smaller screen resolution, for instance at 640x480, reduces the user
experience to a frustrating scrolling exercise. (Generally, horizontal scrolling
is much worse than vertical.)
Most computers allow users to set the resolution of their choice for a
reason. For some types of work it's more efficient to use a high screen
resolution, which optimizes desktop workspace. Other people need to work at
lower resolutions, which enlarges the display. This choice is independent of the
actual size of the monitor hardware: Someone with a 21" monitor can have a
display resolution of 640x480.
The reason why 800x600 has been adopted as the standard Web page size is
clear: Average screen resolutions of Web surfers can easily be obtained. Here
are the latest statistics worldwide:
- 640x480: 7%
- 800x600: 53%
- 1024x768: 31%
- 1152x864: 2.5%
- 1280x1024: 2.5%
- other: 4%
(Source: statmarket.com February 17, 2001 based on a sample size of
50,465,595 Web sites; numbers rounded to the nearest .5%.)
These statistics are used to justify layout sizes for Web pages. Currently,
about 93% of the Web population can view a page at 800x600 without unnecessary
scrolling. The result: A majority of sites are created to meet this assumption.
Viewable Browsing Area
Screen resolution, however, is the wrong statistic to use to determine the
optimum display size for Web pages.
A more appropriate metric would be viewable browsing area, or the area within
a user's browser that a Web page actually occupies. Viewable browsing area isn't
the same as screen resolution. Many factors lead to a discrepancy between the
- Browser not completely open: Browser windows are resizable, allowing users
to choose how big they appear on the desktop.
- Standard toolbar areas: Navigation buttons of the browser and the URL
input field absorb a great deal of space. These can take up 120 pixels
- Windows status bar: MS Windows users frequently show their system status
bar, which can take up a small amount of horizontal space.
- Sidebar areas: These are standard with Internet Explorer 5.0 and Netscape
6.0 and allow users to see bookmarks, search tools, site details, and more.
Although variable, these take up about 160 pixels of horizontal space.
- Browser companions: Programs such as Alexa (alexa.com) or Google's toolbar
(toolbar.google.com) provide useful information, such as related sites and
page data. These can also take up a variable amount of space.
Any or all of these factors can reduce viewing areas. Web page designers
often account for this by developing pages that are about 770x430. Still, such
pages are fixed and don't fit many user-end settings and conditions.
There's little published information about average viewable browsing areas.
This is surprising since these statistics can be gathered easily with a simple
A comparison of screen resolutions and average viewable browsing areas
reveals significant differences. Generally, as monitor resolutions increase,
average viewable browsing areas tend to level off.
Screen resolutions indicate a specific technology and are therefore fixed
points on a scale. But measurements of viewable browsing area fall on a
continuum and reflect user behavior. For example, a user in one study had a
screen resolution of 2560x1024, but a viewable browsing area of 628x623.
Real-world browser size stats, part II.)
Take a look at how the people in your office browse. Do they always maximize
their browsers? Do they use sidebars or companion tools? Do people have multiple
browsers or applications open at smaller sizes and jump back and forth between
them? On average, users don't surf with viewable browsing areas equal to their
Towards a Flexible Design Aesthetic
When developing Web sites we should accommodate a continuum of unpredictable
human behaviors. Unfortunately, the real a strength of the Web—its
flexibility—is often seen as a disadvantage. Attempting to control exactly what
the user sees is futile—the final product varies due to a wide number of
The impulse to prescribe all aspects of layout is a leftover ritual from
print media, where designers carefully position each page element. But on the
Web the practice of defining a standard canvas size before design begins is
Viewing pages fixed at 800x600 on a monitor with a maximum resolution of
800x600 is like reading the newspaper on the airplane: You can do it, but it's
inconvenient and unwieldy. Or, imagine if television were the same: Owners of
large TVs would have to watch their favorite shows within a 12x12-inch square on
their 3-foot screen; and owners of small TV sets might miss half of the picture.
We wouldn't tolerate this, yet it's been accepted on the Web.
The Challenge of Web Design
Designing Web sites for all sizes seems like an impossible task. Generally,
the thought of accommodating a wide range of viewable browsing areas is
frightening. Web page creators continue to insist on absolute positioning of
An alternative to absolute positioning is relative positioning. This allows
pages to contract and expand to fit a variety of viewable browsing areas.
Consistency comes from the relationship of page elements to one another. A
navigation bar, for example, can always appear in the upper right corner,
regardless of browser size. The user experience might be slightly different from
visitor to visitor, but consistent enough to convey the same message.
Many sites have attempted to tackle the problem of variable browsing areas,
but there's still room for growth and improvement. Here are some solutions, old
- Centered content. This refers to distributing unused areas of a
fixed-size layout to either side of the main content. Advantages: Easy
to achieve; galleys on either side of main content can be used to enhance
visual branding with backgrounds. Disadvantages: No real added benefit
to the user in terms of gained screen space: There's no more or no less
content on a screen and workspace isn't maximized. Examples:
- Placing less important content on the right. This method dictates a
certain layout in which the main content and main navigation areas occupy the
left-hand side of a page. Extra features and functions, often ads and teasers,
can then appear beyond that to the right. Although scroll bars might appear,
users with smaller browsing areas need not scroll to see the main content.
Advantages: Easy to implement; good use of screen real estate.
Disadvantages: Results in a "canned" layout, stifling design creativity;
horizontal scroll bars appearing at smaller sizes may be confusing. Example:
- Fully flexible pages ("liquid" pages). This practice allows pages
to fully expand and contract. Liquid pages are the best examples of relative
positioning. Advantages: Easy to achieve in HTML; offers users with
larger screens optimum use of screen real estate. Disadvantages: With
larger resolutions, text passages might become increasingly harder to read
(lines of text that are longer than about 400 pixels show reduced
readability); tends to have what some describe as a "cheap, HTML-feel" that
doesn't always meet the visual branding standards of some site stakeholders.
Examples: cnet.com and
- Variable number of columns. For text-heavy sites, it may be
desirable to offer users the choice of one, two, or three columns of text.
Advantages: Makes good use of screen; allows for user control of display.
Disadvantages: Doesn't work on all browsers and platforms; somewhat
tricky to implement; limited situations where it can be effective. Examples:
iht.com (International Herald
Tribune online, see any article; Works with IE 5.0 only; also note the ability
to increase font size directly from the page)
- Axis-oriented pages. The means developing a layout around a point
at the center of the page, and then moving outwards in all directions. This
requires defining an "axis" through the page around which elements are
ordered, thus breaking the syndrome of simply filling in a four-cornered page.
Advantages: Easy to achieve; very consistent user experience (main
elements are always in the middle.) Disadvantages: Dictates a certain
layout; doesn't really offer the user an added benefit in terms of screen real
idmedia.com (the whole design remains consistently centered at a wide
range of sizes)
- Modular page components. Areas of the page can be defined as blocks
that are moveable. At smaller sizes, two content blocks might appear above and
below one another, for example. With larger viewable browsing areas, these
same two page elements might appear next to each other. Advantages:
Maximizes user's desktop workspace. Disadvantages: Complicated to
implement; doesn't work on all browsers and platforms; hasn't been widely
macnews.de (in German; works only with IE; Notice how the promotional
images on the right move to accommodate different browser sizes.)
- Compressing/Expanding features. At smaller sizes some features can
be offered in "short form," while these same features are fully available at
larger sizes. For example, a search function might only appear as a button at
small resolutions. At larger screen resolutions, the search feature is
afforded more space and includes an input field directly on the page.
Advantages: Offers benefit to users with larger screens. Disadvantages:
Difficult to implement; requires identifying users' screen sizes; may present
problems on some browsers. Examples: none known.
- Variable surface areas. This refers to defining content boxes that
users can pull open or closed. If one box is increased in size, another must
decrease in size proportionally. Advantages: Maximizes use of screen
real estate; allows users to prioritize content. Disadvantages: Very
difficult to implement; not an assumed Web function; may give users too much
control over layout. Example: none known.
- Combinations. The above techniques can also be combined to arrive
at unique solutions for a given situation. Example: WebReview.com (Left
navigation is fixed, content is flexible; also notice that at 640x480 banner
ads appear above and below one another instead of next to each other.)
Resolving the Issue
The use of fixed-size pages is yet another example of our tendency to focus
on technology rather than user behavior. The most commonly available statistics
are for screen resolution, a measurement of a certain technology. More relevant,
though, is the user-specified viewable browsing area.
But viewable browsing area isn't standard and can even vary within a single
session for a given user. Consequently, a range of sizes must be considered when
developing Web pages. In a time when "one-to-one" is all the rage, it doesn't
make sense to create "one-to-many" layouts. In the end, the entire user
experience should be one-to-one at all times.
With an increase of alternative browsing devises on the horizon, such as
WebTV, public access kiosks, video gaming systems, e-Books, small handheld
devices, and other nonstandard applications, the continuum of viewable browsing
sizes will only expand. Never before has the demand for flexibility been
greater. Solutions developed on the Web now will affect and inform future
design. Ultimately the success or failure of a digital product lies not on a
deeper understanding of specific technology, but on how that technology is used.