I wrote a while back about how I switched from using a button to using a link for progressive disclosure patterns. That looks like it was a good move—if I use a button, I’d need to use
aria-controls and, as Heydon outlines here, the screen reader support is pants.
A catalogue of objects and observations from cities around the world.
On the need for a way to mark parts of a document as “inert” while the user is interacting with modal content.
A very handy collection:
This book contains frontend coding patterns (and anti-patterns) that will assist developers in building accessible e-commerce web pages, widgets and workflows.
I like that it contains a list of anti-patterns too.
There’s also a corresponding collection of working demos.
A few common patterns—tooltips, fly-out menus, and toggles—that you can achieve with CSS.
A lovely interactive demonstration of evolution, based on the original code Richard Dawkins used for Climbing Mount Improbable.
A nice little collection of interaction patterns with built-in accessibility and no dependencies.
A typically superb article by Aaron. Here, he breaks down a resilient approach to building for the web by examining the multiple ways you could add a button to a page. There’s a larger lesson here too:
We don’t control where our web-based products go or how our users access them. All we can do is imagine as many less-than-perfect scenarios as possible and do our best to ensure our creations will continue to do what they’re supposed to do. One of the easiest ways to do that is to be aware of and limit our dependencies.
I really, really like this approach. I’ve used something similar in my responsive design workshops, where I get people to break things down into nouns and verbs (objects and actions). I think there’s a lot of crossover with good URL design here too—this is kind of like REST for UX designers.
I quite like this step-by-step interface for a form, all cleverly handled with the
:focus pseudo-class. I’d want to refine some of the usability issues before using it in production, but the progressive disclosure is nice.
My concern is that by encouraging the practice of doing UX design without touching the surface of a product, we get shitty designs. In a process where UX and UI are seen as separate things the risk is one comes before the other. The UX designer draws the wireframes, the UI designer gets to turn them into pretty pictures, with no back-and-forth between the two. An iterative process can mitigate some of the damage such an artificial division of labour produces, but I think we still start out on the wrong foot. I think a better practice might entail including visual considerations from the very beginning of the design process (as we are sketching).
A clever technique by Emil to implement the “float label” pattern using CSS. It all hinges on browsers supporting the
:placeholder-shown pseudo-class which, alas, is not universal.
I was hoping that maybe
@supports could come to the rescue (so that a better fallback could be crafted), but that tests for properties and values, not selectors. Damn!
Matthew describes a very nice bit of progressive enhancement for drag’n’drop file uploads (similar to the CSS Tricks article I linked to recently).
It uses the Dropzone JS which looks like it aligns nicely with the progressive enhancement approach.
Some mea culpas from a developer at Medium. They share so that we may learn.
A lesson on the importance of handling each state of an interface:
- the blank state,
- the loading state,
- the partial state,
- the error state,
- and the ideal state
…instead of just focusing on that last one.
A detailed and humorous deep dive into motion design and spatial depth in digital interfaces.
The text of Nicole’s excellent talk on writing helpful, human microcopy.
A superb piece by Ross Penman on the importance of being true to the spirit of the web.
This gets nothing but agreement from me:
For altering the default scroll speed I honestly couldn’t come up with a valid use-case.
My theory is that site owners are trying to apply app-like whizz-banginess to the act of just trying to read some damn text, and so they end up screwing with the one interaction still left to the reader—scrolling.