ALA Favelet • Flailing Wildly

I remember when I first came across A List Apart. It was a great e-zine that taught me a great deal about web design, web standards, and how to be an all-around better web guy. It was great.

I also remember seeing the teaser for ALA 3.0. I couldn’t wait for the awesome design that would come out of the mind of my favorite web guy, Jeffrey Zeldman. Then it debuted. Ugh. Are they serious?

But, as many people commented, the content is key. And even though I’m not too fond of the current design of ALA, they still have some of the most informative articles around to help us all grow as web designers.

However, over time, I realized that I would avoid going to the ALA site because I had a hard time reading it. Everything seemed to blur together, sections of the article weren’t made obvious enough to be able to visibly scan, and so I’ve missed out on some fantastic articles over the last few months. Grrr…

So, this morning, I was sitting at work going through my feeds in Feed Demon. CSS Vault had some nice new designs, and so did the Zen Garden (you can find the feed URL by looking at the source). I noticed that ALA had two new articles posted, so I clicked through and opened them up in my browser. Drat. Readability is foiled again!

I finally decided to do something about it. I realized that my complaining isn’t going to change Zeldman’s mind about certain design elements, but I can always change them myself through the use of a favelet! I spent a couple of hours writing scripts and tweaking things until I got it how I liked it. Here you go: ALA Styles Favelet.

!(function() {
    document.getElementsByTagName('body')[0].setAttribute('style', 'font-family:verdana; font-size:11px;');
    document.getElementById('wrapper').setAttribute('style', 'width:95%; background-image:none;');
    document.getElementById('sidebar').setAttribute('style', 'float:right; width:180px; position:absolute; top:30px; right:30px;');
    document.getElementById('maincontent').setAttribute('style', 'float:left; width:70%;');
    document.getElementById('authorbio').setAttribute('style', 'font-size:11px; background-color:#f9f9f9; border-top:1px solid #aaa; border-bottom:none; padding:10px 5px;');

    for (var x=0; x<document.getElementsByTagName('pre').length; x++) {
        document.getElementsByTagName('pre')[x].setAttribute('style', 'background-color:#e9f5ff; border:1px dotted #333; font-family:verdana; font-size:11px; padding:5px;');
    }

    for (var x=0; x<document.getElementsByTagName('code').length; x++) {
        document.getElementsByTagName('code')[x].setAttribute('style', 'background-color:#eef; padding:0 3px;');
    }

    for (var x=0; x<document.getElementsByTagName('li').length; x++) {
        document.getElementsByTagName('li')[x].setAttribute('style', 'font-size:11px;');
    }

    for (var x=0; x<document.getElementsByTagName('h1').length; x++) {
        document.getElementsByTagName('h1')[x].setAttribute('style', 'font-weight:bold; font-family:"trebuchet ms", trebuchet; font-size:20px; color:#000;');
    }

    for (var x=0; x<document.getElementsByTagName('h2').length; x++) {
        document.getElementsByTagName('h2')[x].setAttribute('style', 'font-weight:bold; font-family:verdana; font-size:12px; text-transform:uppercase; border-bottom:2px solid #333; margin-top:30px;');
    }

    for (var x=0; x<document.getElementsByTagName('h3').length; x++) {
        document.getElementsByTagName('h3')[x].setAttribute('style', 'font-weight:bold; font-family:verdana; font-size:12px; text-transform:uppercase; border-bottom:2px solid #333; margin-top:30px;');
    }

    for (var x=0; x<document.getElementsByTagName('blockquote').length; x++) {
        document.getElementsByTagName('blockquote')[x].setAttribute('style', 'margin:0; padding:0; border-left:2px solid #ccc; padding:7px 15px; margin:10px 0 15px 30px; background-color:#eee;');

        for (var y=0; y<document.getElementsByTagName('blockquote')[x].childNodes.length; y++) {
            document.getElementsByTagName('blockquote')[x].childNodes[y].setAttribute('style', 'font-size:11px; padding:0; margin:0;');
        }
    }

    for (var x=0; x<document.getElementsByTagName('acronym').length; x++) {
        document.getElementsByTagName('acronym')[x].setAttribute('style', 'border-bottom:1px dotted #333; cursor:help;');
    }
})();

You should right/command-click the favelet link and save it to your clipboard, then create a new bookmark with this as the location.

Thankfully, ALA is very standards compliant, so I didn’t have to do a lot of CSS hacking through JavaScript. Although this Favelet is only intended to alter the design of ALA to be more readable and aesthetically pleasing, it might very well work on other standards-compliant sites as well. Who knows.

If you like it, let me know. If you hate it, let me know. If you think I could improve, let me know.