Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Web Design Basics  Home Web Design Basics Design Principles Navigation Tricks
rss

Navigation Tricks

Author: Jeff Singer More by this author


Some Free Advice!

One of the most important steps you must take in setting up a web site is to provide people with an easy and consistant method of getting around. For each method and example that is presented, the benefits and drawbacks of each will be explained.

The best advice we can give you is that you try and make it as easy as possible for a person to stay in your site. Being overly creative in this aspect of web design will most likely not work to your advantage.

The navigation method on your site is much like the controls of a car. Think about how clever it would be to switch the gas and break pedals. Allow people to concentrate on your content- not your controls.

The Traditional Icon Navigation Bar

This is the a method that we prefer to use, typically we will use this on all of our pages in one form or another. I feel that it is superior to image maps and JAVA for a few reasons:

  • Low maintainence.
  • Everybody pretty much can figure out what they mean.
  • By using the ALT description- it works great with text based browsers.
  • It is very easy to add new choices or eliminate obsolete ones.
  • Does not require JAVA, ACTIVE-X, and even loads faster than a typical image map.

Here is an example of the typical navigation bar:

Look familiar? Nice, Simple, familiar icons.

DON'T FORGET TO:

  • Use the ALT description
  • Set the HEIGHT and WIDTH values

Example

Home Top E-mail Guestbook

Source code

<A HREF="/index.shtml"><IMG SRC="/images/home.gif"
HEIGHT="40" WIDTH="40" ALT="Home"></A>
<A HREF="#TOP"><IMG SRC="/images/top.gif" ALT="Top" HEIGHT="40"
WIDTH="40"></A>
<A HREF="#MAILFORM"><IMG SRC="/images/email.gif" HEIGHT="40"
WIDTH="40" ALT="E-mail"></A>
<A HREF="/guestbook.html"><IMG SRC="/images/gbook.gif"
ALT="Guestbook" HEIGHT="40" WIDTH="40"></A>



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Navigation Tricks"