|
Reader Poll Designing web pages for wide audiences can be a challenging task. Which type of table positioning do you use?WebReview wants to know! |
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. The chart below demonstrates this relationship.
 |
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.
James has an M.A. in Information Science and is the Head of Information Architecture at Razorfish, Hamburg.
Related Articles
Controlling Table Layout with CSS2
WebReview.com's Browser Guide
