Navigation Patterns in Responsive DesignPosted: July 8, 2012 under Web Design
I've written recently about how the Drupal community has embraced responsive theme development and discussed how to use some of the great responsive base themes like Omega.
But today I'd like to talk about a more general design problem that inevitably pops up when working with a responsive theme - what to do with the navigation when the site is viewed on mobile devices.
Below you'll find a round up of some of the patterns other designers have come up with to solve the tricky issues that arise with responsive design.
Let's begin with the most common approach first.
The name of this approach may seem a bit disparaging at first, but that's not really the case. It simply means that the designer didn't do anything fancy and let the list items that typically comprise a navigation menu wrap as the screen size narrows. If they decided to trick things out a bit, perhaps they stacked the list vertically. An example of this approach is Palantir.net.
The big upside to this approach is simplicity. However, it does have some downsides. One major issue is that it doesn't scale very well for sites with a lot of menu items. It's also prone to "fat finger" issues where the menu items can be so small that they are hard to accurately navigate. But the Palantir navigation menu is relatively small and so this approach works quite well for their site.
Another pattern that designers have come up with to deal with navigation in responsive designs is converting the menu to a select list on small screen sizes. Below is an example from Smashing Magazine.
Fly Out Navigation
This design pattern is most famously used on Barack Obama's website as you can see in the screenshot below.
Clicking on the "Menu" link causes this menu to pop out from the left hand side of the page. One advantage to this pattern is that it provides a lot of space.
However, this approach has two potential drawbacks. It is quite advanced, so if you're thinking of implementing this for a client, be sure to add some extra time for development. Another thing I'm not so sure about is the user experience it provides. If you go to the Obama site and play around with this, it's a bit weird at first. Maybe this pattern will really catch on, but for now I'm not quite sure how I feel about it.
This pattern is pretty self explanatory - the navigation is placed in the footer. But it actually comes in two flavors, the first being the inclusion of an anchor in the header pointing to the main navigation at the bottom of the page. The second variation skips the anchor and assumes you'll figure it out. Jeffrey Zeldman's design firm Happy Cog uses the footer only version of this pattern.
This pattern doesn't work that well for me. Users aren't accustomed to it and even once you're aware that a site is using footer navigation, you have to scroll a long way to get at it. In my opinion, the anchor in the header is a must when using this pattern.
Hide n' Cry
Oh boy. This pattern is a really bad idea in my opinion. As the name implies, you hide the menu and your users cry. This approach undermines the entire philosophy of responsive design by making the assumption that your visitors on mobile devices don't want the same content as those using larger screens. Pretty big assumption and in the large majority of cases, incorrect. Naturally I advise you avoid this pattern unless you have strong evidence to support your decision.
I'll end this post on a positive note by discussing my favorite responsive navigation pattern, the toggle. If you're interested in web design, you've likely heard of Paul Boag and his long running podcast series, BoagWorld.
The Bottom Line
As always, it's important to pick the right tool for the job. For larger navigation menus I think the flyout pattern has a lot of potential. In the next month or so I'll be rolling out a redesign (using Omega theme) of this site that will implement either the toggle pattern or the "do nothing" approach. I'm still trying to decide which is the best way to go. I think the only way one can go completely wrong, however, is the "hide n' cry" technique.
Responsive design is still a work in progress. There is a lot of experimentation going on and I think it's a safe bet to say that there is a really cool technique that someone is working on right now that will become wildly popular. Until that genius idea arrives, we're fortunate to have some very good options from which to choose.