The
Screen size myth of 800x600
By James Kalbach
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 two
measurements.
- 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 vertically.
- 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 JavaScript function.
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. (Source:
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 screen resolution.
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
client-end factors.
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 fundamentally
inappropriate.
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 page
elements.
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.
Techniques
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 and new.
- 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:
yahoo.com
and
aol.com
- 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:
cnn.com.
- 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
ebay.com.
- 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 estate.
Example:
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
explored. Examples:
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.
|
