love is all around

Do you have a website that you use regularly, but take issue with the designer’s choice of colors? Or maybe you find a site to be too busy - offering you way more information then you need day-to-day? Or you just want to get rid of the ads?

A new Firefox plugin called Stylish lets you do just that. Now you can restyle any website - overriding the original style. Even changing images and fonts. Better yet, you can share your created style with others on userstyles.org. If the site you’re using is popular, someone else has probably already styled it.

I just created a style, Bloglines Efficient, for Bloglines.com - the site I probably use more than any other. Bloglines is fairly garish and high-contrast, and contains lots of stuff I never use. Since screen real-estate is gold, I don’t want anything I don’t use taking up space.

Here’s the before picture.

My style does the following:

• Cleans things up
  • Removes tons of unneeded links and images - makes the display much more compact and less busy and distracting.
  • Makes the headline links a little smaller - means I can fit more on the page, and scroll less.
  • Removes headline link underlining - I find the headlines easier to read without underlines.
  • Remove the large feed icons - Some of the feed icons are pretty ugly, and they just take up space.
• Lowers the contrast
  • Swaps the blues for grays - I find the gray just easier to look at.
  • Makes the tree links dark gray instead of black
  • De-saturates the folder images

Here’s what it looks like after.

I’ve been doing web design for several years now, and have learned the following hard lessons:

• CSS sucks for layout - floats are great for floating an image in a block of text, but are profoundly unintuitive for doing page layout.
• This sucking has been compounded about 1000 times by broken layout models in popular browsers - Microsoft is mostly to blame here. I can’t imagine how many cumulative hours have been spent on this planet just solving cross-browser CSS issues. I’ve spent my share. It’s utter hair-pulling madness and a dreary waste of time. I am so grateful for IE7 finally getting it right, for the most part, and for JS-based libraries that automatically fix issues in IE5 and IE6.

I think another reason I find CSS so frustrating is that there are no libraries. When I’m coding in Perl, say, all the heavy lifting is done by (hopefully) time-tested, heavily regression-checked libraries which I cobble together to make cool stuff. I work best when I’m a code DJ (mixing and remixing code written by others) rather than a code composer. But in the layout realm, it always feels like a huge step back - I’m having to debug all these stupid layout problems that other people have had to solve as well, thousands of times over. Solutions to CSS problems are piecemeal and scattered all over the web, with some people charging you to read them. It’s hugely frustrating and a big waste of time.

When I’m building a new site design, I usually start from scratch with the standard CSS ‘reset’:

* {border: 0; margin: 0}

to fix several box-layout compatibility issues. Then I add a rule to set the default font, and on it goes. This is crazy-making for a developer used to high-level languages and huge open-source module repositories.

However, it appears that help is on the way - Yahoo! has built a CSS foundation layer as part of a larger UI toolkit. This foundation has three components:

• Reset CSS - This module levels the playing field between browsers by normalizing the default rendering of all HTML elements. It allows you to be more confident that things will look the same between browsers.
• Fonts CSS - This module offers cross-browser typographical normalization and control. Provides font degradation paths that work across operating systems, and allows for user-initiated font resizing.
• Grids CSS - This module provides templates for fluid and fixed-width layouts that are easy to customize.

And you can get all three conveniently packed into a single compressed file to drop into your next layout.

So much for having to reinvent the CSS wheel for every new website.