Blog

Responsive Navigation

The process of creating a great responsive layout includes many factors. Fluid-width designs are similar, but not always built with mobile devices in mind. Any typical responsive web design is going to feature staple elements you’d expect to find in most website layout. Navigation is a big focal point because you need to handle the shift between desktop to mobile in a usable manner.

In this article I want to cover various navigation trends found in great responsive websites. These examples should prove useful if you are new to responsive design or just want to understand navigation better. The mobile-responsive ideology is still fairly new and there is plenty of ground to cover for building unique solid navigation systems.

Resizing & Positioning
This first responsive nav technique could be seen as the most minimalist approach. The goal is to design a navigation which never gets hidden and gracefully breaks down as the window is resized. Nav links are just made smaller and fitted nicely into the page, however possible. Basically a “do nothing” approach with a bit of subtlety.

The layout on Fiafo is a great example of this simple methodology. At full-view the navigation links are floated off to the right side. As the browser window is compressed the links will drop beneath the logo and behave like a single navigation bar. At this first break point the links still align side-by-side, but as you resize smaller the links eventually resize to 100% width, stacked vertically. The menu is now a single block element where each link takes up the entirety of the page width.

This design style is appealing because it doesn’t require any hidden links or extra fluff. Everything is displayed without the need for CSS3 or JavaScript. The biggest problem is that navigations with a high number of links (for example, 10 or more) can tend to be very tall.

Another example found on Paid to Exist follows this same formula. Links are floated to the right which eventually drop onto their own line of navigation. The only difference is when the browser gets small enough, these links don’t expand to 100% width. Instead they continue behaving as block-level elements and cascade next to each other gracefully.

Select Menus
Input select menus are regarded by some designers as their least-favorite choice for responsive navigation. This menu works perfectly in every browser because select dropdowns are nothing more than common form elements. However select menus are almost impossible to style in a uniform fashion, making them difficult to customize across a wide array of web browsers.

The benefits of using a responsive select menu all cater towards a familiar user experience. People who are comfortable on the Internet must be familiar with select menus, and so it shouldn’t take a rocket scientist to navigate these links. The largest drawback is how the entire menu feels very generic and often times out-of-place.

Take the example from Apache’s CouchDB menu. The layout is slim and easy to maneuver because it is a single-page design. On a mobile device users probably will not care much about the navigation as long as it works. Navigational select menus are not often the prettiest solution, but they just work. And they work great! Over time as responsive websites evolve I think we’ll see other solutions begin to replace this one. However if you need a quick navigation which is supported by every operating system then the HTML select element is a great choice.

Overlay Dropdowns
Hidden menus are very popular among responsive layouts because they clear room for page content. Screen real estate is a precious commodity on a mobile devices, so you want to give users as much room as possible. Implementing a dropdown menu is perfect because it keeps the links hidden away until the user needs access.

A few months back the web design blog Designmodo underwent a new layout update. When you resize the site each section in the top navigation will appear as an icon. Hover or tap to display a new dropdown element which overlays on top of the content. You’ll find this works for the search field, too.

Overlay menus are fantastic if you don’t have too many links. By toggling these menus it keeps the page in the background while initializing a new block-level list of nav links. It’s just as easy to close these menus without scrolling anywhere on the page. But if you have numerous links displaying in a list it will require scrolling, which may or may not be easy for users.

Multi-Level Navigation
When you have a navigation menu with sub-links then you will have to plan out a great solution for responsive adaptation. Block-level dropdowns can work if you indent links to appear as if they are underneath another topic. Another solution is to create a navigation menu which traverses links in a multi-layer hierarchy.

The example found on Sony’s website is pretty nifty. It would be a bit challenging to duplicate this effect from scratch, but certainly not impossible. Their system works really well for handling a responsive navigation with multiple levels of links. Visitors can browse through the categories going up & down levels until they find exactly what they want.