Creating Well-Designed Web Pages(or: Being Kind to People With Slow Modems and
That Are Efficient to Transmit and Navigate
Those in Developing Countries With Expensive Internet Access)
by Philip Bogdonoff
- Purpose & Rationale
- Some Tips
- Make your primary and secondary pages quick to load.
- Make your primary and secondary pages short.
- Design information-rich guides.
- Warn readers when links point to large pages/images.
- Put large pages/images on tertiary pages.
- Make it easy to return to the "table of contents".
- Use images sparingly.
- Use "thumbnail" images instead of the full images.
- Specify image HEIGHT= and WIDTH=.
- Use only information-rich images.
- Make sure there are text alternatives to images.
- Use IMAGEMAPs appropriately.
- Use compressed images (JPEGs) where possible.
- Limit image bit depths where possible.
- Use GIFs for graphics, JPEGs for images.
- Related References & Style Guides
Purpose and Rationale
These comments and suggestions are for authors of Web pages with content intended for, or likely to be read by, people and organizations with limited and/or expensive Internet access or browsers running on not-so-fast hardware. And to the extent that demand for bandwidth outpaces its installation, these suggestions can enable more efficient use of existing network resources.
The images and graphics supported by the World Wide Web can make a screenful of information visually exciting and appealing. The downside, however, is that much information on the World Wide Web has been organized in a way that is not cost-effective for the majority of people to view. Often the organization of a Web page forces readers to transfer many bytes of information without giving them the choice to do so. If readers have a limited or congested Internet connection, or a slow modem, they may have to wait longer than they would like before receiving enough information to inform their next act. If their access to the Internet is costly, readers may have to expend a good percentage of their telecomm budget transferring unnecessary information.
Examples of these users include non-profit organizations unable to afford the faster platforms and modems, and people and organizations in developing countries who often must pay very high telecomm rates and tariffs in order to connect to the Internet.
With good organization and judicious use of WWW tools, much can be done to facilitate efficient access to your site's information, thus reducing your reader's waiting time and communications costs.
What follows are some tips and suggestions for authoring what I call "efficient" Web pages. Even people who have fast and inexpensive Internet connections and the latest hardware will appreciate the Web page organization tips suggested below.
- Try to design your primary ("home") and secondary (i.e., those linked to your home page) Web pages so that they are small and can be loaded quickly.
It is very tempting to include large, colorful, and sophisticated images on one's home page. However, readers with slow access must wait longer and readers with expensive access must pay more to view your page. Large images may discourage readers from visiting your site frequently. To protect themselves from having to load many bytes of information they may turn off auto-loading of images. Or they may bookmark the information of interest to them and on subsequent visits by-pass your home page altogether. This may defeat your ability to alert them to new information at your site.
Readers will appreciate primary and secondary WWW pages that are small -- i.e., the total number of bytes transferred from the server is under 5K to 20K. Readers paying high telecomm costs will appreciate even smaller pages. Consider using one very small image on your home page and relegating any other images you would like to use to secondary, or preferrably, tertiary pages.
- Try to limit your home page to 1 to 2 "screenfuls" at most and secondary pages to 1 to 3 screenfuls.
Readers will appreciate being able to find what they want within the first few screenfuls of information. Conversely, if they do not find what they are looking for they will know the information probably does not exist at your site and they will like that they did not need to search very far to determine that.
If they can find what they want without having to scroll or page down, so much the better!
- Design your page content so that readers can quickly determine if there is information of interest to them on following pages.
Readers will appreciate primary and secondary WWW pages that are brief and rich with useful information. Provide your readers with a clear outline of the information available at your site and the option to choose the information they want. Use a "Table of Contents", an outline, an index, or a site map.
- Warn your readers beforehand if a link is going to bring in a large amount of information (text and/or images). Note in the text adjacent to the link approximately how many bytes the link will retrieve. What is "large" will depend on your audience, the kind document you are writing, and the context. Links that will bring in more than 100K in text and/or images should have warnings for nearly every reader. The threshold might be much lower, say 10-30K if your intended audience is paying for every byte they receive. (Note: Some sites in Africa must pay ca. $0.50/1K received!)
(You might also want to use the download time icons from "Hinted Links".)
- If a page is large, protect your readers by making it a tertiary page. Readers will appreciate being able to navigate quickly through the primary and secondary pages of your site. Save your larger pages for lower down in your site's hierarchy of pages.
- Provide an easy way to navigate back to your main outline or index.
Obviously the best way for a reader to get back would be to use the "back" button or "history" feature of their browser, but thoughtful page authors will include a button at the top or bottom (or both) of a page which points the reader back to the most useful page. Readers won't need to waste time backing up or searching through their history list to find it.
In addition, when a [TOP] or [CONTENTS] button is a link to a "named" anchor in the same file, if you omit the file name in the link specification, Netscape (and other browsers?) will jump immediately to the location without needing to reload the page. E.g., say <a href="#top">[TOP]</a> instead of <a href="index.html#top">[TOP]</a> if you are pointing to a place in the same file.
- Keep your use of images to an absolute minimum, especially on primary and secondary pages. At this level most images don't contain a lot of information that helps a reader find the information they need. Save your reader's time and money by only using images that are very useful to them and give your reader the option to download those images by placing them on tertiary pages.
- Use "thumbnail" images instead of the full images. "Thumbnail" images are very small versions of the full image. The thumbnail images are linked so that a viewer, if they choose, can click on them to request the full image. It is polite to include a note about the size of the full image next to the thumbnail image.
- The Netscape and perhaps other browsers can, if you give the HEIGHT= and WIDTH= of an image, reserve space for an image and go on to display the page's text and then come back and fill in the image(s). If you do not specify the height and width, the browser must first load the image before it can determine where to place the text. So, including the HEIGHT= and WIDTH= parameters along with an image will enable viewers to see the text sooner. (You can use programs like LVIEW, Paint Shop Pro, and Photoshop to determine the size in pixels of a particular image.)
- Reserve your use of images to those that have high information content. (Make that one picture truly "worth a thousand words"!)
One example of graphics with low information content are the colored balls frequently used on bulleted items. It's better to use the HTML unnumbered list format (<ul>). Unless you have a very good reason to use a color scheme, these little GIFs just waste bandwidth. If you must use them, then using the same image will help -- once the first instance has been loaded, all the other instances can immediately use the image, too.
Fancy textured dividers, borders, and backgrounds, while they may look nice, are also often a waste of bandwidth. Be kind to your readers!
- When you do use images, make sure to use the "ALT=" field and include a short, pithy phrase that describes what the image is about. Readers using text-only browswers like Lynx need these fields to determine what the image is about. Use the "ALT=" field especially if the image is "clickable" (i.e., linked) so readers will know what it points to.
- Use IMAGEMAPs only when they are appropriate to the task. Often normal linked text or buttons will suffice. Unless you have designed appropriate text alternatives to the IMAGEMAPs, you will force your readers to load the images. And some Web browsers do not yet support IMAGEMAPs.
- Whenever possible, use 90% (or less) compressed JPG/JPEGs images. You can reduce the amount of bytes required to store an image by half or more by using JPEG compression and not lose very much in the way of visual quality. (See Netscape's JPEG Image Examples.)
- Use graphics and images with fewer, rather than more, colors. Two-color graphics can require fewer bytes than those with many colors and shading. (See "Trimming Graphics by Limiting Bit Depth" in the Yale WWW Style Guide.
- A quick rule of thumb: Use GIF for graphics, JPEG for photographs. The GIF format works best for images that have few colors, large blocks of the image in one color, and images that require sharp edges and corners. It also must be used if you want transparency. The JPEG format works best for images that are derived from photographs of people, of shaded objects, or otherwise have gradations of many colors. Experimentation will give you a better sense of which format will give you a smaller image file. (Explore the links given in the previous two tips.)
Related References & Style Guides
Here are some helpful sources:
- HTML Basics by Mindy McAdams.
- A Beginner's Guide to HTML from NCSA.
- The Yale Center for Advanced Instructional Media's Yale Style Manual ("Web Style Guide") by Patrick J. Lynch is a very thorough treatment of the design of systems of Web pages. Highly recommended.
- David Siegel's Tips for Writers and Designers. Advice from a typographer.
- Mindy McAdams' "Hypertext Breakdown" gives advice on how to 'break up documents to make them usable in a hypertext environment'.
- GSA's Center for IT Accommodation has a collection of tools to help you make your Web pages accessible.
- Yahoo's resources for World Wide Web > Page Creation index. Look here for additional resources.
Copyright (c) 1995 by Philip Bogdonoff
Last updated: 24 February 2000
Thank you to Jillaine Smith for editorial suggestions.
Please send corrections and suggestions to firstname.lastname@example.org.