The dos and don’ts of web navigation

Do

• Use appropriate types of navigation.
• Provide alternate means of accessing information.
• Ensure links stand out.
• Take advantage of link states to provide feedback for users.
• Get the link state order right (link, visited, hover, active).
• Use styled lists for navigation.
• Use CSS and as few images as possible (preferably one) for rollovers.

Don’t

• Add search boxes just for the sake of it.
• Use deprecated body attributes.
• Style navigation links like normal body copy.
• Use image maps unless absolutely necessary.
• Open new windows from links or use pop-ups.
• Use clunky JavaScript for rollovers.

Using CSS backgrounds to create a navigation bar

1. Edit the body element. Like in the previous exercise, edit the body start tag, adding
the id value shown.
<body id="homePage">

2. Style the structural divs. This page’s structure is simple, as are the CSS rules
required to style it. The #wrapper rule sets a fixed width (which is four times the
width of one of the tabs) and centers the design in the browser window. The
#masthead rule adds some padding at the top of the masthead, so the tabs won’t
hug the top of the browser window.
The #navContainer rule has a bottom border (to firmly separate the navigation
from the other page content) and a defined height, which is the height of a tab.
The height setting is useful, because these tabs will be floated, meaning they’re
outside of the standard document flow. By giving the container a fixed height, the
border is shown in the right place; without the height definition, the border would
be displayed at the top of the navContainer div, because as far as browsers are
concerned, floated elements technically don’t take up any height within the standard
document flow.
Finally, the #content rule gives that area a background color and some padding.
#wrapper {
width: 740px;
margin: 0 auto;
}
#masthead {
padding-top: 20px;
}
#navContainer {
height: 30px;
border-bottom: 5px solid #ad3514;
}
#content {
padding: 10px;
background-color: #eeeeee;
}

3. Style list items. Items within the list are styled to float left. The background value
includes the location of the rollover image, with additional settings being
no-repeat (to stop it from tiling), and then 0 and 0, to ensure the relevant portion
of the rollover image is seen by default. The width and height values are the same
as that of the image: 185px and 30px, respectively.
#navigation li {
float: left;
background: url(css-tab-rollover-image.gif) no-repeat 0 0;
width: 185px;
height: 30px;
}

4. Next, style the links. The text is rendered in white, uppercase, and in Arial, and the
default underlines are removed. Setting display to block makes the entire link
container into an active link, thereby making the navigation bar work in the traditional
manner (rather than just the text being active). Finally, the padding settings
position the text correctly over the background images. The height setting, combined
with the padding top setting of 9px, adds up to the height of the container—
30px. Without this, the space underneath the text would not be active.
#navigation a:link, #navigation a:visited {
font: bold 1.1em Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #ffffff;
text-decoration: none;
display: block;
height: 21px;
padding: 9px 0px 0px 30px;
}

5. Style other link states. For the hover and active states, you define which portion
of the rollover graphic is supposed to be visible. This is done via background position
values. The first of these remains 0, because you always want to see the image
from its far left. The vertical reading depends on where the relevant portion of the
image appears in the rollover graphic.
If you check css-tab-rollover-image.gif in an image editor, you’ll see the hover
state graphic is 40 pixels from the top and the active state graphic is 80 pixels
from the top. This means the image needs to be vertically moved –40 pixels and
–80 pixels for the hover and active states, respectively. Therefore, the rules for
these states are as follows:
#navigation a:hover {
background: url(css-tab-rollover-image.gif) 0 -40px;
}
#navigation a:active {
background: url(css-tab-rollover-image.gif) 0 -80px;
}

