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 ]
