Posts Tagged ‘web page’

Website Navigation

in Web Design 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.

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.

HTML Table Tips

in Web Design Tips |

Instead of designing graphic intensive web sites that take ages to load, you can use HTML tables creatively to get a professional looking web page that loads super fast. This article discusses many useful table tips and tricks on designing a great web page. Live examples and cut ‘n’ paste code are also provided for you to try out some great designs.

Tips on using Tables

  • Always give the width for each of the cells in a table. Make sure that the total of the cells in a row adds up to the table width. This will avoid many complications.
  • Try not to merge or break apart cells within a table. This again causes all kinds of problems.
  • When using widths or heights that are less than 10 pixels insert a shim or a transparent gif (1x 1 pixel). If you use Fireworks you will find a shim in your Fireworks file, or you can just export a 1x 1 transparent image and call it a shim. This trick is mainly for a table to work in a Netscape browser.
  • Netscape cannot understand height in percentages, so if you ever need to give a height for your tables, make sure it is in terms of pixels.

Let’s try out some cool designs using only tables

Tables with white borders

The key here is to use a transparent image(1×1 pixel) called a shim. The table is made of 3 rows and 3 columns. The width and height of the middle row is 1 pixel. The table will not take a height less than 5 pixels without you putting an image in it. Hence the magic shim. And there you have a striking table that can be used in your homepage to display your important navigation sections.