Skip to content

Responsive Navigation

There are plenty of posts doing the rounds talking about Responsive Web Design in the bigger picture sense: workflow, tools, and so on. (I find Mark Boulton particularly eloquent on the subject: always a pleasure to read!).

Two posts that really caught my eye were more focused, though:
responsive navigation patterns by Brad Frost from a few days ago (a well thought out, well written, round up of responsive navigation patterns, with pros and cons for each.);
A Responsive Design Approach for Navigation, Part 1 by Filament Group from yesterday (a step by step guide to setting up a solid, progressively enhanced, responsive navigation).

Personally, I'm tending towards using a select for smaller screens: hooking into the native UI seems like a good thing. This could mean using JavaScript (something like Filament Group's cunning testfit in their example above) to switch the select out for a ul for larger screens.
Relying on JavaScript for anything that basic makes me uncomfortable, though, even when it's done progressively. I've been wondering about putting in both select and the ul as a starting point. (Loading extra stuff is bad, yes, but these would be tiny text snippets.) Then, using media queries or some cunning RESS action (see also Dave Olsen's excellent article) to pluck out or hide the one that's not needed.

Filing this under: Must Think More About It.