epik child theme

7 Emerging Responsive Navigation Design Patterns

More and more people are using mobile devices to surf the Web. In the beginning, web site owners were told they should have two versions of their site a .com for desktop users and a .mobi version for the mobile users. That recommendation has evolved over time. Today, they (I’m not actually sure who “they” are–but they are the ones whose advice filters down through numerous publications and blogs to us web designers and developers) are telling us we should only have one website (.com) and that it should be mobile responsive. In other words, the layout adjusts to the screen size of the user whether desktop, mobile phone, or tablet in all their various screens sizes and permutations of portrait and landscape orientation. One dilemma that still faces web designers is what to do about the main navigation. Seven design patterns have emerged to handle mobile responsive sites.

1. Do Nothing

Example of "Do Nothing" navigation pattern

Example of “Do Nothing” navigation pattern

This is the easiest one to implement as the designer doesn’t do anything. The navigation wraps as needed. No additional CSS or JavaScript are needed. It does, however, take up space especially at the top of the screen. See example of iPhone 5 simulation screenshot on right.

2. The Footer Anchor

On a wide screen, the menu is displayed across the top. When the screen is narrow a menu link, icon or button is placed that when clicked takes you to a menu at the bottom of the page. There are two ways to implement this. In the first, you create two navigation menus. The bottom menu is hidden on wide screens while the top menu is hidden on narrow screens. In the second method, you place the navigation only at the bottom but at wide screen you use absolute positioning to push it to the top of the page. The footer anchor design pattern is easy to implement. It does not require any special CSS or JavaScript. It can, however, be disorientating to some users. A confused users is likely to go somewhere else they find easier to understand and use.

3. The Toggle

"Toggle" design pattern example

“Toggle” design pattern example

The toggle design pattern is the most commonly used navigation used today. In small screens, the navigation is hidden away and replaced with a link, icon or both. When a user clicks on the link or icon, the navigation slides open pushing the page contents down. This design pattern is good for users as it keeps navigation in place. It can also be an elegant solution. It is often JavaScript dependent, however, and some options do not support keyboard access.

4. Toggle Overlay

This method is a variation of The Toggle design pattern. Instead of pushing the content down, it sits on top of the content. It has the same benefits and problems as The Toggle.

5. Multi-Level Toggle

This one is similar to #3 and #4 above but supports child levels which may or may not collapse or expand with the main menu. It has the same benefits and problems as The Toggle but adds the potential of confusing users to the mix.

6. The Select Menu

In this design pattern, the navigation menu is displayed as a drop-down list selector on small screens. While it frees up screen space, it requires JavaScript, can be confusing for users and is very difficult to style.

7. Off-Canvas

This navigation design can be very elegant and user friendly but it is much harder to build and doesn’t always scale well. On a small screen navigation is hidden away and replace with a link, icon or both. When users click on the link or icon a tray slides in from the left and the main content is pushed to the right.