My favorite RWD navigation articles

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:

10 Tips How to Handle Responsive Navigation Menus Successfully

Usabilla - Usabilla - 10 Tips How To Handle Responsive Navigation Menus Successfully
Usabilla – 10 Tips How To Handle Responsive Navigation Menus Successfully

I think what I like best about this article is that it’s less about the HTML, CSS, and JavaScript of the navigation and more about the strategy behind the navigation changes.
 

Scalable Navigation Patterns in Responsive Web Design

Palantir - Scalable Navigation Patterns in Responsive Web Design
Palantir – Scalable Navigation Patterns in Responsive Web Design

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.

Responsive Nav

Responsive Nav
Responsive Nav

I am very excited by this tiny JavaScript plugin. It includes things like CSS transitions and touch events And they claim it works in all major browsers including Internet Explorer 6.

Convert a Menu to a Dropdown for Small Screens

CSS Tricks: Convert a Menu to a Dropdown for Small Screens
CSS Tricks: Convert a Menu to a Dropdown for Small Screens

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

3 thoughts on “My favorite RWD navigation articles

Leave a Reply

Your email address will not be published.