Total Followers 132,503
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 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.
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!)
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.
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.
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?
Get The Only Freelancer crash course you will ever need to read!
Rean is the editor of 1stwebdesigner. He regularly writes about freelancing, technology, web design, and web development. Rean also writes at Knowledge Salad, a blog filled with weird and interesting facts. One of his goals is to help his fellow Filipinos earn money online, to help them build a career out of working from home, just like what he has been doing for years now.
Thursday, November 10th, 2011 13:00
I like to have it horizontal, it’s very easy. You just need to decide to the color and design of the navigation that your visitor won’t have a hard time in navigating your navigation. <
Friday, September 23rd, 2011 10:13
Well.. IMHO, the best place for designing the navigation is depended on the concept of the (whole) website design and the number of the links required. Because when you use the Amazon or Gmail as the example, we could agree that the (left) side navigation will be the most considerable layout, not only because left side of page is the common place our eyes see first in the webpage, but also the number of links of the Amazon’s categories and Gmail’s mail folders.
For me basically when I’m trying to design the navigation, first think that cross in my mind is the number of the links required to browse the website; of course after I understand what and how the clients expect for their website. Sometimes I use the horizontal navigation, sometimes the vertical, and also both. As written above that the article is based on observation, from my observation the horizontal navigation is recently used for navigating not more than five links within the website.
Thursday, August 11th, 2011 09:02
I like to keep the navigation for inside the sites pages at the top of the page.. and links to other sites are put to the side bar. This eliminates any confusion to the visitor or client as to where they need to go if they want to check out something on my site or if they would like to browse to other sites I post for them. If I find a need to have more navigation space to my site.. then I post them in the text in the page content, relevant to the subject being discussed.
Wednesday, August 3rd, 2011 05:14
I think that vertical side navigation bar can work not only on websites, but blogs as well. But a horizontal navigation will most likely be more beneficial in terms of easing usability thus increase the amount of time users spend on your site and clicks you received and in other ways as well.
When creating a design for my side project blog GlitterBurned, initially I was unhappy with all of the design concepts I had made as to me they seemed too similar to all of my other designs. I thought a side vertical navigation would be the perfect way to break away from the expected and I am very happy with the resulting design I came up with.
For this blog, I think it suits it perfectly. Providing such concise functions, the vertical navigation on GlitterBurned suites providing them quite well. Being that this sort of navigation does deviate from the norm, I made sure to call attention to this area, keep the list short and sweet, and gave it a decent font size so that it might be more readily identified and utilized.
For other features and links that are not as much of a priority, I have placed those in a small horizontal menu well. Its a really simple blog blog but again, I am very happy with the design. But a vertical navigation generally is not the most beneficial style.
Tuesday, August 2nd, 2011 22:03
This pretty much sums up what needs to be seen around some parts of the web today, and even I could benefit from some of it. So hard to find the right layout some times. you know.
Sunday, July 31st, 2011 07:26
I personally prefer having the main navigation top and horizontal with secondary navs either in the sidebar, or as a supplemental horizontal nav underneath the main one.
I’ve noticed a lot of blogs out there are starting to do the latter using the space as a spot to put their main landing pages they are trying to optimize for SEO purposes.
Interesting discussion…
Sunday, July 31st, 2011 00:16
Well there’s confusion. Traditionnally left side navigation is dedicated to internal links, and right side to external links, meanwhilw horizontal bar to navigation. With the blog era, everything was mixed up and here lies the confusion.
Horizontal: navigation. Vertical: indexing. That’s my call. When I have to build a manual (and I do this all the time), Horizontal bar is dedicated to section, vertical to categories, or index. It’s intuitive and clear. No confusion.
Friday, July 29th, 2011 15:28
Call me a traditionalist, but I prefer horizontal navigation bars. For me personally, when I visit a website, I have a hard time navigating with a vertical navigation bar. I will implement a vertical side bar if it fits really well with the overall design, but usually I just stick to horizontal.
Friday, July 29th, 2011 12:10
Like the first post stated only e-commerce site seem to use the side navigation these days.
Considering most displays either desktop or mobile are mostly widescreen (apart form iPad 4:3) horizontal does seem to work out best until you have 100′s of categories, although a combination of both can work well.
Great article by the way!
Thursday, July 28th, 2011 16:07
You seem to only be thinking about blog sites and such. Think more Amazon and other ecommerce sites. Many of them must rely on side nav because their product category offerings are so large and can keep growing. The only option is hiding things in dropdown menus, which might not be the best thing to do.
Thursday, July 28th, 2011 16:14
Yes, focused on that as to not wander too much. The list could go on, like WordPress and Gmail and other services. :)
Thursday, July 28th, 2011 09:53
I keep wanting to do a design with a side bar nav in it but I can never find the right type of design or layout. When I 1st started out, I always did sidebar nav but as I progressed the side navs got less and more hoz navs appeared.
I do love a funky side bar nav though, they have their purpose but hoz navs certainly dominate and will for many moons.
Thursday, July 28th, 2011 09:40
I think that would depend on the needs of the client as well. However, I think it also needs research and creativity depending on the stuff that you are pushing. Anyway, this is a great read so I think you did a good job.
Wednesday, July 27th, 2011 16:29
I would use both, depending on the layout.
e.g. Vertical navigation for more important pages that help to convert visitors into clients.
Horizontal navigation for aditional information like FAQ, About Us, etc
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
egiova
Sunday, July 31st, 2011 00:16
Well there’s confusion. Traditionnally left side navigation is dedicated to internal links, and right side to external links, meanwhilw horizontal bar to navigation. With the blog era, everything was mixed up and here lies the confusion.
Horizontal: navigation. Vertical: indexing. That’s my call. When I have to build a manual (and I do this all the time), Horizontal bar is dedicated to section, vertical to categories, or index. It’s intuitive and clear. No confusion.
Helen
Wednesday, July 27th, 2011 16:29
I would use both, depending on the layout.
e.g. Vertical navigation for more important pages that help to convert visitors into clients.
Horizontal navigation for aditional information like FAQ, About Us, etc
Isabella
Friday, July 29th, 2011 12:10
Like the first post stated only e-commerce site seem to use the side navigation these days.
Considering most displays either desktop or mobile are mostly widescreen (apart form iPad 4:3) horizontal does seem to work out best until you have 100′s of categories, although a combination of both can work well.
Great article by the way!
Andrew
Thursday, July 28th, 2011 09:40
I think that would depend on the needs of the client as well. However, I think it also needs research and creativity depending on the stuff that you are pushing. Anyway, this is a great read so I think you did a good job.
Gavin
Thursday, July 28th, 2011 09:53
I keep wanting to do a design with a side bar nav in it but I can never find the right type of design or layout. When I 1st started out, I always did sidebar nav but as I progressed the side navs got less and more hoz navs appeared.
I do love a funky side bar nav though, they have their purpose but hoz navs certainly dominate and will for many moons.
Celina Wood
Friday, July 29th, 2011 15:28
Call me a traditionalist, but I prefer horizontal navigation bars. For me personally, when I visit a website, I have a hard time navigating with a vertical navigation bar. I will implement a vertical side bar if it fits really well with the overall design, but usually I just stick to horizontal.
Josh Kohlbach
Sunday, July 31st, 2011 07:26
I personally prefer having the main navigation top and horizontal with secondary navs either in the sidebar, or as a supplemental horizontal nav underneath the main one.
I’ve noticed a lot of blogs out there are starting to do the latter using the space as a spot to put their main landing pages they are trying to optimize for SEO purposes.
Interesting discussion…
ronsky
Friday, September 23rd, 2011 10:13
Well.. IMHO, the best place for designing the navigation is depended on the concept of the (whole) website design and the number of the links required. Because when you use the Amazon or Gmail as the example, we could agree that the (left) side navigation will be the most considerable layout, not only because left side of page is the common place our eyes see first in the webpage, but also the number of links of the Amazon’s categories and Gmail’s mail folders.
For me basically when I’m trying to design the navigation, first think that cross in my mind is the number of the links required to browse the website; of course after I understand what and how the clients expect for their website. Sometimes I use the horizontal navigation, sometimes the vertical, and also both. As written above that the article is based on observation, from my observation the horizontal navigation is recently used for navigating not more than five links within the website.
Gelie
Thursday, November 10th, 2011 13:00
I like to have it horizontal, it’s very easy. You just need to decide to the color and design of the navigation that your visitor won’t have a hard time in navigating your navigation. <
Terri Lockerridge
Thursday, August 11th, 2011 09:02
I like to keep the navigation for inside the sites pages at the top of the page.. and links to other sites are put to the side bar. This eliminates any confusion to the visitor or client as to where they need to go if they want to check out something on my site or if they would like to browse to other sites I post for them. If I find a need to have more navigation space to my site.. then I post them in the text in the page content, relevant to the subject being discussed.
Zack
Tuesday, August 2nd, 2011 22:03
This pretty much sums up what needs to be seen around some parts of the web today, and even I could benefit from some of it. So hard to find the right layout some times. you know.
Lauren
Wednesday, August 3rd, 2011 05:14
I think that vertical side navigation bar can work not only on websites, but blogs as well. But a horizontal navigation will most likely be more beneficial in terms of easing usability thus increase the amount of time users spend on your site and clicks you received and in other ways as well.
When creating a design for my side project blog GlitterBurned, initially I was unhappy with all of the design concepts I had made as to me they seemed too similar to all of my other designs. I thought a side vertical navigation would be the perfect way to break away from the expected and I am very happy with the resulting design I came up with.
For this blog, I think it suits it perfectly. Providing such concise functions, the vertical navigation on GlitterBurned suites providing them quite well. Being that this sort of navigation does deviate from the norm, I made sure to call attention to this area, keep the list short and sweet, and gave it a decent font size so that it might be more readily identified and utilized.
For other features and links that are not as much of a priority, I have placed those in a small horizontal menu well. Its a really simple blog blog but again, I am very happy with the design. But a vertical navigation generally is not the most beneficial style.
Tim
Thursday, July 28th, 2011 16:07
You seem to only be thinking about blog sites and such. Think more Amazon and other ecommerce sites. Many of them must rely on side nav because their product category offerings are so large and can keep growing. The only option is hiding things in dropdown menus, which might not be the best thing to do.
Rean John Uehara
Thursday, July 28th, 2011 16:14
Yes, focused on that as to not wander too much. The list could go on, like WordPress and Gmail and other services. :)