Website navigation is the most important aspect of your website you should focus on in my opinion. If your users can’t find their way around, they aren’t going to stay, they aren’t going to come back, and it’s unlikely they pass on your website’s URL. What good is it to work so hard on website content when half of it is inaccessible or hard to find?
Below we have 10 tips to assist you with your website navigation. This should definitely assist new webmasters with their navigation, but this article can also be used as a checklist of sorts for more experienced webmasters.
Or you can just enjoy the pretty pictures..
The Header – Head Links
I wasn’t sure what to refer to this group of website links as, so I coined the phrase “Head Links” to refer to them. They are the smaller than normal text links, usually in a group of 3-5 that are placed at the very top of the header.
These navigational links usually point to the more fundamental pages / resources on your website. These might include a contact link so people can contact you, a link to a sitemap of some sort, a link to your RSS feed, a link named ‘Home’ that returns users to your index, and an “Advertise” link is not uncommon to find in this link area. The advertise page, as you may have guessed, would direct your website visitors on how to go about advertising on your website.
Horizontal Navigation Bar
This navigation unit is found in the header of the website, usually under the website’s logo or heading. It usually includes links to the better or most popular pages / features of your website. For example, if I were a website designer who works as a freelancer, I might have the following links..
- About
- Services
- Portfolio
- Contact
- RSS Feed
This link method may or may not be used on your website based on different variables. For example, if you have all of your links already in your sidebar and see no reason for a horizontal nav bar, no problem.
In the above example, taken from WordTracker, you can see the nice, simple, and easy to navigate links in the navigation bar, and also in the head links section.
The Sidebar
The sidebar is the obvious go-to place when you have a list of links that need to be embedded into your webpage. You can include all of your links in a sidebar, create multiple sidebars and span your link blocks among blocks of website content, list the last 50 posts from your website or another’s.
The sidebar is also the best place to experiment with different methods of displaying your links in my opinion. The reason for this is there aren’t as many boundaries to run into as you would if you tried to fit everything into the header, or even the footer for that matter.
You are also given more room to play with the headings that hover above the link list and announce that particular link block, such as “Categories”
Design Observer, as seen above, makes excellent use of a sidebar in my opinion. The content is seperated nicely, the color palette is calm, the link block headings are neatly placed and styled, the search bar is incorporated nicely, everything is placed in such a way as that it makes you want to take your time and enjoy searching through the links.
The Footer
Similar to the “head links” link section I mentioned earlier, links here should include more fundamental tendrils of your website. You can usually find this link area just above or just under the website’s copyright information.
Another common and sometimes awe inspiring technique to incorporate thorough link navigation is to extend the height of the footer to something much larger than normal so that it can fit listings of categories, recently archived posts, maybe your recent comments. This method would allow you a lot more room for the main content area just above the footer.
An Archive Listing
An archive listing of past website posts these days is almost essential. Not only is this arguably the most used way website visitors navigate websites, but it also adds a feeling of over-all completeness. The root from which the tendrils grew.
For a feature such as this on your website, I would recommend downloading and installing a content management system to run your site. A lot of functions such as category listings, archive listings, tag listings, rss feed structure, etc are already developed. You simply write 1 line of PHP code to call on the CMS function.
Check out the Wordpress Content Management System – The most popular and robust.
Joomla – Another popular and robust content management system.
A great and popular CMS. Not quite as popular as Wordpress, but a good one.
Above is a pretty inspiring archive listing and just goes to show how much of your content can and should be kept in an archive — and does so in a truly clean, minimalistic, and thorough manner.
This archive belongs to the creator of the Drunkey Love Icon Set, and you can view the full archive by clicking here.
A Category Listing
You can think of a category listing as an archive page without limits or too many pre-conceived notions of what one should look like and/or incorporate. Of course it is a listing of posts made to that category, we know this will be included in some way, but what you don’t know is how it’s going to be displayed.
You could make each category look like the index page of an entirely different website if you wanted to, and people would admire it if the styling was decent. A lot of more popular websites do this in fact. For example, a software company might have an index page, simple in nature, robust in navigation. They might release a web browser named “Jar”. They might also create a category for this piece of software and really have that category listing look entirely different from the index, and borrow a lot of design aspects from the software itself. A white background becomes black, anchor links go from a deep purple to a light yellow, the sidebar content perhaps is re-sorted to compliment the category listing.
Above is the JungleJar CSS Category listing.
A HTML Based Sitemap
This would basically be a simple and clean list of all your pages, all of your post categories, possible yearly archives. This would act in much the same way an archive listing would but also provides the option to include pages and anything else you’d like to include. The archive isn’t expected to get too involved, but it can and just as much as the HTML sitemap.
One or the other or both, the choice is yours. Just think ahead of how you’d like your directory structure set up, possible categories to create before hand so you’re ready to handle them and point your website visitors to them, etc.
A Tag Listing
Taken from the Wordpress Glossary, they said it best..
“A tag is a keyword which describes all or part of a Post. Think of it like a Category, but smaller in scope. A post may have several tags, many of which relate to it only peripherally. Like Categories, Tags are usually linked to a page which shows all posts having the same tag. Unlike Categories, Tags can be created on-the-fly, by simply typing them into the tag field.
Tags can also be displayed in “clouds” which show large numbers of Tags in various sizes, colors, etc. This allows for a sort of total perspective on the blog, allowing people to see the sort of things your blog is about most.
Many people confuse Tags and Categories, but the difference is easy: Categories generally don’t change often, while your Tags usually change with every Post. “
Referencing Articles
It’s a good idea to always link back to past articles you’ve written when the content you’re writing at the time is similar in some way, or if you see that you can link the two articles.
Display Trackbacks
Displaying trackbacks in your posts is another great way to increase your website navigation’s quality. While this would include other websites that link to that particular post, but also when you reference that particular post from a different post.
Above is an example of a post that I referenced, or linked to, from a different post on my website. This in turn generated a “Trackback”, and I have my Wordpress templates set up to display them. You can see how this can help with navigation. It’s like a mini-version of a normal “Related Posts” type link list.
