Aqua-Alta.nl, Webdesign using webstandards, usability and accessability.

UPDATE: This is about a previous design of this site. There’s no navigation matrix now !
In this article I will tell you something about the design and development of the main navigation.

For the main navigation I used a technique known as “the navigation matrix”.
With this technique there’s no need for heavy scripting in Javascript or Flash Actionscript and still use images for the different states.

The only thing you need is the use of a stylesheet aka CSS.
The thought is that with the help of a single image and the positioning properties of CSS you build the links in your main navigation.

It’s beyond the scope of this article, but there a big corporate sites where every image and anchor on the site whether they reside on the top of a page or in the footer in reality belongs to a single image.
The purpose of using this technique is threefold: it makes the weight of your site less, as in shorter loading times, you don’t have to compromize on your design
and the search engines are made happy because they are served with meaningful markup and are able to follow your anchors and delve deeper into your site.
Where in the old days if you used images for your links they would find something like: ../images/023ea09.jpg which in reality pointed the visitor to the “About” page.

How do we do it ?:

Well I’m not going to re-invent the wheel and will point you to a few tutorials.But what I’ll give you is a summary of the actions needed to create a navigation matrix for your main navigation.

First of all you need to create the image which has to consist of the three states of a hyperlink, that is Normal, Hover (=Mouseover) and Active.
Be sure that every state has the same height.The length is dependent on the length of the words you use in your navigation.

Second write the HTML markup.Use an unordered list for your anchors.Be sure to give the “<li>“‘s an unique id.
Then measure up the widht and height of the different rows and the individual width of the menu items in Photoshop or Fireworks.
And finally use CSS positioning to reveal the right image for the different link states.

Steve Jamesson has an excellent tutorial on how to build a navigation matrix.
Veerle Pieters shines her light on the navigation matrix which she uses on her site.A tutorial I highly recommend.
And then there’s the inventor of the navigation matrix, Didier Hilhorst where you can find a howto on this site

That’s it.
Next time I’ll tell you about the design of my logo.