g
Printer Friendly Version

editor  
BellaOnline's Web Design Editor
 

Planning Your First Web Site - Navigation


Excellent websites combine well thought-out layout, navigation, graphics and content. Without clear and logical navigation, the most visually appealing site: even those with loads of valuable content, fall short. It is crucial that your visitors can easily get around your site. Navigation is like the nervous system of our bodies. It connects everything else, allowing movement and flow as your viewers explore your website.

When it comes to navigation, you have several choices. The key is to pick one, and stick to it consistently throughout your site. Navigation can be as simple as a set of uniform buttons placed strategically in the same place on every page. Or it can consist of Java based panels or trendy Flash hot spots. The trick isnīt to use complicated methods just because you can. Rather, to pick the style of navigation that will suit your targeted audience. A great place to start is Designing Web Navigation.

Map It!


Depending on the style of website you design, image maps may be the perfect solution for your navigation. Basically, an image map is some sort of metaphoric image with "hot spots" selected to serve as links to subsequent pages. This style of navigation is perfect for sites that depend on visual appeal and wish to lead the viewer through the site using a stylistic aesthetic interface. html code tutorials provide direction in How to make an Imagemap. A similar yet alternative way to get an image map effect is to dice up a larger graphic and assign your different pages to each slice. This takes a basic graphics program that can dice images for best results. See An Excellent Alternative to the Image Map to find out how itīs done.

Table It!


A very simple way to offer clear navigation is to create a small table with your various category names within their own cells. The table can be repeated on each page. BigNoseBird.com offers easy directions for doing this at The Simple Table & Text Navigator.p>

Use CSS!


Cascading Style Sheet code allows you to determine an uniform navigation schema that is repeated on every page of your design, without having to add the code to each page's actual markup source. Christian Heilman provides a helpful tutorial to help you to achieve this, in Dynamically Conjuring Drop-Down Navigation on the A List Apart site. Vitaly Freidman also offers a very useful Gallery of 37 CSS Navigation Menus that each lead to a tutorial on how to set up the particular showcased navigation schema.

Make A Bar!

Navigation Bars are one of the most common ways to help your visitors get around your site. From simple strategically arranged text to symbolic icons or nifty graphics, a bar is a simple, consistent way to make your navigation dynamic. A good article on making bars is offered by Roger Johannson, Making a List into a Navigation Bar.

Serve Them Java!

Many sites now use java applets and scripts to create "newer" looking navigation bars. This can look great and work well. Or, it can be a disaster that quickly drives your viewers from your site. If someone gets a "java error" box every time they click on a button, they arenīt going to stick around long. Other viewers may not have java compatible browsers which again, will drive them away. If you use java, you should also provide an alternative for people with older browsers and slow modems. Java Scripts for Navigation from the Site Navigation site gives a brief overview on how to make java nav bars.

Flash It!

Flash is now an Adobe application, (first developed by Macromedia) that has made life easier for creative web designers. Many are extending itīs use to include attractive and unusual navigation interfaces. They are not simple to make, but can look amazing! Tutorialized.com offers some tips on how to make your own, using the Flash MX 8 in Flash MX 8 Tutorials. The main Adobe site also offers a step by step guide to using Flash to create great animated menus at Macromedia Flash Tutorials.

No matter how you do it, keep your navigation visually appealing, clean and simple. Your visitors should not hesitate for a minute. Their next destination on your site should be easy to get to. Make it flow!

Features in this Series:








This site needs an editor - click to learn more!

Web Design Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by June Kaminski. All rights reserved.
This content was written by June Kaminski. If you wish to use this content in any manner, you need written permission. Contact Editor Wanted for details.



| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor