Navigation Patterns in Responsive Design

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

Do Nothing

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

Do nothing responsive navigation pattern

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.

Select Menu

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.

Select list responsive navigation pattern

This approach requires some JavaScript magic to pull off and it rewrites the page markup to transform an unordered list into a select list. I don't care for this pattern that much. Select lists are difficult, if not impossible, to style. Another issue is that over the years, users have come to associate select lists with forms. This can cause a bit of unnecessary confusion when users are trying to figure out how to navigate the site. A select list just doesn't look like navigation at first glance. On the plus side, this pattern does free up a lot of room.

Fly Out Navigation

This design pattern is most famously used on Barack Obama's website as you can see in the screenshot below.

Responsive navigation flyout example

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.

Footer Navigation

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.

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

The Toggle

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. 

toggle navigation pattern

In the screenshot above you see the main navigation menu expanded. When you first load the page, however, the menu is closed and a clean set of three buttons are presented at the top of the page - Menu, Subscribe and Search. Very nice. The downside of this approach is that is uses a snippet of JavaScript, although it is quite modest. If a user visits your site without JavaScript enabled, the menu is simply expanded by default. If you like this technique, here's a nice tutorial.

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.

About the Author

John Hannah

I’m John Hannah, a front end developer at Lullabot . When I'm not building websites, I travel as much as possible and enjoy hanging out with my wonderful family. My favorite place to spend my coffee breaks is Twitter, so please feel free to connect with me there.