With the ever-rapid transition to mobile web browsing, many websites have failed to implement proper responsive navigation.

Stuck in the hover-and-click mentality of desktop design, websites overwhelmingly ignore the touch-based interface of smartphones. Traditional scroll-over, drop-down menus do not translate well into a mobile environment; there is no way for a user to hover over a menu item using their finger and there is not enough screen space for a drop-down menu to adequately function. This sort of poorly-designed navigation can result in frustrated users clicking out of your website. Mobile-friendly sites require a more nuanced solution that considers how a user interacts with their device. Here at Manning Digital, we are extremely in-tune with how important it is to create modern navigation that will function on both desktop and mobile platforms. We’ve listed some of our favorite advance methods of responsive navigation that function perfectly, regardless of screen size.

Image2

Full Screen Overlay Navigation

For sites with only a first level navigation, full-screen overlay nav is an excellent way to combat a lack of screen-space on mobile devices. With this method, the navigation is triggered by the touch or click of a button—often the three-lined “hamburger” button—and is displayed on the entirety of the screen. Sites which do this well include HugeInc.com, a marketing agency. In their iteration, the full-screen overlay is semi-transparent, allowing the user to still see the main content on the page even when the nav is activated.

Image3

Tabbed Navigation

Another option for smaller sites that have very few pages, tabbed navigation is a unique, out-of-the-box choice. When the phone or tablet is flipped to landscape mode, the tabs can even switch to be lined up in a column on the side of the site instead of in a row on top. Tabbed navigation, as seen in Codyhouse’s demo, only proves effective in a very particular setting—one with few navigation options, only first level navigation, and succinct navigation category names.

Image4

 

Multi-Level Side Push Navigation

Another option for smaller sites that have very few pages, tabbed navigation is a unique, out-of-the-box choice. When the phone or tablet is flipped to landscape mode, the tabs can even switch to be lined up in a column on the side of the site instead of in a row on top. Tabbed navigation, as seen in Codyhouse’s demo, only proves effective in a very particular setting—one with few navigation options, only first level navigation, and succinct navigation category names.

Image6

Multi-Level Collapsable Navigation

Collapsable navigation is a common choice for sites that have multiple layers of navigation. This form of navigation can be pushed down from the top or side of the screen. Like push navigation, collapsable nav only shows the first level upon opening the navigation. When the user clicks on or hovers over a first level category, the second level navigation opens up. As the first level of navigation is still shown on the screen, this method of organizing navigation takes up more screen space than push nav; however, it has the benefit of previous levels being more readily accessible. An excellent example of collapsable navigation is the mobile version of Barack Obama’s website—his site also shows how a responsive site can transition from traditional dropdown navigation to mobile-friendly navigation.

Image7

Perspective Navigation

Lastly, there is perspective navigation—an experimental, visually-engaging animation that is a stand-out choice to use for websites with a single layer of navigation. Like the side-bar navigation, activating the menu pushes the main content elsewhere on the screen. As its name suggests, perspective nav moves the main content in a three-dimensional way in order to create the illusion of perspective and depth. Developed by Tympanus, there are several different ways in which the screen can move—pushed to the right or left, rotated up or down, or even “laid down” on the bottom of the screen. This form of navigation is fully responsive and, like overlay navigation, functions well on smaller screens by allowing for a large area to be used for displaying navigation.

In Conclusion

As more and more web users browse using mobile and tablet devices in lieu of a desktop, it becomes vital to develop forms of navigation that are viable on all platforms. Here at Manning, we consider how to optimize screen space, how to design for different levels of navigation, and how to create navigation functionality that seamlessly fits in with the rest of the website. We encourage you to get in touch with us if you would like to learn more on how we can help you to implement responsive navigation.

Leave a Comment