Experience enlightens designers in what can and cannot be reproduced through the media at hand. A poster which technically cannot be printed, or a skyscraper which cannot be built, are as good as useless to the general public. The potential consequences may be disastrous, costing hundreds of thousands of dollars to rework a failed product.

Although a disregard of limitations and constraints on the Web may not exact an immediate, obvious measurable toll, it can add indirectly to user apprehension, exasperation, and loss of interest in [your] Web site. It may sometimes make the Web feel as if it’s one big limitation. An understanding of some of the more fundamental issues when designing for the Web will add greatly to your knowledge when designing Web sites.

Since Web publishing is a design process, each of the steps has dependencies which greatly affect the final outcome. Being familiar with Web limitations and constraints, along with actually spending time surfing current sites, provides an effective starting point for Web site design.

As with any new technology, it’s important to understand characteristics and unique considerations when designing for delivery in the medium. Technical limitations include the following:

• connection speed
• computer platform
• display resolution and bit depth

Connection Speed

Of all the technical limitations that affect Web page viewing, connection speed is the biggest factor in performance for users. The performance (and price) difference between a high-end and low-end connection is dramatic. At the low end are home users, most likely using 14.4 or 28.8 modems connected to service providers, who in turn are connected to the Internet. Any connection with a modem below 14.4 is nearly useless for Web browsing. Prices for 14.4 modems are continuing to drop. They can be purchased via mail-order catalogs for around $100. This helps to proliferate the 14.4 modem for home users. Often, they are bundled with new systems. These systems are targeted for the consumer market, and most now include internal modems as standard equipment. The home market segment will most likely continue to grow rapidly for the next few years.

The home user market may or may not be the most important audience for a Web site. If it is, inclusion of large images should be avoided from the very early design stage. The larger the image file, the longer it will take to download. Although there are many other technical variables which affect transmission rates (efficiency of TCP stack software, number of simultaneous connections, etc.), a 100K image may require over a minute to display when using a 14.4 connection. Obviously, pages crammed with large graphics will test the patience of any user with a 14.4 modem connection.

Some browsers alleviate some of the pain by supporting continuous document streaming, which displays images as they are transmitted, allowing the user to perform an action before the entire page is decoded and displayed. Prior to this feature, users had to painfully wait to perform an action until the contents of the entire page were transmitted and displayed. Regardless of this feature, scrolling pages filled with large in-line graphics require lengthy delays and should be avoided for the home user/14.4 modem speed audience. Make certain illustration artists and production team members understand the implications of this limitation before any conceptual design work (or contract artwork) is done.

Also, keep in mind that the home users may pay their own expenses for connection time (on the net, time is money), and will therefore desire rapid access to needed information. Always design for simplicity and directness. The last thing a user wishes to see after waiting a few seconds for a page is a big, useless graphic having no purpose, surrounded by a massive wall of confusing text. Remember that the home user pays a connection fee to the service provider and may also incur a separate subscription fee from individual Web sites. Connection fees quickly add up. Quick response time is a major factor for home users; for this reason, image loading is frequently disabled on the user’s end.

On the other hand, corporate employees or campus-based university students typically have a higher bandwidth, having either ISDN or direct T1 or T3 connections. Response time is much faster and in-line images do not appear to impede responsiveness. Users having high-end connections may also spend more time on-line casually browsing, due to subsidized access fees by their company or university. A general idea of the intended audience (home versus working) and connection speed between the two greatly impact the design possibilities of the Web site. (See the table, "Typical Internet Connection Speed and Audience.")

Regardless of connection type, Web publishers should use graphics with care. Reserve images for content that requires illustration of visual description and include the image when it benefits the user. A common technique is to use small thumbnails or miniatures when appropriate, providing optional access to the full-size files if requested by the user. This doesn’t force the user to sit through lengthy download periods.

It is always a good practice to provide a textual link equivalent for any graphic which functions as a link, such as a button, just in case image loading is turned off. When it’s provided, a user is not stranded and can still navigate through the Web site. Providing the sizes of images prior to downloading is also a good practice, so users have a rough indication of the impending time required for downloading.

Hopefully, bandwidth limitation will begin to vanish as faster connection lines, innovative compression algorithms, and superior browser technology become available. The prices for ISDN line connection continue to drop, and phone companies are quite anxious to spread its usage to home users. Pacific Bell, for example, provides various service packages for ISDN connection to business and home users in California. One of the most compelling possibilities for high-speed consumer connection is through existing cable lines. At 10 mbps, their sheer speed and power would be unrivaled by current on-line service providers.

In general, graphics have the most impact on response time for users. The bigger the file size, the longer it takes to receive. Keeping images to practical dimensions is one method to cut down file size. Another useful approach is to reduce the colors in an image. For example, a five-inch-wide by three-inch-high photographic image is 88K at 8-bit, 256 colors, 72 dpi. The same image at 5-bit, 32 color is 66K. The best size reduction is achieved by saving the image as a 33K JPEG file. Color reduction is easily accomplished in any image processing tool like Adobe Photoshop or Equilibrium’s De Babelizer.

An interesting work-around solution for connection speed limitations is the use of "hybrid" applications which use CD-ROM content for rich, full-screen static graphics, while sending update information (mainly text) through the Internet. Users will typically be unaware of where the information is coming from, either locally off disk or remotely through a service provider. Multiuser games are a possible large application of this approach.

Computer Platform

Computer platform makes a difference to users because certain operations in browsers are processed locally. This includes decoding page layouts and table formatting, tiling backgrounds from GIF texture swatches, and displaying photographs, graphics, and so forth. This also includes the viewing of video, since these files are played locally after network transfer. A page consisting of tables, images, and a background texture is rendered much faster, for example, on a Sun SPARCStation 20 than on a 386 PC. This consideration doe impact design decisions, especially if your target audience all use workstation-class systems (designing for an internal corporation) versus Intel 386 personal computers (home users).

If development is on a high-end workstation, it is important to always test your Web pages for performance on other less-powerful platforms. In all likelihood, most of your audience will not have high-end workstations. The perceived speed differences in page decoding between high-end and low-end systems is dramatic. Restricting the Web page development process to a single powerful platform does not realistically test the pages for response times and page decoding.

Navigator users may increase local performance to some degree by setting the network and disk cache to maximum settings in the user preference options. However, your design should not require or, more importantly, assume users will change their preferences for optimal viewing of Web pages.

Display Resolution and Bit-Depth

Screen resolution and color bit-depth for a particular computer configuration dramatically alter the visual appearance of Web pages. Developing and viewing Web pages with a 16- or 24-bit color video display reproduces graphic imagery at its best. Dithering is nearly nonexistent with continuous-tone photography, and original colors are reproduced well within expectations. Large flat areas of color look clean and crisp, without any deviation.

However, 16- or 24-bit display capability, though dropping in price, is still not the normal configuration with most users. The 8-bit, 256 color video display is more prevalent and has become the usual standard display configuration sold to most consumers. Users must generally pay extra for an upgrade to enjoy full, true 24-bit color.

Web pages may be designed with a 16- or 24-bit video display, but all pages should be viewed in 8-bit mode to check color, preferably testing images on various platforms. The differences in color palette mapping between systems alter the appearance of graphics which may visually appear suitable on your development platform. Navigator dithers graphics to the color cube found in the target video display, which generally reproduces continuous-tone photography well across platforms. However, areas of solid color may have "speckles" if the computer doesn’t have the color which matches the information in the GIF or JPEG image. All of these concerns are nonexistent with 16- or 24-bit color.

On Windows and UNIX versions of Navigator, users may choose a setting in preferences referred to as "Use Closest Color in Color Cube," which consequently turns dithering off. This causes continuous-tone photographs to have higher contrast with sharp tone differentiation instead of displaying dithered gradations. Flat areas of color remain solid and clean. (Macintosh users do not have this optional setting.)

The variables which influence display color vary from platform video card to settings on a monitor. Two identical systems may display different representations of the same Web page, due to variance in monitor contrast and brightness settings. One trade-off in cross-platform information distribution on the Web is that exactness in color integrity is difficult to ensure. As with any image processing production task, always try to attain the highest quality original. A bad photo or scan file simply adds to the degradation of image quality, especially when numerous variables are involved.

Resolution varies widely between systems. Identifying the target users’ platform may help to determine page size requirements. Designs optimized for 640 X 480 resolution (common VGA and notebook resolution) appear small and undersized on higher resolution displays, commonly used with systems from Silicon Graphics or Sun Microsystems. Likewise, a Web page sized comfortably on a 1280 X 1024 high-resolution display will require lengthy vertical and horizontal scrolling by users with VGA or notebook computers. Limiting the horizontal width of your page to 572 pixels or less will ensure full viewing on 640 X 480 displays, as well as on larger screens.

Text in Web applications poses an interesting challenge for the visual designer. Exact font specification does not exist in HTML Web publishing. Instead, the concept of logical tagging is used. HTML text is tagged in very general formats to ensure cross-platform viewing. For example, headings are tagged as <H1> through <H6>, with the lower numeral representing the largest heading size. However, the exact font cannot be specified by the designer. Therefore, the font used to display text on one system may be Palatino, while appearing in Times Roman on another system, and so forth. Adding to this confusing situation is the capability for users to define a default font of their choice by changing the user preference settings.

HTML hasn't previously supported tabs or effective ways to align text into columns. The implementation of HTML 3.0 tables and alignment extensions found in Netscape Navigator helps to alleviate this problem. However, the behavior of HTML text is that it will wrap accordingly as the user resizes the browser pane. Text will therefore break inconsistently and elements will spatially shift depending on the text size and current window aspect ratio, both determined by the user.

The use of the HTML <pre> tag, which is used to specify fixed-width fonts, allows very limited alignment control, though the method to accomplish this is rather crude and laborious. The benefit is that the text layout will appear somewhat fixed across platforms. Spatial alignment is accomplished by adding blank spaces with the keyboard space bar, much like aligning columns of text using a typewriter. However, even <pre> type has variances between systems, which must be taken into consideration. [Editor's note: Netscape Communicator will introduce major enhancements in the area of fonts and text handling; a future View Source article will describe the changes.]

The best advice is to always review Web pages on various systems and displays prior to release. There are too many platforms, video cards, display resolutions and palettes, and so forth, to ensure complete cross-platform visual consistency for Web pages. However, some projects may have a general target platform, for example home PC users running Microsoft Windows. In such cases, optimization can be made for the chosen environment, simplifying design decisions in relation to platform constraints.