6. Define the active section state. As per step 8 of the previous exercise, the active
state graphic can be set. In this case, this is done by displaying the fourth state in
the rollover image via the following rule:
#homePage #homePageLink a:link, #homePage #homePageLink a:visited,
å #servicesPage #servicesPageLink a:link, #servicesPage
å #servicesPageLink a:visited, #customerSupportPage
å #customerSupportPageLink a:link, #customerSupportPage
å #customerSupportPageLink a:visited, #contactDetailsPage
å #contactDetailsPageLink a:link, #contactDetailsPage
å #contactDetailsPageLink a:visited {
background: url(css-tab-rollover-image.gif) 0 -120px;
}
Again, you can change the id value of the body element to one of the other list
item id values to change the active section link.

Creating a simple horizontal navigation bar in CSS

1. Examine the web page. The web page for this exercise—graphical-navigation.
html—is designed for flexibility when it comes to styling elements on the page,
making it easy to change elements without touching the markup (this page is used
with a few modifications in subsequent exercises, too).
The page’s contents are placed within a wrapper div, within which are the masthead
and content divs. The latter contains some paragraphs, and the former
includes a navContainer div, which houses a navigation div, which in turn houses
the unordered list shown in the following code block. (This nesting of divs isn’t
required for all sites—often you can get away with a single div around the navigation
list—or, indeed, none at all, applying the id value of navigation to the list
itself; however, having an additional wrapper or two is often useful for more complex
layouts.)
The list is an unordered list. The main difference to previous lists is the inclusion of
an id value for each list item. For horizontal lists, especially those that will be highly
styled, this is worth doing, because it enables you to work all manner of CSS trickery
later on, which can benefit the web page. (In fact, some of the techniques can
be applied to vertical lists, too.)
<ul>
<li id="homePageLink"><a href="#">Home page</a></li>
<li id="servicesPageLink"><a href="#">Services</a></li>

<li id="customerSupportPageLink"><a href="#">Customer support</a>
å</li>
<li id="contactDetailsPageLink"><a href="#">Contact details</a></li>
</ul>

2. Edit the body and p rules. This design is going to have a classic feel, so in the CSS
file, edit the body rule to amend the font set, add a light gray background, and
amend the p rule to change the font size.
body {
font: 62.5%/1.5 Georgia, "Times New Roman", Times, serif;
background: #dddddd;
}
p {
font-size: 1.3em;
margin-bottom: 1em;
}

3. Style the structural divs. First, add a rule to style the wrapper div, as shown in the
following code block. This sets a fixed width for the div, centers it horizontally, and
applies borders on all edges except the top one. The background value provides a
white background for the page’s content. (Note that there’s plenty of explanation
about page layout in Chapter 7.) For the content area, add some horizontal
padding by adding the #content rule shown in the following code block.
#wrapper {
width: 700px;
margin: 0 auto;
border-right: 1px solid #898989;
border-bottom: 1px solid #898989;
border-left: 1px solid #898989;
background: #ffffff;
}
#content {
padding: 0 15px;
}

4. Style the navigation container by adding the following rule to style the
navContainer div. In this rule, the font style for the navigation bar’s links is set,
and the text-align value centers the content horizontally. The padding value
applies some padding at the top and bottom of the navContainer div, ensuring
its content doesn’t hug its edges—in design, the space is often as important as the
content, so don’t cram things in.
#navContainer {
font: 1.1em/1 Georgia, "Times New Roman", Times, serif;
background: #d7d7d7;
text-align: center;
padding: 7px 0px;
border-top: 1px solid #898989;
border-bottom: 1px solid #898989;
margin-bottom: 10px;
}

5. Style the list items. Now that the structure’s styled, it’s time to get cracking on the
list. First, add a rule to remove the default bullets from the unordered list within
the navigation div.
#navigation ul {
list-style: none;
}
Next, set the list items to display inline, as with the breadcrumbs. Add some horizontal
padding, and also, as shown, add a border to each item’s right-hand edge,
which will act as a visual separator, making each link more distinct.
#navigation li {
display: inline;
padding: 0px 9px;
border-right: 1px solid #aaaaaa;
}
If you test the page at this point, you’ll see that all the links have a right-edge border—
not a terrible crime—but from a design standpoint, the one at the far right
shouldn’t have one (after all, separators are only needed between pairs of links).
Luckily, because of the id values applied to the list items earlier, each one can be
individually styled, which also means an override can be applied to a specific link.
In this case, add the following rule, which removes the border from the list item
with an id value of contactDetailsPageLink:
#navigation #contactDetailsPageLink {
border-right: none;
}

