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
Graphics Tutorials |
Hex Triplet Color Chart
| Web Page Template ]
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
to say, or don't say it clearly, all the special effects on the web
not make your pages more valuable to the reader.
with an outline
or story board to get a sense of the web site's structure. Leave room
expansion. Name the home page "index.htm". Use an organized method to
the other pages (files) so that the file name offers a clue to the
80% of users do NOT scroll down from the first screen of a web page.
put the main ideas and menus at the top (first screen) of each web
The first screen should be designed to be complete and balanced. Don't
use large graphics that the user must scroll down to see.
pyramid style of newspaper writing, with the important information
should make sense and be readable with the graphics turned off. Many
are still using 14.4 modems and/or often turn off graphics. Therefore,
use graphics sparingly. Keep graphics files under 40K. Make sure each
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
a short description will appear. Some browsers show this text too when
the cursor is place on top of the graphic.
a page takes
more that 3 screens to scroll, consider creating a new web page.
footers on each web page. Information in a header or footer helps to
the web site. A footer, especially on the homage, can also include
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
Readers can use this info to contact you if the web server is down.
that many users print out web pages, so writing out e-mail and URL
can be helpful for hard copies.
pages. Always include a return link or menu of links back to the rest
your web site. You can use the Jefferson Web
Template and/or check the correct relative
links for web pages, espeically teacher directories.
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
The user can then decide if they want to click on the thumbnail and
and height of your graphics in pixels so that pages and text load
For example: (IMG SRC="planet.jpeg" width=90 height=90)
command for your graphics so that users who have graphics turned off
see a description of the missing item. For example: (IMG
ALT="Planet Diagram" width=90 height=90)
by NOT using background images on web pages. Use colored backgrounds
text to get a similar effect. See the RGB
Hex Triplet Color Chart for HTML color codes that work on Mac and
diagrams, convert images to the GIF format. For photos, use the JPEG
Set pixels at 72 per inch for screen presentations, and color at 256.
on dark backgrounds, and light text on light backgrounds. Keep contrast
high. Unless there are other design considerations, use white
and black text. Red can be used for emphasis.
other design considerations, use standard link colors. Avoid using
locate and catalog your web site by including meta tags on the home
between the (HEAD)(/HEAD) tags. For example:
(META NAME="robots" CONTENT="index, follow")
sure you credit
all material gather from the www, e-mail, newsgroups, ftp, etc. See Citing
Internet Resources and Copyright
names, especially with photos. Use initials instead, or only first names. Have the students and parent complete the LAUSD release form.
to let readers know how recent the web site was modified. Place this
the title or footer.
link back to the webmaster outdated links and feedback. You will need
assistance in keeping outside links up-to-date.
address and phone on homepage. Never include personal information.
The blink tag was created as a joke. AVOID using it.
your web site
out on different web browsers. Colors, frames, and other features can
very different in Netscape, Internet Explorer, and Mosaic. Also avoid
the latest technology on your site. Many browsers may not support it.
not using frames. Frames make it difficult to bookmark pages, and thus
defeat one of the main advantages of the web.
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.
after you upload
your web site, don't forget to register it at Siteowner
Site Garage. These web site
registries include most of the main search engines and directories.
also offer features to evaluate your web site.
also the Top
Ten Mistakes in Web Design.
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
W3C reminds web authors that, "HTML documents are supposed to be
around items such as paragraphs, headings and lists. Yet some of these
(new) documents barely have a paragraph tag in sight!"
web graphics that you can use to spice up your web site. Remember
credit the artist on your web site. Make sure you credit
the artist when using free graphics on your web site.
(META Name="keywords" Content="jefferson high school, web pages, html,
(META NAME="description" CONTENT="Helpful tips on creating web sites.")
[ Return to HOWTO Documents ]