Tags: button

27

sparkline

Control Panel

Analogue switches, dials, and buttons, buttons, buttons (just like that Flickr group I linked to).

A Tale of Two Buttons

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.

On Designing and Building Toggle Switches

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.

Design Patterns on CodePen

This ever-growing curated collection of interface patterns on CodePen is a reliable source of inspiration.

Starability - Accessible rating system demo

Accessible star ratings (progressively enhanced from radio buttons) with lots of animation options. The code is on Github.

Designing Button States - Cloud Four

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.

Buttondown

This looks like an interesting alternative to TinyLetter for writing and sending email newsletters, like all the cool kids are doing.

Control Panel | Flickr

Photos of analogue interfaces: switches, knobs, levers, dials, buttons, so many buttons.

Smithsonian 3D Apollo 11 Command Module

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.

Developing Dependency Awareness – Smashing Magazine

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.

Links, Buttons, Submits, and Divs, Oh Hell | Adrian Roselli

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.

Responsible Social Share Links — Jonathan Suh

If you insist on having “social” sharing buttons, here’s a way to avoid bloating your page unnecessarily.

But you might want to reconsider whether you need them at all.

Replacing Radio Buttons Without Replacing Radio Buttons

A great technique from Heydon for styling radio buttons however you want.

You can’t create a button by Nicholas Zakas

Related to my rant on links that aren’t actually links: buttons that aren’t actually buttons.

Sweep the Sleaze | Information Architects

Some sensible advice from Oliver Reichenstein. Cluttering your social media icons isn’t helping and may actively be hindering your audience.

The magic button — Make Everything OK

The most useful site on the web.

Red Pop - the big red button for your iPhone camera!

Brendan’s latest product looks like it’ll be a thing of beauty. But he needs help getting it funded on Kickstarter. If you like taking pictures with your iPhone, I suggest you back this project.