6. The last thing to do is style the links. The following rules set the link text to uppercase,
removing the default underline and coloring them black by default. The links
are then gray on the visited state, have an underline on the hover state, and are
red on the active state.
#navigation a:link, #navigation a:visited {
text-transform: uppercase;
text-decoration: none;
}
#navigation a:link {
color: #000000;
}
#navigation a:visited {}
#navigation a:hover {
text-decoration: underline;
}
#navigation a:active {
color: #ff0000;
}

**NOTE :In this example, the color of the navigation links—which have no underline—is the
same as the body copy. While this would be a very bad idea for inline links, it’s fine for
the navigation links, because they’re obviously distinct from the text elsewhere on the
page, due to the background color and horizontal line that separates the navigation
area from the content area.

Creating breadcrumb navigation

1. Add the list. In the HTML document, add the following code for the breadcrumbs.
Note that the last item signifies the current page—this is why it’s not a link.
<ul id="breadcrumbs">
<li><a href="#">Home page</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Live gigs</a></li>
<li>London, 2008</li>
</ul>

2. Add some body padding. Add a padding value to the existing body rule.
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
}

3. Style the list by adding the following rule. The font-size setting specifies the font
size for the list items, and the margin-bottom setting adds a margin under the list.
ul#breadcrumbs {
font-size: 1.2em;
margin-bottom: 1em;
}

4. Add the following rule to style the list items. By setting display to inline, list
items are stacked horizontally. The background value sets double-arrow.gif as the
background to each list item (ensure it’s in the same directory as the CSS document,
or modify the path accordingly); the positioning values ensure the background
is set at 0 horizontally and 50% vertically, thereby vertically centering it at
the left—at least once no-repeat is set, which stops the background tiling. Finally,
the padding value sets padding at the right of each list item to 10px, ensuring items
don’t touch the subsequent background image; the left padding value of 15px
provides room for the background image, ensuring the list item text doesn’t sit on
top of it.
#breadcrumbs li {
display: inline;
background: url(double-arrow.gif) 0 50% no-repeat;
padding: 0 10px 0 15px;
}

**Note that when list items are displayed inline, the default bullet points are not displayed.
This is one reason why the bullets in this example are background images,
although we also wanted something more visually relevant, right-facing arrows showing
the path direction.

Creating a vertical navigation bar with collapsible sections

1. Set up the JavaScript. Create a new JavaScript document and attach it to the HTML
file via a script element in the head of the document. (In the example files, this
document has been named vertical-navigation-bar.js.) First, add the
JavaScript lines first shown in the “Enhancing accessibility for collapsible content”
section:
var cssNode = document.createElement('link');
cssNode.setAttribute('rel', 'stylesheet');
cssNode.setAttribute('type', 'text/css');
cssNode.setAttribute('href', 'javascript-overrides.css');
document.getElementsByTagName('head')[0].appendChild(cssNode);
Next, add the toggler script shown in the “Modularizing the collapsible content
script” section, but amend the target element as shown:
function toggle(toggler) {
if(document.getElementById) {
targetElement = toggler.nextSibling;

if(targetElement.className == undefined) {
targetElement = toggler.nextSibling.nextSibling;
}
if (targetElement.style.display == "block")
{
targetElement.style.display = "none";
}
else
{
targetElement.style.display = "block";
}
}
}

2. Amend the list. To each top-level navigation link, add the onclick attribute, as
shown following. And to each second-level list that you initially want to be invisible,
add the class attribute shown. For any list you want to be visible, instead add
style="display: block;".
<li>
<a href="#" onclick="toggle(this); return false;">Section one</a>
<ul class="collapsibleList">
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>

