Text only

Click to Follow Links! Faculty Summer Institute Home Page Click to Follow Links!
Home | Using the Internet for Instruction | Introduction to FrontPage 2000Searching the Internet | Effective Web Page Design | Introduction to WebBoard | Online Tools for Educators | Copyright Issues | Using Web Graphics | Projects by Participants
Effective Web Page Design: The Good
  • Emphasize Readability
    Be creative and original, but remember that your text will probably be the most important information on your pages. Make sure that the text is large enough and clear enough for viewers to read easily, and avoid backgrounds and color combinations that make text difficult to read.

  • Emphasize the Especially Important Information
    Particularly on a course home page, the especially important information should be in front of viewers as soon as the page loads. Some viewers may not even scroll down your page, so you should make sure that they will see what you want them to see even if they do not scroll down.

  • Use Logical and Effective Navigation
    Think organization. Viewers should not get lost in your web site. Effective navigation will help viewers know where they are in your site at all times. In general, navigation links appear either at the top of the pages or at the left borders. At large web sites, the home page generally is linked to a series of primary pages, from which other pages are linked. Viewers should not have to click more than three times to get the information they need, and they should have no problem figuring out how to locate that information. Some web designers like to use storyboards to plan and organize their web sites.

  • Keep Pages Short but Deep
    Web pages should not be too long. In the web environment, short pages that are "deep" (with progressive links) are more effective than long pages.

  • Break Up Large Amounts of Text
    Viewers read web pages differently and more slowly than they read printed text. Text on web pages is easier to read if it is broken up, with blank space, numbering or bullets, tables, or horizontal lines.

  • Give a Title to Your Page
    Type both the URL and the title of your page when you choose "save" in FrontPage. Titles are what appear at the top of the web browser when viewers access your page and what appear in the list of bookmarked titles in web browsers.

  • Preview Your Web Pages with Different Browsers on Different Computers
    Web pages do not look the same on all computers or with all web browsers and browser versions, so you should preview your pages with various browsers and computers to make sure that the web pages look the way you want them to.

  • Use Browser-Safe Colors
    You can use thousands of color variations for your web pages, but the majority of these colors look different on different computers. However, 216 colors look the same regardless of the web browser or computer. If you want to be guaranteed that the colors in your web pages will look the same for everyone who visits your pages, you should choose colors only from the 216 "browser-safe" colors. The 216 safe colors are presented nicely at Lynda Weinman's The Browser-Safe Color Palette.

  • Use Tables to Format Your Pages
    Tables are extremely important for the formatting of web pages. A few of the tables on this page are obvious, but all seven of the tables may not be so obvious. For example, an "invisible" table separates the table containing this text from the table containing the "Faculty Summer Institute" images. Under "Table Properties," choose "0" for "Border Size" if you do not want viewers to see the table borders. Effective and creative use of tables can help you format web pages.

  • Keep the Content of Pages less than 640 Pixels Wide
    Today, most web viewers use a screen resolution of at least 800 x 600 pixels, but some viewers use a screen resolution of only 640 x 480 pixels, meaning that those viewers will have to scroll to the right to view all of the content of web pages that are wider than 640 pixels. You can control the width of your page by putting the content in a large table.

  • Keep Pages at a Reasonable Size
    Very long pages and heavy use of graphics will increase download time, which can be a significant problem for viewers with less than optimal Internet connections and computers, which would include just about all of your home viewers. Previewing pages with a home computer will help you get a sense of the download time. 

  • Use Graphics
    Viewers have come to expect graphics on web pages, and a few well-chosen and relevant graphics can greatly enhance web pages. Notice the size of your graphics files, though, and avoid large files, which will increase download time. Thousands of free graphics are readily available at many web sites, and graphics can be easily downloaded to your computer with a few mouse clicks. Do not just take any graphics from the web, though, since they all are copyrighted. The producers of free web graphics grant permission for others to use their graphics. (A good listing of available graphics is at The Free Site's Free Graphics Resources.)

  • Use Alternative Text for all Graphics
    To increase download time, some viewers turn off the graphics on their web browsers, meaning that only text and no graphics appear on their screens. For every graphic on your pages, then, you should supply alternative text, which will appear instead of graphics when graphics are disabled. To supply alternative text, when working in FrontPage Editor, right mouse click on the image and choose "Image Properties." Then, type the text into "Alternative Representation"and click "OK." Alternative text for graphics will also appear when your web pages load and when the cursor rests over the image in a browser. Alternative text can also be interpreted by programs that read web pages to the visually impaired.

  • Include the Same Important Information on Every Page
    On every page at your web site, you should include (1) A home page or e-mail link, (2) a copyright notice, and (3) the date that the page was last updated. In FrontPage, you can insert a WebBot called a "timestamp" that automatically changes the date every time you update a page.

  • Make Sure your E-Mail Address Appears on Pages
    When including your e-mail address on pages, type the address itself and do not simply include a link such as Send me Mail. Web browsers have to be configured to enable the user to send and receive e-mail, and many of your viewers will only receive an error message if they click on something like Send me Mail.

  • Keep Your Pages and Links Updated
    You have a worldwide audience for your web pages, and you may have a lot of visitors curious about you, the information you present, and the college. Outdated information and broken links will cause viewers to leave your web pages faster than you can say "click."

  • Back up your Web Pages
    This is not a matter of design but of common sense. Back-up copies of your web pages could save you hundreds of hours of reproducing web pages if something terribly wrong ever happens to the college server. When you finish working on a web page in FrontPage Editor, click "save" as usual to save the page to the server. Then, click on "File" and choose "Save As." Click on the folder icon to the right of the URL space on the "Save As" screen and choose the destination where you would like to save the file. Graphics in web pages are saved as separate files, so you may need to indicate that you also want the graphics copies along with the page.

Faculty Summer Institute Start Page | Faculty Summer Institute: Session 1 Home Page
Dawn Lockwood's Home Page | Randy Rambo's Home Page
Faculty Facilitator Home Page | IVCC Home Page
Page last updated June 01, 2006. Copyright Randy Rambo, 2000.