Notes on the old internet, its design and frontend.
Have fun with this little machine, tweaking the parameters for generating a Joy Division/Jocelyn Bell-Burnell data visualisation.
The interface is quite delightful!
Chris takes two side-by-side deep dives; one into the
a element, the other into the
Even if you think you already know those elements well, I bet there’ll be something new here for you. Like, did you know that the
button element can have form over-riding attributes like
Sara runs through the many ways of providing an accessible name to an icon button, backed up with Scott’s testing.
Bringing gradients back, baby!
This is going to be a handy reference to keep on hand whenever you want a button to actually look like a button.
A history of buttons …and the moral panic and outrage that accompanies them.
By looking at the subtexts behind complaints about buttons, whether historically or in the present moment, it becomes clear that manufacturers, designers and users alike must pay attention to why buttons persistently engender critiques. Such negativity tends to involve one of three primary themes: fears over deskilling; frustration about lack of user agency/control; or anger due to perceptions of unequal power relations.
In defence of the cascade (especially now that we’ve got CSS custom properties).
I think embracing CSS’s cascade can be a great way to encourage consistency and simplicity in UIs. Rather than every new component being a free for all, it trains both designers and developers to think in terms of aligning with and re-using what they already have.
Remember, every time you set a property in CSS you are in fact overriding something (even if it’s just the default user agent styles). In other words, CSS code is mostly expressing exceptions to a default design.
Sara shows a few different approaches to building accessible toggle switches:
Always, always start thinking about the markup and accessibility when building components, regardless of how small or simple they seem.
This ever-growing curated collection of interface patterns on CodePen is a reliable source of inspiration.
The canonical example in just about every pattern library is documenting button variations. Here, Tyler shows how even this seemingly simple pattern takes a lot of thought.
Photos of analogue interfaces: switches, knobs, levers, dials, buttons, so many buttons.
This is so wonderful! A 3D fly-through of the Apollo 11 command module, right in your browser. It might get your fan whirring, but it’s worth it.
Click through for lots of great details on the interface controls, like which kinds of buttons and switches were chosen for which tasks.
And there’s this lovely note scrawled near the sextant by Michael Collins (the coolest of all the astronauts):
Spacecraft 107, alias Apollo 11, alias ‘Columbia.’ The Best Ship to Come Down the Line. God Bless Her.
Use the right element for the job.
- Does the Control Take Me to Another Page? Use an Anchor.
- Does the Control Change Something on the Current Page? Use a Button.
- Does the Control Submit Form Fields? Use a Submit.
A great technique from Heydon for styling radio buttons however you want.
Related to my rant on links that aren’t actually links: buttons that aren’t actually buttons.
Some sensible advice from Oliver Reichenstein. Cluttering your social media icons isn’t helping and may actively be hindering your audience.