Home » » The Evolution of Responsive Navigation Menus

The Evolution of Responsive Navigation Menus

Posted: 01 July 2013
Blog Image

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.

Select Responsive Menu

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

Grid Responsive Menu

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/

Responsive Hover Menu

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.

responsive web design, design tips,

By Paul Tissington (Google+), Web Designer, Edward Robertson Limited

comments powered by Disqus

image of a pixel Categories

image of a pixel Archives