The Evolution of Responsive Navigation Menus
Monday, 1st July 2013
Responsive web design has become popular so quickly that one of the main things we have noticed is how conventions and best practices have changed quicker than usual. So in this blog post, we want to discuss the evolution of responsive navigation.
The main patterns in responsive design navigation are:
The select menu option
One of the early conventions for responsive menus, this involved using some simple jQuery to turn your existing navigation into a dropdown list for mobile view. This is great for keeping your mobile space tidy but relies on jQuery, can't be styled easily and from a code purest point of view we feel it isn't the strongest. We used this on http://www.jplc.org.
Skip to footer option
This is a simple anchor link to send users down to the full navigation in the footer of your site. It is good because it uses no Javascript but it forces users to the bottom of your site which depending on your site design may mean extra scrolling and it may also mean hiding a perfectly good top navigation.
Grid option
For smaller sites, we like this option as it takes up far less real estate then many of the other options and hidden behind a menu toggle button makes it even tidier. We have a great example of this on http://www.billyjeans.co.uk
Hover menu option
For larger sites that have subcategories within categories, mobile navigation can be more difficult. But we find using the existing hover menu and adapting it to mobile devices is the easiest to manage a large sitemap. We have an example of this on http://www.millersauctioneers.co.uk/
The future of responsive menus
The off canvas approach used by Disney.com has become more popular but while a great alternative it has limitations due to old browsers and use of Javascript. There is also the idea of having your menu on a completely different page (as seen in ebay's mobile and tablet apps) but this produces the issue of extra page clicks (or touches).
Conclusion
Unless you only have 6-10 pages on your website then make no mistake, mobile navigation can be really tricky due to the smaller real-estate but we feel it is a case of using the best approach for the job rather than finding a one-size fits all that can be copy and pasted across all websites.