3. Add a style sheet. Create and save the style sheet document javascriptoverrides.
css, and add the following rule to initially hide any lists with the
collapsibleList class value in JavaScript-enabled browsers.
#navigation ul.collapsibleList {
display: none;
}
The following images show the results (which depict, from left to right, the
default, hover, and active states).

Using HTML lists and CSS to create a button-like vertical navigation bar

1. Create the list structure. Add the following code block to create the structure of
the navigation bar. By using nested lists, you can provide the navigation bar with a
hierarchical structure (and you can style each level in CSS). In this example, the list
has two levels. (Refer to Chapter 3 for an overview of correctly formatting lists.)
This list is nested within a div with an id value of navigation, which we’ll later take
advantage of by using contextual selectors. (For this example, dummy href values
of # are being used, but in a live site, always check that your links lead somewhere!)
<div id="navigation">
<ul>
<li>
<a href="#">Section one</a>
<ul>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>
<li>
<a href="#">Section two</a>
<ul>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>

<li>
<a href="#">Section three</a>
<ul>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>
</ul>
</div>

2. Add some padding to the body element, so page content doesn’t hug the browser
window edges. Also, add the background-color pair shown following:
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
background-color: #aaaaaa;
}

3. Style the list. Add the following rule to remove the
default bullet points from unordered lists within the navigation
div, define a width for the lists, and also set the
default font style.
#navigation ul {
list-style-type: none;
width: 140px;
font: 1.2em/1 Arial, Helvetica, sans-serif;
}

4. Set an override for nested lists. As you can see from the
previous image, the nested links have much larger text.
This is because font sizes in ems are inherited, and therefore
the font size within the nested lists ends up at
1.2ems multiplied by 1.2ems. By adding the following
rule, the font size of nested lists is reset to 1em, making
nested lists look the same as top-level lists.
#navigation ul ul {
font-size: 1em;
}

5. Style the buttons. Use a contextual selector to style links within the navigation div
(i.e., the links within this list). These styles initially affect the entire list, but you’ll
later override them for level-two links. Therefore, the styles you’re working on now
are intended only for level-one links (which are for sections or categories). This
first set of property/value pairs turns off the default link underline, sets the list
items to uppercase, and defines the font weight as bold.

#navigation a:link, #navigation a:visited {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
}

6. Set button display and padding. Still within the same rule, set the buttons to
display as block, thereby making the entire container an active link (rather than
just the link text). Add some padding so the links don’t hug the edge of the
container.
#navigation a:link, #navigation a:visited {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
display: block;
padding: 3px 12px 3px 8px;
}

7. Define colors and borders. Define the button background and foreground colors,
setting the former to gray and the latter to white. Then add borders to create a 3D
effect. Borders can be styled individually. By setting the left and top borders to a
lighter shade than the background, and the right and bottom borders to a darker
shade, a 3D effect is achieved. (Don’t use black and white, because it will make the
result is too harsh.)
#navigation a:link, #navigation a:visited {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
display: block;
padding: 3px 12px 3px 8px;
background-color: #666666;
color: #ffffff;
border-top: 1px solid #dddddd;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #dddddd;
}

8. Define other link states. The hover state is defined by
just changing the background color, making it slightly
lighter.
#navigation a:hover {
background-color: #777777;
}
The active state enables you to build on the 3D
effect: the padding settings are changed to move the text up and left by 1 pixel, the
background and foreground colors are made slightly darker, and the border colors
are reversed.

#navigation a:active {
padding: 2px 13px 4px 7px;
background-color: #444444;
color: #eeeeee;
border-top: 1px solid #333333;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-left: 1px solid #333333;
}

