Fixed navigation is still a fashionable device in design. But make sure you really need it, says Gene Crawford.
With tools such as jQuery being widely used we're seeing some new trends across responsive website design. One of these is fixed navigation, where the main navigation elements on a page are fixed in place, whether in the header or one side of the website layout. This type of overall navigation element can be both useful and visually interesting, but avoid making the navigation stick just for the sake of it when you're building the website.
There are many considerations worth practising for a fixed navigation design. What's good for large display sizes, such as a desktop or laptop monitor, may not work on a smaller screen like that of an iPhone. The main interaction is centred on scrolling, so if the page is very long, it may be perfectly suited; but if not, it could feel gratuitous.
Does the navigation design visually work in the layout as a fixed element? Some of the more successful uses occur where design elements blend into each other and disappear or interact in some way upon scrolling, creating a much richer interaction than just a block of colour behind some links. If it's a single-page design you can use the fixed navigation to help inform the visitor about which section of the page they are currently viewing, just like if they were taken to a new page.
Fixed navigation can be a powerful design pattern when used to help a visitor. It can also greatly enhance the experience of using your website when it interacts with the design visually. Like all things though, there should be a reason for it to be there. If you can't justify it in some way then you should take a step back and think about why you're using it. Poorly executed navigation can spell disaster for user experience.
The navigation design for web design firm Theory is a great prototypical fixed navigation design to study. It visually mixes with the page design well and uses colour to denote which section of the page you are currently viewing.
The fixed navigation header on the website for design firm Creative Sloth is a good example of not needing much other than some visual design queues to make it look great.
The fixed navigation interaction on vacation resort town Kiawah Island's website is unique in that it stays fixed just long enough to get you past the large image used for the slideshow before it disappears.
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
