Responsive Nav — Responsive Navigation Plugin
This looks like a handy little bit of JavaScript for progressively enhancing navigation lists to show/hide them on smaller screens. And it’s not a jQuery plug-in!
Tags: navigation
Responsive Navigation
David’s slides from the Responsive Day Out.
Implementing off-canvas navigation for a responsive website by David Bushell
This off-canvas demo is a great practical example of progressive enhancement from David. It’s also a lesson in why over-reliance on jQuery can sometimes be problematic.
New Rule: Every Desktop Design Has To Go Finger-Friendly (Global Moxie)
Josh takes an-depth look at the navigation design implications of touch/keyboard hybrid devices, coming to a similar conclusion as Luke and Jason:
Unfortunately, the top-of-screen navigation and menus of traditional desktop layouts are outright hostile to hybrid ergonomics. Tried-and-true desktop conventions have to change to make room for fingers and thumbs.
Want to test for a hybrid device? Tough luck. Instead, argues Josh, the best you can do is assume that any device visiting your site could be touch-enabled.
LukeW | Responsive Navigation: Optimizing for Touch Across Devices
Luke and Jason have done some excellent research (and put together some demos) into how the placement of navigation could be optimised for touch screens of all sizes. Turns out that the “standard” convention of having navigation along the top is far from ideal on a touch-enabled device.
Responsive Web Design Patterns | This Is Responsive
A great collection of layout, navigation, and interaction patterns for responsive sites, delivered by Brad.
Complex Navigation Patterns for Responsive Design | Brad Frost Web
Another great in-depth round-up from Brad, this time looking at your options for complex navigation patterns in responsive designs.
Mobile Navigation Icons | TimKadlec.com
Tim shows how to make a scalable three-line navicon in CSS.
LukeW | Off Canvas Multi-Device Layouts
Luke and Jason have put together some demos of various “off-canvas” navigation patterns for responsive designs.
Build a smart mobile navigation without hacks | Tutorial | .net magazine
A really great markup and CSS pattern for “content first, navigation second” from Aaron.
FixMyStreet
Not only is FixMyStreet responsive, it’s using the “display: table-caption” trick I documented for adjustable “content first/navigation second” source order.
Scalable Navigation Patterns in Responsive Web Design | Palantir.net
An case study that tackles complex navigation in a responsive site.
We need a standard show navigation icon for responsive web design | Stuff & Nonsense
Andy documents the kinds of symbols being used to represent revealable navigation on mobile.
Thoughts on Responsive Navigation
Prompted by Brad’s recent post, here are some musings on three methods of handling navigation in responsive sites.
A Responsive Design Approach for Navigation, Part 1 | Filament Group, Inc., Boston, MA
A detailed overview by Filament Group on progressively enhancing navigation for responsive sites.
Responsive Navigation Patterns | Brad Frost Web
Brad does a great job of rounding up various design patterns used for navigation in responsive sites.
The Tink Tank » Marking up the current page with HTML5 links
Leonie points to a change in the semantics of the a element in HTML5 that could be very handy for accessible navigation.
English Russia » Abandoned Russian Polar Nuclear Lighthouses
"Now, there are signs “RADIOACTIVITY� written with big white letters on the approaching paths to the structure but they don’t stop the abandoned exotics lovers."