For people out there who have designed websites, I’m pretty sure that once upon a time you’ve spent some time thinking where to place the main navigation. This is a very minor thing that has a great implication on the overall performance of the website. Keep in mind that a finely placed element can make or break the whole design.

Another thing to keep in mind is that this article is an observation, not in any way should it be used as professional advice. The most important thing in designing a website is how the purpose, design, and the content itself complement each other.

Side Navigation (or vertical navigation)

Side navigation uses too much space, with today’s websites that display advertisements you can’t just enter the two in a contest to see who wins. Most of the time, the side bar is reserved for advertisement and widgets. Go to ThemeForest or other WordPress themes marketplace and you’ll see that 9/10 of the items don’t have side navigation, be it left or right.

So, when is side navigation practical? In the case of TheNextWeb, since their articles deal with a very wide range of categories from daily events to technology news to just about anything on the internet, instead of placing their categories at the top, they designed it so that it shows on the left side of the website. Imagine having all those categories at the top.

Such is also the case with Yahoo.com, the navigation is on the right side. If you have noticed, throughout the years they have added and removed menus without really changing the layout to accommodate new menus. This is the good part of having side navigation, you won’t find space lacking.

If you haven’t noticed yet, right-handed people are usually more comfortable looking at the left side of their monitor. This is the reason why websites like 1stwebdesigner have their content on the left side, because it’s much comfortable that way. So, it’s a bad thing to place the navigation on your left side, the right side is usually better, which is also the place for advertisements and other widgets.

Top Navigation (or horizontal navigation)

The placement of your main navigation at the top of the page, or just below the logo, should be carefully thought of not only for the present design and purpose, but for future expansion. No users/readers really like a 90% redesign, it just feels so alienating. Some elements of the original design should be kept, for familiarity’s sake.

Today, most websites use top navigation with the few exceptions of minor menus on their side bar, like in the case of Facebook and Google+, and other large websites. With today’s jQuery, CSS, and other effects plugins, designers can now create a drop down menu to fill every categories with countless sub-categories.

(a screenshot of 1stwebdesigner within 1stwebdesigner, it’s like Inception!)

So, is Side Navigation still practical?

For websites it might not be, but for tools and services like WordPress, your mailbox, and other end-side platforms, side navigation is still useful, but for blogs and websites that are updated regularly, it is common practiced that their navigation is on the top.

The rise of mobile device users is exponential, but mobile versions of websites aren’t. Although there are websites that look the same on different screen sizes, having side navigation looks bad because of the small display. Just recently, I browsed many websites with drop-down menus (like 1stwebdesigner) using my girlfriend’s iPhone. I noticed that I can’t make the drop down appear, so I was stuck. In which case, I suggest you guys use jQuery Mobile.

Things to Consider Before Designing

This is how reddit rolls, by clicking My Reddits a drop down appears containing all of the reddits you are subscribed to. It has both vertical and horizontal navigation. Notice that the horizontal (top) navigation is harder to read, and that the vertical navigation is easier. Or is it just me?

Always think of the future of the website and how will it affect the design. Present content, purpose, and design should be weighed and looked at how will they be months or several years upon conception.

During the first web development class I had in college I asked myself whether I should place my navigation on the top or at the side. I chose the right side. Bad move. Turns out, I only had to place a few pages for navigation and it occupied the whole 200px from top to bottom.

It depends on how the website’s designed. If it is aesthetically pleasing, why not?  Sometimes, listing items from top to bottom gives a lot of emphasis on the top part.

But, meh. You’ll end up having a top navigation 90% of the time.

Your Take?

I’m pretty sure that you have your own say on this topic that the world would want to know. Is horizontal navigation cool and current because we all jumped on the same bandwagon?