When it comes to navigation on your site, one of the major questions you're likely to ask yourself is whether to fix, or not to fix. Matthew Smith looks at five top examples of fixed nav systems
Just as in most desktop and many web applications, a fixed-point navigation allows users to keep their tools in front of them at all times. This enables the user to operate in their canvas or move about the app with far greater ease. Whether a navigation bar is steady while the navigation points change (as is the case in iOS interfaces) or a firmly fixed list of items in a desktop toolbar, it can be a comforting thing to know that some elements of an interface stay the same while browsing a website or app.
These same principles can make for a helpful and enjoyable experience when using a website as well. Helpful for the reasons stated above, and enjoyable when employed tactfully – with animations or clever transitions. In effect, it can turn an entire site into a kind of tabbed slideshow that encourages your users to interact with it in a much more app-like fashion.
There are some precautions that you’ll need to take when considering a fixed navigation, however. If you or your client are concerned about screen real estate, fixed navigation can be a poor choice. This is because it occupies a consistent amount of space on the page, effectively reducing the size of your viewport.
For this reason, some designers prefer to place the fixed navigation on the top or bottom portions of the page. By doing this, and by using a transparent background, you can create the sense that the size of your viewport hasn’t changed all that much, and maintain the best qualities of a fixed navigation.
Make sure your navigation is clearly visible and distinct if you allow content to scroll behind it; losing the navigation in the midst of content defeats the purpose entirely.
Here are five examples of some the finest fixed navigation sites you'll find on the web today, and hopefully they can inform and inspire your next project.
Five examples to check out
1. Netontwerp An unusual example with a tight square grid and a centred and fixed layout is found at the home of Belgian designer Simon Wuyts (www.netontwerp.com). It’s a great solution for a small site.