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.
ContentWhen 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.
DesignThere 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.
|Treehouse collapses the navigation into an icon for smaller viewports that can be clicked to reveal the full navigation.|
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.
CSS FrameworksMany 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.
PluginsThere 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.