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.
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.
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>
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 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:
- Planning Your First Web Site - Your Sitemap
- Planning Your First Web Site - Your Site Structure
- Planning Your First Web Site - Your Genre
- Planning Your First Web Site - Your Site Colors
- Planning Your First Web Site - Your Site Layout
- Planning Your First Web Site - Your Site Navigation
- Planning Your First Web Site - Your Site Images
- Planning Your First Web Site - Your Site Content