02.04 Navigation within SC

HEADER

The header was designed to be useful and compact, with as little vertical space taken up as possible so that as much white space was left over for the tables as possible.

A simple CSS navigation menu was added, and in addition, a specialised search box. This substantially reduced the number of clicks to navigate around the site. (In the previous iteration, it took four clicks to get from one table of correspondences to another. In this new design, the number of clicks has been reduced to two.) Design elements of the navigation menu were based on the following article, http://www.greywyvern.com/?post=337.

The header was designed to be fluid: resize the page and the header elements will nicely reflow, keeping their appearance and functionality.

The Help and Home links that were previously in the header have been removed. Instead, they are found in the footer. In addition, clicking on the site name takes you to the home page, as has become conventional in the vast majority of websites.

Here is the basic header structure.

<header> <div class=”headerbg”> <h1></h1> <p class=”sub”></p>

          <form></form>
          <div class="navbar">
               <nav></nav>
          </div>
     </div>
</header>	defines header
structural element
defines main site title
defines main subtitle. Note that subtitle, navbar, and form all appear inline.
search box
defines navigation menu bar
defines each navigation menu group
ends navbar
ends headerbg

FOOTER

A simple footer was added, with links to the Home, About, Help and other pages. This rounds the page out, adds handy navigation, and avoids a potential problem with some long pop-ups disappearing off the bottom of the page.

HOME PAGE

The home page now makes better use of space. A table of all the collections is presented. This not only allows swifter navigation, it provides a nice visual summary of what our site contains.

LINK BEHAVIOUR

SC opens links by default in the same window.