9. Style nested list item links. The selector #navigation li li a enables you to style
links within a list item that are themselves within a list item (which happen to be in
the navigation div). In other words, you can create a declaration for level-two links.
These need to be differentiated from the section links, hence the following rule
setting them to lowercase and normal font weight (instead of bold). The padding
settings indent these links more than the section links, and the background and
foreground colors are different, being very dark gray (almost black) on light gray
rather than white on a darker gray.
#navigation li li a:link, #navigation li li a:visited {
text-decoration: none;
text-transform: lowercase;
font-weight: normal;
padding: 3px 3px 3px 17px;
background-color: #999999;
color: #111111;
}

10. Style nested item hover and active states. This is done in the same way as per the
section links, changing colors as appropriate and again reversing the border colors
on the active state.
#navigation li li a:hover {
background-color: #aaaaaa;
}
#navigation li li a:active {
padding: 2px 4px 4px 16px;
background-color: #888888;
color: #000000;
border-top: 1px solid #333333;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-left: 1px solid #333333;
}
The navigation bar is now complete and, as you can see from the following images
(which depict, from left to right, the default, hover, and active states), the buttons
have a tactile feel to them. Should this not be to your liking, it’s easy to
change the look of the navigation bar because everything’s styled in CSS. To expand
on this design, you could introduce background images for each state, thereby
making the navigation bar even more graphical. However, because you didn’t

simply chop up a GIF, you can easily add and remove items from the navigation bar,
just by amending the list created in step 1. Any added items will be styled automatically
by the style sheet rules.

Enhancing skip navigation with a background image

1. Position the skipNav div. Add the following link to remove the skipNav div from
the document flow and position it at the top of the web page. The width and
text-align property values stretch the div to the full width of the browser window
and center the text horizontally, respectively.
#skipLink {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
2. Style the skip navigation link. Add the following rule to style the link within the
skipLink div. By setting display to block, the active area of the link stretches to
fill its container, thereby effectively making the entire containing div clickable. The
padding-bottom setting is important, because this provides space at the bottom of
the div for displaying the background image used for the hover state, added in the
next step. The color value is black (#000000) at this point, which ensures that the
text fits happily within the space available above the page content. (This may
change for users with non-default settings, but for the default and first zoom setting,
it’ll be fine.)
#skipLink a:link, #skipLink a:visited {
display: block;
color: #000000;
font: 1.0em Arial, Helvetica, sans-serif;
padding-top: 5px;
padding-bottom: 20px;
}

3. Recolor the skip navigation link. Change the color property so that the link blends
into the background.
#skipLink a:link, #skipLink a:visited {
display: block;
color: #fefefe;
font: 1.0em Arial, Helvetica, sans-serif;
padding-top: 5px;
padding-bottom: 20px;
}
4. Define the hover and focus states. Add the following rule to set the style for the
hover and focus states. This essentially makes the text visible (via the color setting)
and defines a background image—a wide GIF89 image with a downwardfacing
arrow at its center now appears when the user places their mouse cursor
over the top of the web page.
#skipLink a:hover, #skipLink a:focus {
color: #000000;
background: url(skip-navigation-down-arrow.gif) 50% 100% no-repeat;
}

Enhanced link accessibility and usability

The title attribute

Regular users of Internet Explorer for
Windows may be familiar with its habit of
popping up alt text as a tooltip. This has
encouraged web designers to wrongly fill alt
text with explanatory copy for those links that
require an explanation, rather than using the
alt text for a succinct overview of the image’s
content. Should you require a pop-up, add a
title attribute to your surrounding a element
to explain what will happen when the
link is clicked. The majority of web browsers
display its value when the link is hovered over
for a couple of seconds (see right), although
some older browsers, such as Netscape 4,
don’t provide this functionality.
<a href="large-image.html" title="Click to view a larger image">
å<img src="image.jpg" alt="This is some text that explains what
å the image is" width="400" height="300" /></a>
There are a few things to be mindful of when using title attributes. The first is that
behavior varies slightly between browsers, and the positioning and style of the tooltip cannot
be controlled. Internet Explorer exhibits some particularly quirky behavior. In addition
to displaying alt text as a tooltip, alt text defined within an img element will override (and
therefore be displayed instead of) title text for a surrounding a element. However, if the
title and alt attributes are both placed within the img element, the title attribute wins
out. Therefore, some technically unnecessary duplication of content is required to ensure
compliance from Internet Explorer. Also, Microsoft’s browser does not display title text
when you mouse over area elements within image maps.

