Building the new Utopia homepage | Trys Mudford
Trys has written up how he made that nifty little resizing widget on the Utopia homepage.
Trys has written up how he made that nifty little resizing widget on the Utopia homepage.
The “Adjust CSS” slider on this delightful homepage is an effective (and cute) illustration of progressive enhancement in action.
If you want an accessible slider component, the trick isn’t to use a whole load of JavaScript. The trick is to use the native input type="range"
and then figure out the CSS you need (which, alas, involves lots of vendor prefixes).
Have fun with this little machine, tweaking the parameters for generating a Joy Division/Jocelyn Bell-Burnell data visualisation.
The interface is quite delightful!
This ever-growing curated collection of interface patterns on CodePen is a reliable source of inspiration.
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.
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?
If you thought Vitaly’s roundup of date pickers was in-depth, wait ‘till you get a load of this exhaustive examination of slider controls.
It pairs nicely with this link.
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>
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.
I hate carousels, but if you’re going to have one, this progressively enhanced approach looks pretty good.