To say that responsive web design has changed our industry would be an understatement at best. We used to ask our clients which resolutions and devices they wanted us to support, but we now know the answer is “as many as possible.” To answer a challenge like this and to handle our increasingly complex world, our industry has exploded with new thinking, patterns and approaches.
The first things that are affected in a mobile-friendly world are content and information architecture strategies. If our websites are primarily about sharing of information, then we must focus there first. We have a lot of options today for responsive navigation, but here is our take on the best patterns:
1. The “Do Very Little” Pattern
This pattern fundamentally makes navigation a priority, and it doesn’t hide the navigation. If you can show navigation, show it. No one visiting this website has to wonder where the navigation is. However, this is a hard sell for a lot of responsive applications. First of all, it doesn’t handle complex navigation well. If you need more than one level in your application shown at one time, then this pattern is not for you. Also, it could take up a lot of important vertical space in the application.
2. The Multi-Level Toggle Link
Most websites can get away with two levels of navigation, and I have found this is the sweet spot for many implementations. It may not be the flashiest solution, but we have found it to be very stable. This pattern works well for the majority of navigation solutions, and it effectively handles simple two-level navigation structures.
3. The Simple Toggle Link
This is another good option and is really a variant of the previous pattern. In this case, we have no need for multiple levels, but the navigation items are still too numerous to allow for the “do very little” pattern. With some clear iconography and colors, this option can really work well because it is very simple to implement and use.
4. The “Hamburger” Mobile Menu
The modern day hamburger menu is unpredictable – some fill up the whole page, others a portion of it when opened. Some contain just the primary site menu, while others surprise us with a wealth of secondary information. But one thing is clear, hamburger menus are sleeker, more versatile, and user friendly.
As long as you stick to a clear information architecture design, you will ensure that visitors will be able to use your website easily now and into the future.