Using accesskey and tabindex

I’ve bundled the accesskey and tabindex attributes because they have similar functions—
that is, enabling keyboard access to various areas of the web page. Most browsers enable
you to use the Tab key to cycle through links, although if you end up on a web page with
dozens of links, this can be a soul-destroying experience. (And before you say “So what?”
you should be aware that many web users cannot use a mouse. You don’t have to be
severely disabled or elderly to be in such a position either—something as common as
repetitive strain injury affects plenty of people’s ability to use a mouse.)
The accesskey attribute can be added to anchor and area elements. It assigns an access
key to the link, whose value must be a single character. In tandem with your platform’s

assigned modifier key (Alt for Windows and Ctrl for Mac), you press the key to highlight or
activate the link, depending on how the browser you’re using works.
<a href="index.html" accesskey="/">Home page</a>
An ongoing problem with access keys is that the shortcuts used to activate them are
mostly claimed by various technologies, leaving scant few characters. In fact, research conducted
by WATS.ca (www.wats.ca/show.php?contentid=32) concluded that just three
characters were available that didn’t clash with anything at all: /, \ and ]. This, combined
with a total lack of standard access key assignments/bindings, has led to many accessibility
gurus conceding defeat, admitting that while there’s a definite need for the technology, it’s
just not there yet.
The tabindex attribute has proved more successful. This is used to define the attribute’s
value as anything from 0 (which excludes the element from the tabbing order, which can
be useful) to 32767, thereby setting its place in the tab order, although if you have 32,767
tabbable elements on your web page, you really do need to go back and reread the earlier
advice on information architecture (see Chapter 1). Note that tab orders needn’t be consecutive,
so it’s wise to use tabindex in steps of ten, so you can later insert extra ones
without renumbering everything.
Not all browsers enable tabbing to links, and others require that you amend some preferences
to activate this function, and so tabindex ultimately only really comes in handy
when working with forms, as you’ll see in Chapter 8. When used for too many other elements,
you also run the risk of tabindex values hijacking the mouse cursor, meaning that
instead of the Tab key moving the user from the first form field to the second, it might end
up highlighting something totally different, elsewhere on the page. What’s logical to some
people—in terms of tab order—may not be to others, so always ensure you test your websites
thoroughly, responding to feedback.

Skip navigation links
Designers who work with CSS layouts tend to focus on information structure, rather than
blindly putting together layouts in a visual editor. This is good from an accessibility standpoint,
because you can ensure information is ordered in a logical manner by checking its
location in the code. However, when considering alternate browsers, it’s clear that some of
the information on the page will be potentially redundant. For example, while a user surfing
with a standard browser can ignore the masthead and navigation in a split second, rapidly
focusing on the information they want to look at, someone using a screen reader will
have to sit through the navigation links being read out each time, which can prove
extremely tedious if there are quite a few links.
Various solutions exist to help deal with this problem, and although you can use CSS to
reorder the page information (most commonly by placing the code for the masthead at
the end of the HTML document and then using absolute positioning to display it at the top
when the page is viewed in a browser), it’s more common to use what’s typically referred
to as skip navigation

Correctly ordering link states

The various states have been defined in a specific order in the previous example: link,
visited, hover, focus, active. This is because certain states override others, and those
“closest” to the link on the web page take precedence.
There is debate regarding which order the various states should be in, so I can only provide
my reasoning for this particular example. It makes sense for the link to be a certain
color when you hover over it, and then a different color on the active state (when
clicked), to confirm the click action. However, if you put the hover and active states in
the other order (active, hover), you may not see the active one when the link is clicked.
This is because you’re still hovering over the link when you click it.
The focus state is probably primarily use keyboard users, and so they won’t typically see
hover anyway. However, for mouse users, it makes logical sense to place focus after hover,
because it’s a more direct action—in other words, the link is selected, ready for activation

