Navigation is a critical part of any website design, but it’s amazing how many web designers simply “set it and forget it.” In other words, it’s tempting to create a navigation menu once and then just leave it the same for every device size. But navigation is important, and building one version and hoping it’ll work for all is very risky.
I’ve been researching how to design navigation for responsive websites and I’ve discovered a lot of great article and information. Here are my favorites:
This is a great case study in how Palantir created a series of templates for a large university. One thing they did that I really admire is they collected edge cases. These are the places where the design falls apart, such as text scrolls out of a box or images float strangely or whatever. Navigation is a place where these edge cases can break a design.
This tutorial shows you how to create a responsive navigation that converts to a select menu when the screen is small enough. But what’s cool is that Chris shows you how to set it up automatically with jQuery so you don’t have to have more than one menu.
More Links I’ve Found on Responsive Navigation
- Building a Responsive Layout With Skeleton: Navigation – Tuts+ Web Design Tutorial
- BaseDemo – HorizontalNav
- How to Create a Responsive Navigation
- mattkersley/Responsive-Menu · GitHub
- 10 Responsive Navigation Solutions and Tutorials
- 40 Beautiful and Effective Responsive Navigation Menus | Vandelay Design