Typical Comments in HTML

<! -- Begin the menu bar here. -->

<! -- This script is used to preload images. --> <! -- Another pathetic hack. -->

Bandwidth is key but not at the price of sanity. Nevertheless, some web shops routinely save bandwidth by removing the white space from their HTML documents. To protect themselves from suicidal despair, these shops

first save a legible copy of each document and preserve it offline. When a particular HTML document needs to be updated, the designer or producer opens the original document, not the one from which white space has been removed.

Because it can be problematic and because it requires keeping duplicate

files, most shops don’t bother with this level of bandwidth conservation.

Okay, we’re sorry we mentioned the whole thing.

CACHE AS CACHE CAN

One of the best ways to minimize bandwidth is to employ the caching mechanism built into all web browsers. The caching mechanism, which lives on the end-user’s hard drive, is like a warehouse where files that have already been downloaded are stored in case the user needs them again. For instance, if a visitor returns to a previously viewed web page, the images on that page are loaded from her cache instead of having to be downloaded from the Web a second time. Because the files are already sitting on the hard drive, they load almost instantly.

That’s all well and good for the web user, but how does it apply to the web designer’s job?

The answer is simple: The more we reuse graphic elements, the less strain we put on our visitors’ bandwidth. If we reuse the same graphic menu bar elements from page to page, these elements only have to be downloaded once. From then on, whenever the visitor hits a new page, the familiar menu bar graphics are reloaded from the cache on her hard drive. By contrast, if we change the design of the menu bar on each page, the visitor must download new graphics with every page, thus slowing the site experience (and adding to the toll on the server).

50 WHY: Designing for the Medium: Cache as Cache Can

Repetitive elements help visitors make sense of the site; ever-changing elements confuse and disorient visitors. (Ever-changing elements don’t help reinforce branding, either.) The need to minimize bandwidth, reinforce branding, and present the user with a comprehensible and intuitive navigational system all point to the same moral here: Keep using the same stuff over and over, relying on the user’s cache to serve as much of the site as possible.

Figure 2.7

The title says it all: “a5kRobustScalableInterne tOnlineEcommerceFurnishi ngsOutlet,” the winning entry in the 5k Contest,

is both a spoof and a functioning e-commerce site, created in less than 5K of bandwidth (www.the5k.org/). For those brand-new to the field, e-commerce was the Holy Grail of web design in 1999.

Much Ado About 5k

The need to conserve bandwidth is so essential that in 2000, Stewart Butterfield created a “5k Contest” challenging web designers to create some of the smallest sites in the world: complete websites that would weigh in at under 5 kilobytes. (To put this in perspective, 5K equals about seven or eight short paragraphs of plain text.)

To Butterfield’s astonishment, thousands of web designers responded to the challenge. You can see the results at www.the5k.org. As you marvel at some of these creative solutions, bear in mind that the average web page is 32K (over 6 times as large as the 5k winners). (The average corporate web page is often much larger than that.) The 5k Contest proves that our pages do not have to be nearly so bloated. As a web design professional, you will always be seeking new ways to minimize bandwidth.