The web is moving rapidly away from its fixed-layout past into what it arguably should have been all along – a flexible medium that adapts to any screen size. While there are many aspects to the move from fixed to flexible, the overall process has been dubbed "responsive design." That is, designing sites that respond to different screen sizes, fluidly adapting to the wide array devices available today and the myriad more coming tomorrow.
The idea of designing in a completely fluid medium is a very new notion for most developers. After all, print design was always a world of fixed layouts and thus far the web had largely followed suit. Moving to something where the size and shape is often unknown is a daunting, but exciting process that's still very much in the early, experimental stages.
As with any experimental phase, old best practices are called into question and new ones emerge. Not all responsive design experiments are good ideas. Webmonkey has looked at some overarching best practices for responsive design in the past, but we haven't necessarily covered the finer details of creating a responsive website.
As these things occasionally happen, several developers recently tackled one of the tougher aspects of responsive design – creating a navigation menu that works on any size screen. While key to creating a usable website, menus do not easily resize to fit smaller screens.
Maggie Costello Wachs, a developer with the Filament Group, recently posted an overview of one possible approach to creating a responsive navigation menu. Wachs' solution is to convert the menu from a horizontal list to a drop-down list as the screen gets smaller, in the end moving the drop-down list underneath the site's logo on very narrow screens (you can see a demo here).
The drop-down list is not the only option for dealing with a navigation menu in your responsive designs. Developer Brad Frost recently posted a great overview of responsive navigation patterns, offering up pros and cons of each approach. Along with the drop-down menu, Frost covers options like moving the navigation to the footer, hiding it behind a toggle button and of course, probably the most widespread option at the moment – doing nothing. The latter option works quite well for sites with only a few menu items, but quickly breaks down when navigation menus get more complex.
Along with Frost's lists of pros and cons are plenty of screenshots demonstrating the trade offs inherent in each approach (bonus points to Frost for using screenshots from a wide range of mobile browsers, not just the iPhone or Android).
As with all things responsive at this point there is no one right answer to the question "how do I build a responsive navigation menu?" What works well for one site might well be disaster on your next project. Don't be afraid to try out several approaches. And remember, these are exciting times; you're not just building responsive websites, you're part of a collective effort to create an entirely new visual vocabulary for flexible design.
