My favorite RWD navigation articles

Wed, 02 Apr 2014 19:14:10 +0000

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:

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.

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

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.

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.

Comments:

Jeff Smith - Apr 4, 2014

Thanks Jennifer, I have always found your articles to be thoughtful and beneficial to adding to my knowledge base of web design.

Jennifer Kyrnin - Apr 1, 2014

Thanks Jeff!

увеличить губы гиалуроновой кислотой - Feb 2, 2023

I really like it when people come together and share views. Great blog, keep it up!

HTML5 Links on HTML5 in 24 Hours

My favorite RWD navigation articles

10 Tips How to Handle Responsive Navigation Menus Successfully

Scalable Navigation Patterns in Responsive Web Design

Responsive Nav

More Links I’ve Found on Responsive Navigation

Comments: