Smashing Html5 : Navigation Strategies - Creating Consistency (part 1) - Vertical and horizontal navigation, Applying CSS3 pseudo-classes

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
2/16/2015 3:36:59 AM

One of the most important features of a good navigation system is consistency. The user has to be able to know where to find the navigation system no matter where she is in the site. If one page has the navigation at the top and the next page does not, in the same site, users may not know where they are relative to where they started or where they’re going. One of the most misquoted pieces of wisdom about consistency can be found in Ralph Waldo Emerson’s essay, “Self-Reliance.” By quoting only a part of Emerson’s thought, many people are misled to believe that consistency is wicked. That famous misquote is “. . . consistency is the hobgoblin of little minds. . . .” What Emerson fully wrote is, “A foolish consistency is the hobgoblin of little minds, adored by little statesmen and philosophers and divines. With consistency a great soul has simply nothing to do.” The reason that the quote is important is that Emerson never said that consistency is a bad thing. Foolish consistency is the problem — not consistency. When it comes to navigation consistency is essential, and by all means avoid foolish consistency. In other words, don’t put a bad navigation system together and then repeat it because it’s consistent. As far as a great soul having nothing to do, that may be a good thing. With consistency, you don’t have to reinvent the navigation system with every new page. A great soul would have different consistencies for different audiences and types of sites; but within the site, the consistency is constant.

In her work on grouping elements, Jennifer Tidwell talks about using color-coded sections to assist users in keeping track of where they are. Using colors, you can add clarity to global navigation. The three global categories that have been selected for navigation — animal, vegetable, and mineral — can be a good example of multiple-consistency (each menu is consistent with the other menus). For the animal category, you might use brown tones; for the vegetable category, green tones; and for the mineral category, nickel tones. Figure 1 shows an example where the global navigation is in place and the different pages have a color scheme that differentiates them from one another and at the same time places each in the appropriate grouping.


Figure 1: Global navigation and color grouping.

In Figure 8-5 note that the global navigation incorporates the color palette of the respective categories. It would be foolish consistency to insist that the color schemes be the same. However, the global navigation is consistent and each page is consistent with the other pages in the same category.

Vertical and horizontal navigation

Besides using the horizontal plane along the top and bottom of a page for navigation, interface designers often reserve part of the side of a Web page for navigation. Figure 2 shows the general design for this approach.


Figure 2: Vertical and horizontal navigation.

When using horizontal and vertical link planes, the user can see all the global links and the links for the current topic simultaneously. More of the viewing area is taken up by the navigation system, but with the larger monitors becoming standard on computers, this isn’t that much of a problem. With electronic tablets like the iPad that have smaller screens, it cuts into the usable viewing area, but not a great deal. However, on mobile phones, especially when viewed vertically, the content space is severely reduced.

To create an area for a vertical link area with HTML5, you just need to set up a two-column page below the area generally reserved for the logo and global navigation bar.

Applying CSS3 pseudo-classes

When dealing with more complex navigation systems, you may want to consider CSS3 pseudo-classes. These are class definitions added to an element. For navigation, the following four pseudo-classes are important because they’re associated with the <a> tag:





Each has the same formatting as other elements, but they’re declared with the element name separated by a colon. For example, the following code snippet shows how the hover pseudo-class is styled:





When that code is added to a style sheet, whenever the mouse hovers over the link (<a> tag), it will change the color to the hover definition. Of course the colors defined for the <a> tag have to be different from the hover, but you can add subtle or blatant signals to the user that the text is a link. Likewise, you can change other features using the pseudo-classes. The following examples will give you an idea:




<style type=”text/css”>

a {

font-family:Verdana, Geneva, sans-serif;



a:link {




a:hover {



a:visited {




a:active {




<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<title>Pseudo Classes in Links</title>



<a href=”#”>Click here</a>



When using pseudo-classes for navigation, you want to keep the user in mind. Adding strange effects with pseudo-classes can be fun, but you need to ask whether the effects will assist or confuse users. If you can add an effect that users associate with making choices, then that effect is likely to be helpful. For example, making the font larger when the mouse is over it was an idea taken from the Macintosh dock where icons enlarge when the mouse passes over them. However, you might want to ask whether turning the link another color and changing the text decoration is a good idea for a visited class. Does it really help the user? Also, try it on different browsers and see if the results are consistent. Remember that just because you can change a link’s appearance doesn’t mean you have to.

  •  Smashing Html5 : Navigation Strategies - Using JavaScript to Call a Linked Page
  •  Smashing Html5 : Web Navigation Concepts (part 2) - Using lists in global navigation
  •  Smashing Html5 : Web Navigation Concepts (part 1) - Designer navigation and user navigation, Global navigation
  •  Sharepoint 2013 : The Managed Metadata Service (part 4) - Term Sets
  •  Sharepoint 2013 : The Managed Metadata Service (part 3) - Term Store, Groups
  •  Sharepoint 2013 : The Managed Metadata Service (part 2) - Associating with a Web Application
  •  Sharepoint 2013 : The Managed Metadata Service (part 1) - Taxonomy and Folksonomy, Initial Setup
  •  Sharepoint 2013 : Publishing and Web Content Management - Content Deployment - Configuring the Destination Farm, Configuring the Source Farm
  •  Smashing Html5 : Organizing a Page - Organizing Files - Relative reference
  •  Smashing Html5 : Organizing a Page - Getting Your Stuff Organized (part 2) - Grouping without fracturing, Figures and captions
    Top 10
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
    - Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
    - Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
    - First look: Apple Watch

    - 3 Tips for Maintaining Your Cell Phone Battery (part 1)

    - 3 Tips for Maintaining Your Cell Phone Battery (part 2)
    programming4us programming4us