The Case for Fixed Navigation

Analyze a Trend in Web Design

As good web designers we must carefully analyze each new trend and idea that is thrown into the wild, wild web. Simply blindly following every new “fad” in web design will never make you an awesome and great designer. We need to look at each trend objectively and determine if it has a place in our designer toolbox.

Is fixed navigation a new trend for design?

One new trend is to use fixed navigation either in the header, sidebar, or footer of your browser window. Let’s look at some reasons of why this trend might have some validity in modern design.

Inspiration From Apps and Desktop Programs

When you are using a desktop program or a mobile app you simply expect that certain elements of the program will always be visible when you need to use them. For designers let’s take a look at one of our favorite design tools – Photoshop.

“Imagine if the menu on the top disappeared when you scrolled down the page of the graphic you were editing!”

How about if you are using your favorite browser and the tabs on the top disappeared when you scrolled down on the page – it would be annoying at best.

Chrome browser tabs

We have come to expect that the menus, navigation, and the design tools of our programs will stay fixed in place so that we can quickly access them whenever we need to navigate to a new website, change a tool, or modify the text size of a paragraph we are writing. Fixed navigation is absolutely essential to all the desktop programs we use and love.

Food for thought: Why is it any different in the web?

Fixed Navigation in the Header

Putting the main navigation of a website in the header has been a long-standing trend that is not going anywhere soon. However, why haven’t we seen more sites take a hint from usability guidelines as well as many desktop apps to implement fixed navigation on their site?

Making your navigation fixed is a nice touch to your website that will really make your users feel at ease. There is much room for improvement in fixed top navigation. One idea I was thinking about today was to make google’s search box stay visible in the header at all times so that we could quickly access it without scrolling forever.

Here are some websites that used fixed header navigation.

Collaborative Fund

Happy Cog

Krista Ganelon

Theory Design

Rodolphe Celestin (nice “back to top” button)

Studio Nudge

The Modern Innovation

Newzealand

Marcus Thomas

Bagigia (very nice menu)

Tabspresso

Fixed Navigation in the Sidebar

Fixed Navigation in the sidebar is becoming more and more popular these days not only in the web, but also with desktop programs. One reason for this popularity has to do with the ratio of our monitors. Today most of our monitors and laptops are based on the 16 X 9 widescreen ratio. This means we have plenty of horizontal room on our monitors to display things like menus and navigation on the side of our websites and programs.

One desktop app that utilizes the sidebar menu is Powerpoint. Without the quick access to the slides on the left, it would be much harder to navigate a longer Powerpoint presentation.

Here are some examples of sites that use sidebar based navigation.

Astrel Creative

Beautiful Type (this website should have used fixed navigation)

Jorge Rigabert

Under Armour (Under Armor actually uses a very interesting fixed sidebar on their website)

Made by Parachute (beautiful user friendly design)

Marussia F1 Team

Fixed Navigation in the Footer

The first example of using fixed navigation in the footer I can think of that everyone uses is the start bar for Windows and the Dock for Mac. We have seen huge increases in productivity by using such “docks” in our operating systems, because of the speed the offer us in accessing quickly used programs and functions. It is interesting that a lot of the “docks” are placed in the footer.

Windows 7 Startbar

Mac Dock

“There seems to be a lack of websites that use fixed navigation on the bottom of their website.”

This may be due to the fact that we have grown used to top navigation; although I do believe that the reason runs much deeper. When you are scrolling down on a webpage you usually scroll down to read, and then look back at the top to scroll up to look for links to other websites or to open a new tab in your browser. Therefore, websites that use bottom based navigation run against the natural eye-movement to look upward when a user wants to navigate on your website.

Nevertheless, here are a few examples of bottom based footer navigation:

Categories