The “Adjust CSS” slider on this delightful homepage is an effective (and cute) illustration of progressive enhancement in action.
Tuesday, October 6th, 2020
Monday, May 11th, 2020
input type="range" and then figure out the CSS you need (which, alas, involves lots of vendor prefixes).
Wednesday, February 19th, 2020
Have fun with this little machine, tweaking the parameters for generating a Joy Division/Jocelyn Bell-Burnell data visualisation.
The interface is quite delightful!
Thursday, May 31st, 2018
This ever-growing curated collection of interface patterns on CodePen is a reliable source of inspiration.
Thursday, November 23rd, 2017
Brad always said that carousels were way to stop people beating each other up in meetings. I like the way Heydon puts it:
Carousels (or ‘content sliders’) are like men. They are not literally all bad — some are even helpful and considerate. But I don’t trust anyone unwilling to acknowledge a glaring pattern of awfulness. Also like men, I appreciate that many of you would rather just avoid dealing with carousels, but often don’t have the choice. Hence this article.
Tuesday, August 29th, 2017
A good introduction to variable fonts, and an exploration of the possible interface elements we might use to choose our settings: toggles? knobs? sliders? control pads?
Thursday, July 20th, 2017
Sunday, June 25th, 2017
A look at the feedback needed for a slider control that feels “right”.
You can get most of the behavioural (though not styling) suggestions in HTML by doing this:
<form> <input type="range" min="0" max="100" value="50" onchange="amount.value=this.value" onmousemove="amount.value=this.value"> <output name="amount">50</output> </form>
Wednesday, June 1st, 2016
You’re supposed to be able to create two-handled sliders with
input type="range" but the browser support isn’t there yet. In the meantime, Lea has created a nice lightweight polyfill.
Monday, November 4th, 2013
I hate carousels, but if you’re going to have one, this progressively enhanced approach looks pretty good.