Jefferson H.S.

Tips for Creating Effective Web Sites

By K. Ballash. Updated April 1997, June, October 1998, March 1999, March 2000, December 2000, November 2001, May 2003, January 2008.

[ Free Web Graphics  | HTML Resources | Web and Graphics Tutorials | RGB Hex Triplet Color Chart | Web Page Template ]

Remember that "Content is King". Ideas are what counts. Present them clearly and simply. Readers grow tired of fancy graphics and animations. Use these features ONLY to enhance your message. If you don't have anything important to say, or don't say it clearly, all the special effects on the web will not make your pages more valuable to the reader.

  • Start with an outline or story board to get a sense of the web site's structure. Leave room for expansion. Name the home page "index.htm". Use an organized method to name the other pages (files) so that the file name offers a clue to the content.
  • Studies show that 80% of users do NOT scroll down from the first screen of a web page. Therefore, put the main ideas and menus at the top (first screen) of each web page. The first screen should be designed to be complete and balanced. Don't use large graphics that the user must scroll down to see.
  • Use the inverted pyramid style of newspaper writing, with the important information first.
  • Your web pages should make sense and be readable with the graphics turned off. Many users are still using 14.4 modems and/or often turn off graphics. Therefore, use graphics sparingly. Keep graphics files under 40K. Make sure each graphic has a purpose and adds something to the web page. Add a text link as an alternative to any graphic link or menu. Then is the graphic does not load, a short description will appear. Some browsers show this text too when the cursor is place on top of the graphic.
  • If a page takes more that 3 screens to scroll, consider creating a new web page.
  • Use headers and/or footers on each web page. Information in a header or footer helps to identify the web site. A footer, especially on the homage, can also include information on who and what organization helped to create the web site, the date it was created and updated, e-mail link to the webmaster for questions or to report problems, and address and phone number to contact for more information. Readers can use this info to contact you if the web server is down. Remember that many users print out web pages, so writing out e-mail and URL links can be helpful for hard copies.
  • Avoid orphan web pages. Always include a return link or menu of links back to the rest of your web site. You can use the Jefferson Web Template and/or check the correct relative links for web pages, espeically teacher directories.
  • If graphics are over 40K, use "thumbnails" to give users the option to select a larger version of the graphic. If the photo is a large file, warn the user by including the size in the photo title. For example, "River Flooding (135K)". The user can then decide if they want to click on the thumbnail and download the graphic.
  • Include the width and height of your graphics in pixels so that pages and text load faster. For example: (IMG SRC="planet.jpeg" width=90 height=90)
  • Include the "ALT=" command for your graphics so that users who have graphics turned off can see a description of the missing item. For example: (IMG SRC="planet.jpeg" ALT="Planet Diagram" width=90 height=90)
  • Save bandwidth by NOT using background images on web pages. Use colored backgrounds and text to get a similar effect. See the RGB Hex Triplet Color Chart for HTML color codes that work on Mac and Windows browsers.
  • For drawings and diagrams, convert images to the GIF format. For photos, use the JPEG format. Set pixels at 72 per inch for screen presentations, and color at 256.
  • Avoid dark text on dark backgrounds, and light text on light backgrounds. Keep contrast high. Unless there are other design considerations, use white backgrounds and black text. Red can be used for emphasis.
  • Unless there are other design considerations, use standard link colors. Avoid using underlining.
  • Help search engines locate and catalog your web site by including meta tags on the home page, between the (HEAD)(/HEAD) tags. For example:
  • (META NAME="robots" CONTENT="index, follow")
    (META Name="keywords" Content="jefferson high school, web pages, html, web site")
    (META NAME="description" CONTENT="Helpful tips on creating web sites.")
  • Make sure you credit all material gather from the www, e-mail, newsgroups, ftp, etc. See Citing Internet Resources and Copyright web site.
  • Don't include student names, especially with photos. Use initials instead, or only first names. Have the students and parent complete the LAUSD release form.
  • Use update information to let readers know how recent the web site was modified. Place this near the title or footer.
  • Include an e-mail link back to the webmaster outdated links and feedback. You will need reader assistance in keeping outside links up-to-date.
  • Include school address and phone on homepage. Never include personal information.
  • The blink tag was created as a joke. AVOID using it.
  • Test your web site out on different web browsers. Colors, frames, and other features can look very different in Netscape, Internet Explorer, and Mosaic. Also avoid using the latest technology on your site. Many browsers may not support it.
  • Many experts suggest not using frames. Frames make it difficult to bookmark pages, and thus defeat one of the main advantages of the web.

  • You can also use your web site off-line for presentations. If this is a possibility, use larger text sizes and consider using an outline format.

  • And after you upload your web site, don't forget to register it at Siteowner and Web Site Garage. These web site registries include most of the main search engines and directories. They also offer features to evaluate your web site.
  • See also the Top Ten Mistakes in Web Design.
  • Check out more on-line HTML Resources to help you learn HTML and create better web sites. And read the W3C HTML site for updates on HTML 4, XML, stylesheets, and other HTML developments. W3C reminds web authors that, "HTML documents are supposed to be structured around items such as paragraphs, headings and lists. Yet some of these (new) documents barely have a paragraph tag in sight!"
  • Check out free web graphics that you can use to spice up your web site. Remember to credit the artist on your web site. Make sure you credit the artist when using free graphics on your web site.
  • [ Return to HOWTO Documents ]