Website Navigation Tips

Website navigation is the most important aspect to consider while designing a website. The primary aim for effective navigation is get your visitors to stay in your site and also for visitors to easily find what they are looking for easily and quickly. Designing effective navigation can also entice your visitors to try out the other things you offer on your site. In this article we will look at some of the basic guidelines you need to follow while designing the navigation of a website.

Effective Navigation Guidelines

While designing the navigation for your site keep the following points in mind:

* Organized Links

Make sure your links are well organized according to the order of importance. Visitors should be easily able to find what they are looking for under different categories.
E.g. All our main links are found on the top i.e. our services, products,portfolio, resources etc.Other interesting links are found on the right of the page. These are common and consistent throughout the site.

Finally if the web page belongs to a guide E.g web design guide you will find the related links below the right menu and also at the bottom of the page.

Note: Related links are very important as visitors coming to a particular page will probably be interested in more information you have under the same topic.

* Clear and Prominent

Once you have decided on your navigation links, you need to think of the best place to put them. Navigation should be clear and consistent. Try to design your navigation on the top or on the left as these are the first places our eyes go to. Also locate the primary links high enough on the page so that they are visible without scrolling. Navigation images should be seamlessly integrated into the site design. Avoid putting navigation links at the bottom of the page as visitors will need to scroll right down to see the links. If you like you could put the important links at the top AND bottom of the page just to make sure your visitors don't miss the link.

* Consistent

Navigation should be clear and consistent. The important links of your website should be on every page, in the same location, and in the same sequence. Don't confuse your visitors by putting your navigation links in different places in different pages.

* Easy to understand

Make your links easy to understand and to the point. Usually you won't have enough place to have long links so make use of the space wisely. Visitors need to know where they will go on clicking on a particular link, so make sure your links are understandable or nobody is going to click on your links, which will defeat the purpose of designing a good navigation system.

* DHTML Menus

If you have a large number of links under categories and sub-categories you could use navigation menus to organize your links. There are many cut 'n' paste scripts available on the Net that you could use to create great navigation systems. A favorite resource center is SimplyTheBest.net, you'll find tons of useful navigation menus that are very easy to install on your site.

Keeping these basic points in mind you can go ahead and design an effective navigation system for your site. Take a look at other sites to get some ideas on good navigation techniques! Another good idea would be to use eye-catching visuals and small chunks of information to draw visitors to click on a link.

Read more...

Default values in CSS for browser compatibility

Every browser has different margin and padding values that are set as default. Thats why we prefer to reset all values before building up a site. Most of people add,
to the top of their CSS file to reset everything. But do you really thing that it is enough to reset everything? Use following code block on the top of your CSS file and see what else you’ve missed to reset.

a:link, a, a.visited
{ text-decoration:none; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, fieldset,input,textarea,blockquote,th,td,p
{ margin:0; padding:0;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { text-decoration:none; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var
{ font-style:normal; font-weight:normal; }
ul,ol { list-style:none; }
caption,th { text-align:left; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }

Read more...

CSS to load hover buttons faster

With CSS we can target the ‘:hover’ child class for links and update their background properties.


Example

.nav a:link, .nav a:visited {

width: 160px ; height: 30px ; display: block; overflow:hidden;

background: url(’images/nav1.gif’) 0px 0px no-repeat;

}

.nav a:hover, .nav a:active{

background-position: 0px -30px;

}

The Image itself contains both the normal and hover state. This is called a sprite, using this technique the image needs only be loaded once.

Read more...

Changing Link Colors with CSS

Introduction

This guide shows how to specify link colours with CSS whether you want the same colours for all links or different colours for certain links. Also includes how to change the colour “onmouseover” (hover colour).

Specifying the default colour

If you want to specify the default colours which will be used in a web page you should use the following code. These colours will be applied to all links in the document.
This code specifies that all links should be black (#000000), active links should be blue (#0000ff), links which have been visited should be green (#008000) and the hover colour, when you mouseover the link, should be red (#ff0000).
The text decoration has been specified as “underline” which disappears on mouseover. Text-decoration can be “none” “underline” “overline” “line-through” “blink” or “inherit”. You can also add many other styles such as borders, font-family etc.
Note: If you specify the “color” you should also specify the “background-color”.

Specifying different colours for different links

If you want to have different colours or styles for certain links you need to assign those links a class and write the styles for each class.
Assuming we have two links “Blue Bold Link” and “Red Italic Link” we assign each a suitable class link this:

<a href="blue.htm" class="blue">Blue Bold Link</a>

<a href="red.htm" class="red">Red Italic Links</a>

Our css for these links would be in this form: (note: blue=#0000ff, red=#ff0000)

<style type="text/css">

a.blue:link {color: #0000ff; background: #ffffff; font-weight: bold;}

a.blue:active {color: #0000ff; background: #ffffff; font-weight: bold;}

a.blue:visited {color: #0000ff; background: #ffffff; font-weight: bold;}

a.blue:hover {color: #0000ff; background: #ffffff; font-weight: bolder;}

a.red:link {color: #ff0000; background: #ffffff; font-style: italic;}

a.red:active {color: #ff0000; background: #ffffff; font-style: italic;}

a.red:visited {color: #ff0000; background: #ffffff; font-style: italic;}

a.red:hover {color: #ff0000; background: #ffffff; font-style: normal;}

</style>

You can have any number of link styles on a page once you assign each one a class and specify the styles for each class. Effective use of “hover” can add a lot to a web page. Experiment!

Read more...

Email Links using Dreamweaver

An e-mail link opens a new blank message window (using the mail program associated with the user's browser) when clicked. In the e-mail message window, the To text box is automatically updated with the address specified in the e-mail link.

A mailto link will only work if the browser supports e-mail and is setup to work with a local e-mail system.

Step 1 : In the document window position the insertion point where you want the email link to appear, choose Insert>Email Link, the Email link window opens.

Step 2 : In the first input box enter the text you want to appear in the document as an email link and in the next box type in the email address. Next click on OK.

Step 3 : Now you'll see the text as an email link in your document. In the property inspector the Link input box will contain the text ' mailto:mail@tutorailsforweb.com’

To create an e-mail link using the Property inspector:

Step 1 : Select the text or an image in the Document window's Design view.

Step 2 : In the Link text box of the Property inspector, type mailto: followed by an e-mail address. (Do not type any spaces between the colon and the e-mail address) eg. mailto: mail@tutorailsforweb.com

Read more...