Hey there HTML coders. Hope you've had a good week so far. In this
episode of the HTML Newsletter, we're going to take a look at an
incredibly simple way to provide backward and forward navigation buttons
for your audience right on your Web page. This eliminates the need for
users to hit the Back and Forward buttons on their browsers, which may
not sound like such a big deal. We're going to talk about why serving up
those links yourself can make their lives a bit easier, and make you
look better.

Most Web users are pretty comfortable with the Back and Forward buttons
on their browsers. If you've done any Web surfing at all, you're
probably hip to them as well, especially the Back button. After all, the
Back button is our friend, right? The Back button can get us out of
terrible Websites very quickly. For instance, let's say we're at work
and we're doing some research on the U.S. President (note: the first
link that will take you to a site with content is, a. definitely adult
in nature and, b. has nothing whatsoever to do with the President or the
White House that we know of) and we accidentally type in
http://www.whitehouse.com instead of http://www.whitehouse.gov.

Woops! Big mistake, right? What if our boss walks by? The quickest way
to get the .com version off our page is to hit the Back button on our
browser. In seconds we're back in safe territory -- whatever site we
were on previously. And we can re-type that URL, correctly this time.
This is undeniably a great use for the Back button.

However, that's not the only use for the Back button. These days, quite
a few poorly designed sites rely on visitors to use the Back and Forward
buttons to navigate through their pages. How do they do this? Easy. By
not providing useful and well thought out navigation to begin with. If
the user isn't able to find a way to get back to where they just were,
the Back button ends up being used as the primary navigation tool on the
site. This is generally a bad idea. Why? Because, as a designer, it
makes you look bad. There are a few other options, of course.

The Breadcrumb Option
Use of breadcrumbs is a good idea in such instances. What are
breadcrumbs? Breadcrumbs are lists of visited pages on a site, in order
from the home page to the most recent page a user has been on. They
chronicle the user's journey through the site, and they provide an easy
way for the user to access earlier pages they may want to visit again. A
good example of a site with breadcrumbs is: http://www.tpl.org/ -- The
Trust for Public Land Website.

However, breadcrumbs aren't the easiest things to implement site-wide on
a moment's notice-especially if you already have your site built for the
most part. In this case your best bet may be to add your own forward and
back buttons to your Web pages. It's relatively easy, foolproof, quick,
and there are a few ways you can do it too, depending on your tastes.
Our method makes use of the history object in JavaScript. But don't be
put off by the JavaScript. It's probably a lot simpler to add than you
think!

Get Back and Forward Too
First, let's add Back and Forward hyperlinks to a page. The code looks
like this:

Back

Forward

Basically, we're using JavaScript to tell the browser to go back one
page in the page history for the first link, and to go forward one page
in the page history for the second link. If there's no "future" page to
go to, the Forward link won't take the user anywhere. By adding these
two lines of code to each of your pages, you enable your viewer to
navigate around without having to go off your page to get where they
want to go.

If you want to get a little more graphical with this, you can use form
buttons instead of links to take your visitors back or forward. The code
looks like this:

We're basically doing the same thing here as in the last block of code
-- using the JavaScript history element. This time we're enclosing the
code in a form that will let us use form buttons for graphics. Try the
code out and see what you think. I think it looks very nice, though.

So, why bother with these home made Back and Forward buttons in the
first place? The most important reasons are a) it keeps your site
navigation where it should be -- on your site -- and b) it provides a
very popular navigation tool for your users. It's all about design--why
rely on someone else's tool to get your viewers around? You're a Web
designer, after all. You're good enough to make these things yourself!

That's all we have for this week, people. Until next week, take care and
have a great one!

» posted by ITworld staff

ITworld

• Email
• Print
• Share
  • Slashdot
  • Digg
  • Stumble
  • Reddit
  • Newsvine