during the focus state; but if you ordered the states focus, hover, a link the cursor is
hovering over would not change appearance when focused, which from a user standpoint
is unhelpful.
However, there is a counter argument that recommends putting focus before hover, so
that when an already focused link (or potentially any other focused element for non-IE
browsers) is hovered over, it will change from the focused state to indicate that it is now
being hovered over. Ultimately, this is a chicken-and-egg scenario—do you want a hovered
link to change from hover to focus to active? The focus will get lost somewhere in there
until the link is depressed (and the active state removed), by which time the link will be
in the process of being followed.
In the end, the decision should perhaps rest with how you’re styling states and what information
you want to present to the user, and often the focus state is a duplication of hover
anyway, for the benefit of keyboard users. And on some occasions, it doesn’t matter too
much where it’s put, if the styling method is much different from that for other states—
for example, when a border is applied to focus, but a change of color or removal of
underlines is used for the other states. However, if you decide on LVFHA or some other
order, you’ll have to make your own way of remembering the state order!

Web Navigation types

Inline navigation: General links within web page content areas
Site navigation: The primary navigation area of a website, commonly referred to as
a navigation bar
Search-based navigation: A search box that enables you to search a site via terms
you input yourself

Inline navigation
Inline navigation used to be the primary way of navigating the Web, which, many moons
ago, largely consisted of technical documentation. Oddly, inline navigation—links within a
web page’s body copy—is less popular than it once was. Perhaps this is due to the increasing
popularity of visually oriented web design tools, leading designers to concentrate more
on visuals than usability. Maybe it’s because designers have collectively forgotten that links
can be made anywhere and not just in navigation bars. In any case, links—inline links in
particular—are the main thing that differentiates the Web from other media, making it
unique. For instance, you can make specific words within a document link directly to
related content. A great example of this is Wikipedia (www.wikipedia.org), the free encyclopedia.

 

Site navigation
Wikipedia showcases navigation types other than inline. To the left, underneath the logo,
is a navigation bar that is present on every page of the site, allowing users to quickly access
each section. This kind of thing is essential for most websites—long gone are the days
when users often expected to have to keep returning to a homepage to navigate to new
content.
As Wikipedia proves, just because you have a global navigation bar, that doesn’t mean you
should skimp on inline navigation. In recent times, I’ve seen a rash of sites that say things
like, “Thank you for visiting our website. If you have any questions, you can contact us byclicking the contact details link on our navigation bar.” Quite frankly, this is bizarre. A better
solution is to say, “Thank you for visiting our website. If you have any questions, please
contact us,” and to turn “contact us” into a link to the contact details page. This might
seem like common sense, but not every web designer thinks in this way.

Search-based navigation
Wikipedia has a search box within its navigation sidebar. It’s said there are two types of
web users: those who eschew search boxes and those who head straight for them. The
thing is, search boxes are not always needed, despite the claims of middle managers the
world over. Indeed, most sites get by with well-structured and coherent navigation.
However, sites sometimes grow very large (typically those that are heavy on information
and that have hundreds or thousands of pages, such as technical repositories, review
archives, or large online stores, such as Amazon and eBay). In such cases, it’s often not feasible
to use standard navigation elements to access information. Attempting to do so leads
to users getting lost trying to navigate a huge navigation tree.
Unlike other types of navigation, search boxes aren’t entirely straightforward to set up,
requiring server-side scripting for their functionality. However, a quick trawl through
a search engine provides many options, including Google Custom Search Engine
(www.google.com/coop/cse/) and Yahoo Search Builder (http://builder.search.yahoo.
com/m/promo).