When you use your computer at work, be it in an agency or company, you probably pay little attention to its operating characteristics and performance. If your organization regularly upgrades its systems and stays abreast of current technology, you likely take for granted, but nevertheless appreciate, the higher degree of functionality that makes users of lesser systems envious.
Perhaps the performance issue many users especially notice is their Internet connection. If your organization communicates over a high-speed Internet connection, things happen relatively fast -- just click and a new screen appears. Many agencies and companies have been using T1 and ISDN lines for some time. And within the last year or so, the introduction of DSL and cable modem technology has speeded up Internet response time for even more users. For your business partners who use high-speed connections and can easily absorb the higher associated costs, response time is not a big concern.
But for the vast majority of consumers who use home computers that are hooked to the Internet with conventional modems (some estimate about 90%), Web page download time can be a frustrating matter. Your organization, as the creator of a Web site, needs to pay attention to the limited patience of users who visit your site.
Overcoming the speed dilemma
In reality you have little control over how quickly things move over the Internet. The technical limitations of server throughput, the server's connection to the Internet, the Internet itself, line quality, the user's connection to the Internet, and the rendering speed of the user's browser and computer all contribute to the various and sundry delays and glitches that occur when using the Internet. Upgrading Internet access, service, and equipment often result in improved Web page download speed, yet overall performance rarely matches advertised claims.
Since you cannot control the technical limitations of the Internet, what can you do to overcome them? Your best option is to build your Web site in such a way that minimizes the size of files, which, in turn, enables more efficient and quicker download. Web pages need to be designed with download speed as primary design criteria.
Web pages, as you have noticed, usually consist of both text and graphics. Graphic files are larger than text files -- sometimes extremely large and prohibitively time consuming for download purposes. Various strategies and techniques can significantly reduce the size of graphic files. While graphics are often the biggest culprit in Web page download time, there are also techniques for improving the efficiency of text files as well.
Graphic files on the Web
If graphic files tend to be so large that they impede download time, you might be tempted to severely restrict your use of them. Obviously, there is little or nothing to be gained by including meaningless or superfluous illustrations, especially those annoying and distracting animated (bouncing, blinking, or otherwise moving) graphics. Instead, the judicious and prudent use of graphics can add meaning, enhance page aesthetics, and create a favorable impression.
The most common ways to minimize graphic file sizes are by 1) using the appropriate graphic format for the kind of graphic being displayed, and 2) optimizing the graphic file for display on the Web; that is, sizing and saving the graphic at the smallest useable file size. The two most common graphic formats used on the Web are GIF and JPEG. GIFs (Graphic Inter-change Format) are used for images composed of flat colors and sharp edges, while JPEGs (Joint Photographic Experts Group) are used for photographs and grayscale images. Choosing the wrong format for a particular graphic could result in larger than necessary files sizes and/or degraded image quality. A third graphic format, called PNG (Port-able Network Graphic), has been around since 1994, but has yet to find widespread acceptance.
Of course, the use of graphics extends beyond the use of photos, logos, or other "stand-alone" artwork, but includes colored boxes or table cells, rules, and the creative use of typography. These techniques are usually of smaller consequence in terms of download speed.
Regardless of the file format used for Web graphics, file size should be kept as small as possible and practical. The easiest way to keep file sizes at a minimum is to limit the size of the graphic and make it no larger than necessary. Of course, it's often easier to create the graphic at a larger size, but it should then be re-sized to the smaller size you'll display on the screen. Another way to reduce file size, especially with photos, is to crop out any extra space around the image's center of interest. Yet another way to keep graphic files small is to create images that contain solid flat color (ideal for GIFs) instead of color gradients, which fade or blend shades. Limiting the color palette to only a few different colors also helps keep file sizes smaller. After the graphic is created, it should also be optimized and saved for the Web. Various graphic creation programs and plug-ins (Photoshop, ImageReady, Fire-works, Paint Shop Pro, to name a few) handle this capability differently, but the aim is all the same -- to save the file at the smallest size possible for a selected level of quality.
Text on the Web
Text-based content is the guts of every Web site and contains the information visitors look for. While graphics may enhance the presentation and emphasis of text elements, the bulk of meaningful information will be contained in the text itself.
Compared to the typographic variety found in print media, you've probably noticed that much of the typography in Web sites tends to look similar. Several reasons account for this comparison, including the nature of HTML, browser default settings, different fonts designed specifically for monitors, and others. For those who've enjoyed the typographic variety afforded by typical desktop publishing, Web typography might appear uninspiring. Fortunately, however, things are improving on the visual control front. Two text-coding strategies -- Cascading Style Sheets (CSS) and embedded fonts -- not only offer more design control over the presentation, but by their very use, can potentially create smaller text files.
By way of a simple explanation, when HTML files are generated, two kinds of information must be created: 1) the content itself, and 2) the coding, called tags, which tells the browser how the content is to be displayed. When beginning a new block of text (e.g., heading or paragraph) new tags must also be added. All the characters that make up those code changes increase file size. By using Cascading Style Sheets, the various style elements (font, size, color, etc.) can be placed once at the beginning of a document instead of using "font" description tags for every new text element within the document, thus dramatically reducing the number of characters in the document as well as the resulting file size.
Embedded fonts work in a similar manner in that font information is stored in a separate compressed file that is linked to the HTML document. When a user downloads a Web page, the embedded font data downloads with it. Embedded fonts and Cascading Style Sheets are techniques that have been approved by the W3C (World Wide Web Consortium), the standards organization that facilitates development of Web technology.
Even though these techniques have been around for several years, there remains a diversity of opinion about their use and implementation. Though supported by Netscape Navigator 4.0+ and Internet Explorer 4.0+, some Web page developers prefer to create pages that can be viewed in older versions of browsers. Others take the view that since more and more people are now using newer browsers, these users should reap the benefits made possible by more liberating techniques.
Management perspective
When developing a Web strategy, there is no right way or wrong way to decide upon the various considerations and techniques that go into the site's creation. With respect to keeping files as small as possible and enabling quick download, there are tradeoffs. For example, you could drastically reduce the number of colors in your color palette and use only GIFs, but that might limit "look and feel" options and detract from the overall visual impression you want to convey. Or, you could take the view that visitors to your site ought to be using the latest browser and a high-speed Internet connection so that none of these issue mattered. Regardless of your approach, your Web site will not please all the visitors all the time. Somewhere, somehow you've got to find a happy medium. In the final analysis, however, no one will be disappointed if your Web pages download faster than they expected.
Online Diagnostic Services Optimize Site Functionality
Even if you do everything you can to keep your graphic files small and make sure your HTML is in good shape, there are other things you can do to improve your site's functionality. Here are four online diagnostics services that detect problems concerning graphics and HTML coding.
Each of these sites offers some sort of "free test drive" on a limited number of pages. Of course, if you're satisfied with the free test, they hope you'll buy their diagnostic tools and services that are conveniently located on the same page. Tools such as these can be useful, even if you're confident in the design and implementation of your Web site and the person(s) who created it.
Steven Brightbill heads Betagraph Design Associates, a company that provides creative and technical solutions for marketing communication and publishing. He has also edited and contributed to other industry publications. He can be contacted at 720-283-2660 or steve@betagraph.com.
© Copyright 2001 by Sound Internet Strategy. All rights reserved