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
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
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.