logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Full Schedule
g
g Web Design Site

BellaOnline's Web Design Editor

g

Planning Your First Web Site - Navigation

Guest Author - June Kaminski


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!

Add Planning+Your+First+Web+Site+%2D+Navigation to Twitter Add Planning+Your+First+Web+Site+%2D+Navigation to Facebook Add Planning+Your+First+Web+Site+%2D+Navigation to MySpace Add Planning+Your+First+Web+Site+%2D+Navigation to Del.icio.us Digg Planning+Your+First+Web+Site+%2D+Navigation Add Planning+Your+First+Web+Site+%2D+Navigation to Yahoo My Web Add Planning+Your+First+Web+Site+%2D+Navigation to Google Bookmarks Add Planning+Your+First+Web+Site+%2D+Navigation to Stumbleupon Add Planning+Your+First+Web+Site+%2D+Navigation to Reddit




Web Design Courses
RSS
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map


For FREE email updates, subscribe to the Web Design Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


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 BellaOnline Administration for details.

g


g features
Creating Image Links and Image Maps

Using Website Templates

CSS Design Layouts

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor