Principles of Web Design

6th Edition

Chapter 9 – Site Navigation

 Objectives
• Create usable navigation
• Design navigation for mobile devices
• Use graphics for navigation and linking
• Build text-based navigation
• Use lists for navigation
• Build horizontal navigation bars
• Build vertical navigation bars
• Use background color and graphics to enhance navigation
• Create hover rollovers

2
Creating Usable Navigation

3
 Planning Site Navigation
• Don’t skimp on navigation cues
• Most modern web sites use primarily text-
based graphics
• If you choose to use graphics keep them
simple and reuse them consistently

4
5
 Orienting the User
• Provide enough location information to let the
user answer the following navigation
questions:
• Where am I?
• Where can I go?
• How do I get there?
• How do I get back to where I started?

6
 Orienting the User
• To answer these questions, provide the
following information:
• Let users know what page they are on and what type
of content they are viewing
• Let users know where they are in relation to the rest
of the site

7
 Orienting the User
• Provide consistent, easy-to-understand links
• Provide an alternative to the browser’s Back
button that lets users return to their starting
point

8
9
 Limiting Information Overload
• Create manageable information segments
• Control page length
• User hypertext to connect facts, relationships
and concepts

10
Designing Navigation for Mobile Devices

11
Designing Navigation for Mobile Devices

• Limiting information overload is especially

important for mobile web sites
• Minimize the number of clicks or taps
• Use universal navigation symbols
• Simplify the user’s choices

12
13
14
15
Using Graphics for Navigation and Linking

16
Using Graphics for Navigation and Linking

• If you use graphics for navigation, use the

same graphics consistently throughout your
site
• These provide predictable navigation cues for
the user
• Reusing graphics minimizes download time

17
 Using the alt Attribute
• Provide alternate text-based links in addition
to graphical links
• Include alt attributes in your <img> tags
• The alt attribute is important to accessibility

18
 Building Text-Based Navigation
• Text-based linking is often the most effective
way to provide navigation on your site
• Always provide a text-based set of links as an
alternate means of navigation

19
 Adding Contextual Linking
• Contextual links allow users to jump to related
ideas or cross-references by clicking the word
or item that interests them
• These are links that you can embed directly in
the flow of your content by choosing the key
terms and concepts you anticipate your users
will want to follow

20
21
Using Lists for Navigation

22
 Using Lists for Navigation
• The HTML list elements are the preferred element for containing
navigation links
• Lists provide an easy way to create navigation that can be styled with CSS
<ul id="navlist">
<li><a href="index.html">Home</a></li>
<li><a href="history.html">History</a></li>
<li><a href="how.html">How it Works</a></li>
<li><a href="clubs.html">Balloon Clubs</a></li>
<li><a href="festivals.html">Festivals</a></li>
<li><a href="rides.html">Where to Ride</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>

23
24
 Removing Default Padding and Margin
• Most lists have built-in padding or margin values
• When creating navigation lists, you will need to
remove this default spacing
• Set the margin padding properties to zero for the
UL element as shown
ul#navlist {
padding: 0;
margin: 0;
}
25
 Removing Default Bullets
• HTML lists come with built-in bullets
• When creating lists for navigation, you can
remove the default bullets
• Use the list-style-type property as shown
ul#navlist {
padding-left: 0;
margin-left: 0;
list-style-type: none;
}
26
27
Building Horizontal Navigation Bars

28
 Horizontal Navigation Bars
• In a standard list, each item is on its own line
• To create a horizontal navigation bar using the list,
you need to set the list item display setting to
in-line
• This allows the list to display on one line
ul#navlist li{
display: inline;
}

29
30
 Customizing the Horizontal
Navigation Bar
• You can customize the basic list navigation
with CSS properties
• For example, you can:
– Add borders, background colors, or images
– Set space between buttons

31
32
 Controlling Navigation Bar Width
• Horizontal navigation bars will wrap with the
browser
• To prevent this, set a width for your navigation list
ul#navlist {
padding: 0;
margin: 10px 0px 0px 0px;
list-style-type: none;
width: 700px;
}
33
34
 Controlling Navigation Button Width

• To create navigation buttons that are all the

same width, change the display type to block
• Float the boxes so they align next to each
other

35
36
Building Vertical Navigation Bars

37
 Building Vertical Navigation Bars
• Use a standard list structure without changing
the display type as you did for a horizontal
navigation bar
• The <a> elements in the list must be set to a
block display property value

38
39
40
Using Background Color and Graphics To
Enhance Navigation

41
 Using Background Color and Graphics To
Enhance Navigation
• You can use background colors and graphics in
a variety of ways to enhance your navigation
• You can indicate location with graphic or
background color
• You can create interactive hovers that change
when the user points to a link

42
 Indicating History
• Use the link pseudo-classes to show users
where they have been
• You can display a graphic based on the state of
the link
• In this example, the visited state causes a
graphic check mark to display

43
44
45
 Indicating Location
• Location can be indicated by a change in text
weight, text color, or background color or with
a graphic

46
47
Creating Hover Rollovers

48
 Changing Text Color and Background Color
on Hover
• The :hover pseudo-class lets you add
interactivity when users scroll over your
navigation links
• In this example, when the user hovers the
mouse over the link:
– The text color changes to white (#fff)
– The background color changes to bright blue
(#0033cc)

49
 Changing Text Color and Background Color
on Hover

ul#navlist a:hover {
color: #fff;
background-color: #0033cc;
font-weight: bold;
}

50
Changing Background Images on Hover

• When the user hovers the pointer over a

navigation button, the button color changes

51
52
 Underlining on Hover
• You can use the hover pseudo-class to turn
underlining on when the user points to a link

a:hover {text-decoration:
underline;}

53
54
 Summary
• Usable navigation is the result of working with the
power of hypertext and designing for your users’
needs
• Work from the user’s point of view
• Make all areas of your web site quickly accessible
• Provide plenty of location cues
• Use text-based navigation bars
• Use CSS to build attractive horizontal and vertical
navigation bars using simple lists
55
 Summary
• Use background colors, text colors, and
graphics to enhance navigation
• Use the :hover pseudo-class to add
interactivity

56