Training

"Winners make choices,
losers make excuses.
"
Decide to be a Winner!!!!

±Arrows Getting Started

± Phase 1
Planning

± Website Tools

± Phase 3
Conceptual Design

± Helpful Information

± Phase 4
Physical Design

± Phase 5
Testing

± Phase 6
Implement and Market Website

± Other Web Development Items

± Multimedia

± Useful Utilities

± Programming

± Advanced Programming

± Microsoft Office Products

± Computer Maintenance

± Other


Web Design

NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.

Navigation

Navigation is one of the most important aspect of a website. Navigation helps users find their way around your website; it tells them:

  • where they are
  • where they can go within the your website
  • where they have been

A visitor should be able to go to any page within your website with two or three clicks and your home page should be accessible in one click. A good website design should be based around accepted layout and navigational standards. A website should be easy for your visitors to use and to find what you're offering them.

Remember that many visitors may find your website through search engines and may not land on your home page.

Types of Navigation

Navigation Menus Breadcrumbs Home Button Hypertext Links HTML Title
Site Maps Search Option Page Jumps Custom Error Messages  

Navigation Menus

Navigation menus or bars are used to get to other pages within your website by linking to other pages using the <a > </a> HTML tag. The navigation menu should give a visitor immediate knowledge of the depth of your website, what you offer, and make it easy for them to find what they are looking for. The navigation menu should encourage visitors to explore your website.

Primary Navigation

A website's content should be broken down in to categories or groups of information and present these groups of information in a logical way. The primary navigation should hold 4 – 15 links; any more can overwhelm visitors. Group the navigational links into small groupings of four or five links with headings make it easier to scan the navigation menu and find information faster.

Secondary Navigation

Secondary navigation may include links like contact us, about us and copyright information and should be placed at the bottom of a page or at the top of the page in a smaller font.

Navigation Guidelines

  • Easy to Find and Use
    • Should appear at the top, left-side, right-side and/or bottom of web pages
    • Should appear in the same position on all website pages
    • The words for the links should be descriptive of the target page
  • Can be text or graphics links but text is recommended for search engines.
  • Should take up as little space as possible

back to top

Breadcrumbs

Breadcrumbs is a row of links that show the visitor where they are in relation to the rest of the web site. They can help a user navigate your website.

  • Should be added to every page
  • Should appear near the top of the page
  • Should be in a smaller font, should be concise
  • breadcrumbs

back to top

Home Button

The home button links back to the home page. It is best to name the home page index.html but other there are other options that will work (home.html, default.html, index.php, etc.).

  • Does not have to appear on the home page
  • The company logo can link to the home page

back to top

Hypertext Links

Links or hypertext links are used to link to other pages within your website or to link to other websites.

  • It should be obvious where a hypertext link appears. One should not have to mouse over a link to realize that it is a hypertext link.
  • It is a good idea to underline hypertext links for accessibility.
  • If you are linking to another website, you may want to use the target="_blank" attribute to tell the browser to open a new browser window.
  • You can make links that a visitor as already been to appear as a different color.
  • Be careful when using images as links.Try to provide textual links to the same information as well as the graphic.

back to top

HTML Title

The HTML Title appears in the top title bar of the browser and can appear on the browser's tab.

  • It helps identify the current page especially if several browser windows are opened.
  • It is helpful when a page is book marked

back to top

Page Jumps

Page jumps link to sections of a single page and are used on long pages. If the page is long, a small table of contents is a great idea to help the visitor see an overview of the information on the page and easily jump to it.

Site Maps

A site map visualizes the depth of content available on your website and gives visitors another method to navigate to the information they want.

  • It is a separate page which list the files available to users and provides a link to each file
  • Usually links to the site map appear at the bottom of every web page

back to top

Search Options

A search option allows users to search your website for a word or phrase.

back to top

Custom Error Messages

Custom error messages can help your user navigate your website even when an error occurs.
Creating Custom Error Messages

  • Use your error pages effectively
  • Provide a custom error page for each type of error (404 page not found, 403 forbidden etc)
    • Provide the same site wide navigation and branding as on your other pages
    • Provide information about why they got this error
    • Include a site map so they can navigate to something useful quickly

top of page

Page last updated: May 31, 2012 14:19 PM

It is all about:
Content and Navigation...

Web Site by: A Safer Company LLC