Popover API Sliding Nav
Here’s a nifty demo of popover but it’s not for what we’d traditionally consider a modal dialog.
Link tags: navigation
63
Historical Trails
Maggie explores different ways of visualising journeys on the web, including browser histories:
Perhaps web browsing histories should look more like Git commit histories? Perhaps distinct branches could representing different topics and research avenues?
First Experiments with View Transitions for Multi-page Apps
Some great ideas for view transitionts in here! Also:
If you look at any of the examples on a browser that does not support them, the pages still function just fine. The transitions are an extra that’s layered on top if and when your browser supports them. Another concrete example of progressive enhancement in practice.
Inside the Globus INK: a mechanical navigation computer for Soviet spaceflight
The positively steampunk piece of hardware used for tracking Alexei Leonov’s Apollo-Soyuz mission.
Improving the information architecture of the Smart Pension member app | Design and tech | Smart – retirement, savings and financial wellbeing
Here’s a really excellent, clearly-written case study that unfortunately includes this accurate observation:
In recent years the practice of information architecture has fallen out of fashion, which is a shame as you can’t design something successfully without it. If a user can’t find a feature, it’s game over - the feature may as well not exist as far as they’re concerned.
I also like this insight:
Burger menus are effective… at hiding things.
Balisage: Metaphors We Code By
My talk, Building, was about the metaphors we use to talk about the work we do on the web. So I’m interested in this analysis of the metaphors used to talk about markup:
- Data is documents, processing data is clerking
- Data is trees, processing data is forestry
- Data is buildings, processing data is construction
- Data is a place, processing data is a journey
- Data is a fluid, processing data is plumbing
- Data is a textile, processing data is weaving
- Data is music, processing data is performing
How to progressively enhance a nav menu | Go Make Things
A lot of folks assume that progressive enhancement means having to write the same code twice, but often, it can be as simple as extending the pattern you already have once the JS loads.
In Praise of the Unambiguous Click Menu | CSS-Tricks
What’s important is that you test it with real users… and stop using hover menus.
Strong agree!
Skipping skip links ⚒ Nerd
Vasilis offers some research that counters this proposal.
It makes much more sense to start each page with the content people expect on that page. Right? And if you really need navigation (which is terribly overrated if you ask me) you can add it in the footer. Which is the correct place for metadata anyway.
That’s what I’ve done on The Session.
If I got made king of web browsers, here’s what I’d do (Interconnected)
I guess, because browser-makers tend to be engineers so they do engineering-type things like making the browser an app-delivery platform able to run compiled code. Or fight meaningless user experience battles like hiding the URL, or hiding View Source – both acts that don’t really help early users that much, but definitely impede the user path from being a consumer to being a fully-fledged participant/maker.
4 Design Patterns That Violate “Back” Button Expectations – 59% of Sites Get It Wrong - Articles - Baymard Institute
Some interesting research in here around user expecations with the back button:
Generally, we’ve observed that if a new view is sufficiently different visually, or if a new view conceptually feels like a new page, it will be perceived as one — regardless of whether it technically is a new page or not. This has consequences for how a site should handle common product-finding and -exploration elements like overlays, filtering, and sorting. For example, if users click a link and 70% of the view changes to something new, most will perceive this to be a new page, even if it’s technically still the same page, just with a new view loaded in.
window.location Cheatsheet - DEV Community 👩💻👨💻
Everything you ever wanted to know about window.location in JavaScript, clearly explained.
w/e 2020-01-05 (Phil Gyford’s website)
While being driven around England it struck me that humans are currently like the filling in a sandwich between one slice of machine — the satnav — and another — the car. Before the invention of sandwiches the vehicle was simply a slice of machine with a human topping. But now it’s a sandwich, and the two machine slices are slowly squeezing out the human filling and will eventually be stuck directly together with nothing but a thin layer of API butter. Then the human will be a superfluous thing, perhaps a little gherkin on the side of the plate.
The perfect responsive menu (2019) | Polypane responsive browser
I don’t know about “perfect” but this pretty much matches how I go about implementing responsive navigation (but only if there are too many links to show—visible navigation is almost always preferable).
Bottom Navigation Pattern On Mobile Web Pages: A Better Alternative? — Smashing Magazine
Making the case for moving your navigation to the bottom of the screen on mobile:
Phones are getting bigger, and some parts of the screen are easier to interact with than others. Having the hamburger menu at the top provides too big of an interaction cost, and we have a large number of amazing mobile app designs that utilize the bottom part of the screen. Maybe it’s time for the web design world to start using these ideas on websites as well?
Lights at sea
Lighthouses of the world, mapped.
Using Hamburger Menus? Try Sausage Links · Bradley Taunt
Another take on the scrolling navigation pattern. However you feel about the implementation details, it’s got to better than the “teenage tidying” method of shoving everything behind a hamburger icon.
First You Make the Maps
How cartography made early modern global trade possible.
Maps and legends. Beautiful!
NASA’s Visual Universe
An interesting way of navigating through a massive amount of archival imagery from NASA.
The Elements of UI Engineering - Overreacted
These are good challenges to think about. Almost all of them are user-focused, and there’s a refreshing focus away from reaching for a library:
It’s tempting to read about these problems with a particular view library or a data fetching library in mind as a solution. But I encourage you to pretend that these libraries don’t exist, and read again from that perspective. How would you approach solving these issues?