Introduction | Adapting Content | Making a Page | Finishing Up Design Considerations | Common Elements | HTML Reference | Color Table

A good idea in most media (whether in print or on the web) is to use only two or three different fonts in any presentation. (Different sizes of the same font count as one font. Bold and italic versions of the same font count as one font.)

In choosing fonts for the text of your page, pick the base True Type fonts which come standard in all Windows 95 & 98 computers. This will insure that people who look at your page will see the font you intended them to see. Microsoft considers the following fonts as the base fonts for use on the Internet. These fonts include:

• Times New Roman
• Arial
• Arial Black
• Verdana
• Webdings <Ƶþÿ
• Trebuchet MS
• Georgia
• Comic Sans
• Impact
• Courier New.

In both web design and print layout, readability is increased if you use a sans serif font for headers and headlines and a serif font for the text.

• A sans serif font is a font like this which does not have little tails attached to the letters. Use a sans serif font to create headers and headlines.

• A serif font is a font like this which has little tails attached to the letters. Use a serif font for the main text.

• You can speed up the time it takes to download your page by reusing graphics on more than one page. When a browser downloads a page, it stores the graphics in a cache, where they can be recalled quickly from the computer's hard drive rather than having to download them again from the Internet. Bullets, divider bars, logos, etc., can be used over and over again. Reusing such items will also give your pages a consistent look, another advantage.

• By default, browsers use graphics files which end with the three-letter extensions GIF and JPG (or JPEG). GIF images take less time to download than JPG images. Therefore, GIFs are usually the better choice for a web page. Another consideration is the type of image you are displaying. GIFs work better on clip art type images: those with a limited number of colors, line drawings, and images with sharp edges or clean contrasts between different colored sections of the image. JPGs work better on images that look like photographs: those with many colors, soft lines, and gradual transitions between colors.

• Use "progressive images." These are the graphics files which first appear blurry and then sharpen up. These graphics are good because the viewer perceives these images as loading more quickly than other images (although the download time is actually the same). Also, viewers can often tell from the blurry image whether they want to stop the download before its finished. If you are making your own graphics, save your work in GIF version 89A to make a "progressive" version of your graphic image. There is also a progressive version of JPG, but not all browsers display it progressively.

• Most web designers recommend that the total size of all downloads associated with web pages should not exceed 50 kilobytes (kb). While web pages larger than this will download quickly over the campus network (and the college's fast Internet connection), many off-campus viewers still use 14.4k and 28.8k modems, which download files from the Internet very slowly. To determine the size of downloads associated with your pages, go to Windows Explorer (again, not Internet Explorer). Beside the name of each file, you will see listed its size in kilobytes. Add up the file size of all material, HTML files and graphics files, to be displayed on a single page of your web site. This number should be less than 50 kb.

• Try to keep a common look and feel to your pages so that each page will look like one part of a whole.

• Use tables to layout your page.

• A good rule of thumb is that no page should be more than two or three screens long. If your page goes longer than this for no good reason, break it into multiple pages hyperlinked to each other.

• In sizing your graphics and tables, be aware that many computer monitors can display no more than about 600x400 pixels (the individual units of color which paint your screen). If you try to place two graphics side by side, each of which measures 350 pixels, one image will run off the screen or it will be displayed on the next line.

• Try to find a focal point (or points) for your page where you display your most important information. Avoid design elements which will draw the viewers' eyes away from the focal points.

• Avoid excessive use of animated GIFs (graphics which seem to move). One or two can add life to your page, more than that will distract your viewers.

• Avoid using too many different colors.

• In general, don't use frames (that's when the web author divides a page into multiple regions, each with its own scroll bar or when the author includes a section of a page which remains visible along the edge of each page as you navigate around in the site).

• Be aware that each brand and version of an Internet browser displays HTML differently. A page which looks good when designed for Microsoft's Internet Explorer may not look as good when viewed with Netscape or vice versa. Likewise, a page which looks good in the Windows version of Netscape may not look as good when viewed with the Macintosh version of Netscape or vice versa. You may want to look at your page in each of the major browsers to be sure the results are what you want.

• A good rule of thumb is that no page on your site is more than three mouse clicks away from your start page.

• Develop some simple and consistent method to move around among your pages. You might use a navigation bar included at the top or bottom of each page or navigation buttons on the side of every page.

• If you use multiple pages, include a site map. This is a single page with a hyperlink to every one of your pages. The viewer should be able to get to the site map with a single mouse click from any page on your site.