Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

We're in the process of redesigning our website, and one of the design goals is to make the site more mobile/tablet friendly.

Our current site is very large, and the navigation is somewhat complicated. Right now our main navigation is divided into 8 drop-down menus that expand when the mouse hovers over them. Each menu has 5-10 items in it.

When we redesign the site, we will likely have a similar number of navigation items, although they may be organized differently. However I don't think it would be desirable to retain the existing navigation format. "Hovering" can be problematic on touch-screen devices, and the long horizontal nav bar from which the menus drop down would have to be very small to fit horizontally on a smart-phone screen. On the other hand, a simple list of links or buttons is also undesirable because there would be way too many without a way to hide or expand/collapse them.

It is also our intention to use responsive design (using CSS media queries) to adapt our site to both desktop and mobile browsers, so a solution that could use shared code for both environments is ideal. I'm trying to avoid having separate "desktop" and "mobile" sites.

I have a few ideas about how we can handle this, but I'm not sure I like any of my ideas. So my question is what is a good touch-screen-friendly and mobile-friendly alternative to pull-down menus for sites with complicated navigation? Examples of sites that implement such navigation methods well would also be very much appreciated.

share|improve this question
1  
Related question: [Best way to present navigation for mobile?] (ux.stackexchange.com/questions/19354/…). One of its answers has a link to examples of navigation patterns, as you request. –  Pep López May 15 '12 at 17:48
    
@joshuacarmody Consider editing title: "What is a good responsive design pattern for site navigation?" Or, something like that. –  tajmo May 15 '12 at 18:00
add comment

1 Answer 1

Gracefully degrade your subnavigation or drop it by reiterating its contents on the index pages.
It's true. Just look at the evidence below. Two great examples of responsive web design are Smashing Magazine and The Boston Globe. Ethan Marcotte himself was involved in the Boston Globe redesign.

Smashing Magazine: Drop the Subnav
Note in these screenshots as we progress from desktop to mobile form factors, the "subnav" disappears completely. It is always reiterated inline on the page, so is technically redundant. Consider moving your subnavigations to your index pages.

Desktop Form Factor

Smashing Magazine desktop

Tablet(ish) Form Factor

Smashing Magazine medium

Mobile Form Factor

Smashing Magazine mobile

The Boston Globe: Degrade Subnavigation

Note that in this example, the Boston Globe navigation goes from a robust, awesome-on-desktop mega-subnavigation, to a more subdued subnav on the tablet form factor. Also note that it goes from rollover (only possible with a mouse pointer), to expand-on-click (necessary for touch devices). The navigation further collapses on mobile.

Also note that the items in the subnavigation are also present inline on the index page. In this case, News breaks down into Nation, Politics, etc. You can find those in the mega-subnav as well as on the page.

Desktop Form Factor

Boston Globe desktop

Tablet(ish) Form Factor

Boston Globe medium

Tablet(ish) Form Factor (navigation expanded)

Boston Globe medium expanded navigation

Mobile Form Factor

Boston Globe mobile

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.