James has been tweaking the accessibility of his site navigation. I’m looking forward to the sequel.
I honestly think if browsers implemented this, 80% of client-rendered Single Page Apps could be done as regular good ol’-fashioned websites.
Having to reimplement navigation for a simple transition is a bit much, often leading developers to use large frameworks where they could otherwise be avoided. This proposal provides a low-level way to create transitions while maintaining regular browser navigation.
This article makes a good point about client-rendered pages:
Asynchronously loaded page elements shift click targets, resulting in a usability nightmare.
…but this has nothing, absolutely nothing to do with progressive web apps.
More fuel for the fire of evidence that far too many people think that progressive web apps and single page apps are one and the same.
aria-current attribute is very handy and easy to implement. Léonie explains it really well here.
I’m no fan of mega menus, and if a site were being designed from scratch, I’d do everything I could to avoid them, but on some existing projects they’re an unavoidable necessity (the design equivalent of technical debt). In those situations, this looks like a really nice, responsive approach.
I’ve been thinking about this a lot lately. It feels like a user’s browser history is an incredibly rich seam of valuable information just waiting to be presented in a more interesting way.
One way of implementing the growing/shrinking navigation pattern—an alternative to just shoving everything behind a hamburger icon.
Turbolinks intercepts all clicks on
a hreflinks to the same domain. When you click an eligible link, Turbolinks prevents the browser from following it. Instead, Turbolinks changes the browser’s URL using the History API, requests the new page using
XMLHttpRequest, and then renders the HTML response.
During rendering, Turbolinks replaces the current
bodyelement outright and merges the contents of the
documentobjects, and the HTML
htmlelement, persist from one rendering to the next.
Here’s the mustard it’s cutting:
It depends on the HTML5 History API and Window.requestAnimationFrame. In unsupported browsers, Turbolinks gracefully degrades to standard navigation.
This approach matches my own mental model for building on the web—I might try playing around with this on some of my projects.
Two (similar) patterns for responsive navigation that don’t involve sweeping everything behind a hamburger icon.
When I’ve experimented with auto-overflowing horizontal patterns like this, I’ve found that a judiciously-placed box shadow can give a nice affordance.
This is a really lovely project by Dan and Nat—Christmas cards featuring the fleeting invisible constellations formed by the mesh of GPS satellites within which our planet lies.
A nice navigable timeline of historical events from Wikipedia.
I’ve been thinking about this a lot lately; alternate ways of paginating through the past e.g. by day instead of by arbitrary amount.
Here’s an intriguing approach to offering a navigation control that adapts as the user scrolls.
I’m not too keen on the way it duplicates the navigation in the markup though. I might have a play to see if I can find a way to progressively enhance up from a link-to-footer pattern to achieve this.
The GPS system is a monumental network that provides a permanent “YouAreHere” sign hanging in the sky, its signal a constant, synchronised timecode.
A fascinating project to document markings from 1939—designed to be visible from the air—placed all around the Irish coast.
A nice collection of navigation patterns for responsive designs. The demos aren’t using a mobile-first approach, and they’re reliant on jQuery, but they could be easily adapted.