LearnChallenges & Solutions for Your Responsive Navigation

One of the biggest hurdles when creating a responsive website is implementing the navigation – hands down. Not just from a design standpoint, but from a content and development standpoint as well. Debatably the most important element on the page, a user should have no issues as they try to navigate around your website no matter what device they are on.

So what are the latest design patterns? And what are the best plugins? Before browsing Dribbble for inspiration and GitHub for resources, step back and determine what your specific challenges are, and what type of solution would be most effective for the project at hand.

Content

When structuring your responsive menu and its content, do so with mobile in mind first. Designing for constraints allows you to revisit the content of your website and determine what may or may be necessary to include. This applies to your entire website, but especially the navigation. If a navigational item doesn’t make the cut on the mobile website, is it really worth including on the site or in the primary navigation at all? Should it instead live within a secondary or utility navigation? Designing responsive websites enables us to think with laser focus and create a lean, efficient online experience.

Design

There are tons of various design solutions for responsive websites coming out of the woodwork. And many of them are becoming recognized design patterns. Some responsive navigations use the “do nothing” approach where they simply shrink down with the grid of your responsive website, while others collapse and hide, and can be viewed by clicking on an icon.

While these design solutions might work for smaller navigations, larger websites might not be able to escape their complex, multi-level navigation. And that’s ok. It’s all about determining what design solution best fits your navigation’s content and is best for the project at hand.

Development

Another factor to keep in mind when creating a responsive navigation are what type of development requirements you might have. If your navigation is built using JavaScript, how will it appear to users who have JS disabled? If you have a dropdown navigation, how is the delay between the physical tap and the menu’s responsiveness to then drop down? When looking for the best solution for your responsive navigation be sure it addresses your development concerns in addition to your design preferences.

Solutions

CSS Frameworks

Many CSS Frameworks have built reusable components including navigation into their solutions. And typically, they are built to give you tons of control in how they are styled. If you’re already using a CSS framework, check the documentation for options to implement a navigation into your responsive website before unwittingly including additional and unnecessary code. Here are a couple popular frameworks that already include responsive navigation.

• Twitter Bootstrap
  http://getbootstrap.com/components/#navbar

  Version 3 of Bootstrap offers a navigation that by default, begins collapsed and toggleable in mobile views and becomes horizontal as the viewport width increases.

  

• Zurb Foundation
  http://foundation.zurb.com/docs/components/topbar.html

  Foundation 5 offers an off-canvas navigation that slides into the viewport when activated, a more traditional collapsing navigation and fixed position nav bar.

  

Plugins

There may be a scenario where you aren’t using a CSS framework or one that includes a responsive navigation, and using the navigation from these frameworks might prove difficult to use alone with dependencies. There’s absolutely no shame in taking advantage of resources others have created to get you started. Here are a few popular plugins.

• ResponsiveNav
  http://responsive-nav.com

  With a previous iteration known as “TinyNav”, ResponsiveNav is effective for simple navigations and easy to implement, this tiny JavaScript plugin uses touch events and CSS3 transitions for the best possible experience.

  

• FlexNav
  http://jasonweaver.name/lab/flexiblenavigation/

  A great solution for websites that can’t escape multi-level navigations, this plugin pays special attention to touch screens using tap targets, the key feature of FlexNav.

  

• Sidr
  http://www.berriart.com/sidr/

  A powerful plugin that handles both left and right slide in menus, this plugin also handles touch events on mobile devices.

  

Custom Solution

Creating a custom solution is always an option, and you don’t have to rub shoulders with a developer to make it happen. It’s much simpler than you might think, depending on the complexity of your navigation. Our very own Andrew Chalkley created a great blog post awhile back on “How to Build a “Three Line” Drop-down Menu for a Responsive Website in jQuery.”

Conclusion

When implementing your responsive navigation, avoid instinctively following trends and step back and observe your project objectively. Which responsive navigation solution makes the most sense and would be most effective for the end user to navigate? Determine your challenges by first focusing the content of your navigation, secondly deciding which design solution best fits that content, and lastly which development approach best achieves that design.

• code
• css
• design