Responsive Design, how to display two large navigation menus?

Question

we are currently looking at redesigning one of our sites so it is responsive. The problem is the site generally has two large menu systems per page. One at the top as the main navigation and then a left side navigation which has all the pages for that section which is generally also quite big. Basically trying to figure out the best way of dealing with this.

I haven't been able to find any example of people doing this with Resposnisve . I've found sites with a lot of content like Boston Globe but nothing with two large menus. Anyone got any suggestions?

Answer 1

Aside from rethinking the IA so that your content is more desciverable on mobile devices anyway, perhaps you could use the follow approach - one that I've gone with in the past.

There will be a primary menu where the top-level categories exist. While these are present on the 'desktop' site at the top as standard when you get to mobile size then revert that to a menu button (a.k.a. the 'hamburger menu', apparently).

This is a separate menu to the sub-menu on the desktop site, so it should still be separate on mobile. It allows users to quickly jump to the top-level of whatever area of the site they want to get to.

For the submenu, I have taken to moving this down to the bottom of the page, and have an anchor link at the top to take the user to that menu. The reasoning for this is that it's the content on the page that is important, not the sublevel navigation.

Provide a clear link to the sublevel navigation at the top of the content and then that will take the user down to the bottom where they can see all the subpages within that section. If you need to show sub-sub levels here too then this should also work, although bear in mind the more sublevel pages there are per section the larger this list of pages is going to be - you'll just be presenting a large list of pages to the user, no actual valuable content at that point.

^{download bmml source – Wireframes created with Balsamiq Mockups}

^{download bmml source}

The primary message here is that - Content is more important than navigation. Yes, they need to navigate around, but keep the navigation where they can find it easily rather than showing it to them all the time when the chances are they just want to read the actual page.

(Not to mention that if you were to show the whole navigation at the top of the content on mobile nobody visiting the site would ever see the page state update because it'd jump from one page showing loads of navigation to another pages showing navigation, with the content hidden well 'below the fold')

Answer 2

When your creating a responsive design you want to limit your content so it's readable on a mobile device but also allows the user to find the information they are looking for. Smashing Magazine has a great example of a responsive layout in that at a higher screen resolution users can view more detailed content while at the mobile level users can find categories through the drop-down (which holds both top and side levels of navigation) located at the top and if all else fails there is a search option. Smashing Magazine organized their drop-down navigation to with Sub Headers (top = smashing categories and side = smashing sections) Screen captures are displayed below showing the difference in screen resolutions.

Smashing Magazine Large Resolution

Smashing Magazine Mobile Resolution

You could also look into Brad Frost Responsive Layout Patterns Site which provides vast amounts of information and guidance in approaching responsive layouts (Patterns, Resources and News). The Resources section is full of examples you may find very helpful with the creation of your responsive navigation!