Freelance Writing Jobs | Today's Articles | Sign In

 
Browse Sections

Lesson 9 - Cooking Up Some Menus

Aug 15, 2003 - © Kim Vickery

  • Place in conspicuous locations (top of the page or left side of the page is most advisable)
  • Put your nav on every page of your site. Yes, I mean every page.
  • Contrast your navigation against your background color for easy visibility
  • Keep the navigation away from the main content on each page
  • Above is an extreme example of using a hard to read font against a background that makes it even more difficult to read. See what I mean? Choose backgrounds, fonts and colors wisely. Next is an example of site navigation that is not only too small to see, but these symbols mean little or nothing to anyone just browsing the site.

    And let me just throw a plug in here for people with disabilities. People with poor vision have a very hard time with small fonts and bad backgrounds. People with poor motor control have difficulty clicking on things that are not easily accessible. Nuff said.

    Rule 3 - Group your content into logical chunks.

    But you're asking, "What does my content have to do with my navigation?" Everything!

    Let's say you're creating a Web site for your family to share your grandmother's recipes. Grandma was a well known cook who made wonderful food and over the years created nearly 100 of her own recipes, including her famous rum cake!

    Now, if you create a single page for each of grandma's recipes (all 100 of them) then you'll be coding HTML until the cows come home.

    BUT, if you group those 100 into logical sections, you can put more than one recipe per page. So, let's say you grouped her recipes into the following areas: appetizers, salads, vegetables, entrees, desserts, and miscellaneous. Your navigation could look something like this:

    Or you could have fun with images and clip art, and create an attractive navigation with images. We'll go over just how to get free images or clip art and lay them out on your page in later lessons.

    But just in case you're curious, the code for the first example would look something like this:

    And the code for the second example would look something like this:


    Until next time, please feel free to post questions in the discussion area, and explore the links and the suggested reading to find more information about this topic.

    The copyright of the article Lesson 9 - Cooking Up Some Menus in Website Creation is owned by Kim Vickery. Permission to republish Lesson 9 - Cooking Up Some Menus in print or online must be granted by the author in writing.

    Go To Page: 1 2 3

    Articles in this Topic    Discussions in this Topic