Navigation is key for your websites users to be able to find their way around your website. Navigation within responsive design is unique though because although you need to provide the same navigation options across multiple viewports you have a changing canvas size upon which to do so.
In this section we look at the specific requirements on one level, two level, and multiple level navigation options and the kind of navigation that you will be working on depends on your current information architecture.
If you have a large and complex website that you are retro-fitting with a responsive design you will find the multi-level navigation helpful, however if you are going through a redesign/restructure of your entire website it is advisable to also visit re-visit your IA and because you might be able to make better use of the responsive design.
When you say navigation do you mean…
When we talk about navigation you should try hard not to just limit yourselves to the traditional top level and left hand navigation, but instead look at providing your users with the an easy way to navigate through your site to find the content and information they need.
This means looking past the traditional navigation mentioned above and begin to look at including contextual links within the content, provide lists of similar articles (and resources as we have done), providing breadcrumbs to easily jump within the section of the site, and even extending the search to provide contextual navigation
Types of Navigation
There are several types of navigation on websites. If you were to be black and white about it you could suggest that any link that takes you from one location to another could be considered as navigation, however for the sake of keeping things simple we will focus on the most common occurances.
Single Level Navigation
One level navigation is often for basic brochureware websites, blogs and portfolio type sites.
Two Level Navigation
Two level navigation is used for news/magazine sites, service based websites.
Multi Level Navigation
Responsive navigation with more than two levels is hard, but with a few simple suggestions you can ensure that all of your navigation is available at any screen size.
Luke Wroblewski has come up with some great solutions for navigation layout patterns but as of yet there haven’t been many real world implementations of large complex navigation and IA.
