Bamboo Blog

Design becomes beautiful when there's nothing left to take away. Google understands this; too many other web applications don't.

Many apps grow new features simply to differentiate themselves from the competition, or to increase their target market by supporting multiple conflicting workflows. But every single thing I don't need detracts from the usability of the things I do. In the past I've had to abandon apps that do more than I need, but not any more.

Now I can fix them.

Stylish is a Firefox plugin that lets you write your own css per-site, overriding the existing css. This means you can set display:none on everything unnecessary.

It's a one-click install. You'll also need Firebug to assist in identifying elements you want to block.

Once it's installed, open firebug and point to the offending feature. Figure out a way to identify it with a CSS selector. In some cases this'll be easy - it might have a classname like AnnoyingFeature. In others you'll have to use CSS3 selectors. For example, you can do:

{{ 71410 || gist }}

This matches every Label element with an 'id' attribute containing 'requested_by_id'. This is helpful if the site's using ids like 'story_34524_requested_by_id'.

But what about if you had this?

{{ 71411 || gist }}

It'd be nice to block the parent div, thereby taking out 'annoyance 2', but you can't; there's no "parent selector" even in CSS3. Greasemonkey could fix this; Stylish can't.

While you're there, you can also fix other usability issues like textboxes being too small - it's as simple as 'textarea {height:300px}'.

Stylish has a live preview, and it's only one click to turn off custom styles, so you can afford to be both aggressive and experimental.

You can share custom styles. I'd like to suggest that styles solely designed to remove distractions, rather than 're-skin' sites, include 'Simplify' in the name to make them easy to find. Over the next few days I'll be redesigning some of the web tools I use frequently to make them more of a joy to work with.