Woot for Woot

If you’ve ever had the delgithful experience of a Woot-Off, then you know the feeling that comes ever time you hit Refresh. That voice inside your head screaming “Please load. C’mon server, stay alive…PLEASE LOAD!” And more of the time it does. But every now and then there comes the Bag O’ Crap, and the server takes more of a beating than Rodney King.

Sometimes though, the server manages to squeeze something through. You get the HTML page, but the CSS stylesheet doesn’t make it, and you’re left with a black and white page of text. This just happened, and I noticed something really cool. The first line on the page (after the login) is this:

Welcome to Woot. Skip straight to the product or let us know if anything on our site can be improved to further meet your accessibility needs.

This is cool for a lot of reasons. First, “codeslaves@woot.com”? Awesome.

But more importantly, accessibility is a critical part of the Web. Technology should not limit those who lack. In order to use a computer, blind people use screen readers; software that goes down the page and reads the whole contents of that page to the person. Screen readers ignore stylesheets, so the structure of the HTML code is very important. Putting your header, navigation menu, and everything at top of the code forces the person to sit and sift through all of that before getting to any actual content.

Having this link at the top gives people who need it a chance to skip straight to what they want, and shows a lot of thought and accommodation. And if the stylesheet is active, the line is hidden and doesn’t take up any room for someone who doesn’t need it.

Woot for you, Woot.

Zebra Stripes and Polka Dots

Ok, no dots.

But anyone who’s ever worked with spreadsheets and tables has likely seen zebra stripes: where every other line is shaded to supposedly improve readability.

A List Apart published the results of a study in May that found that zebra stripes didn’t really help one way or the other. The problem with this study is that there wasn’t any pressure; there was no time limit, so participants had no trouble completing the easy questions.

This time around, a 15 second limit per question was imposed, and the tasks were harder (a bigger table, blank fields occasionally). In 3 of the 8 questions, zebra stripes had a “statisticaly significant” advantage.

User preference was also measured. 6 different versions of the same table was shown, and asked by participants to be ordered in terms of readability. Almost a third of participants selected the single-color, single-striped (traditional zebra striped) table as the most readable. Nearly another quarter said that the dual-color (green and gray) zebra striping was the best.

Personally, I would tend to go with the single-striped. I think the extra color distracts my eye a little to much. I would be interested to know what people think about a two-color striped table where the two colors are different shades of gray. I think that might be an acceptable compromise between the two.

I guess people just love their zebras.

Photo by Flickr user .imelda

Check out the original article here.

Design Changes

Switched around the design a bit.

Got rid of the rounded corners template, and switched to one that was much more friendly towards width expansion, the Washed Denim. Made a few tweaks, such as the border on the sidebar, and pushing the comment counter to the right. Made a quick header background image, too, but I’m not very happy with it. I’ll make a better one later.

I like it now, because now I have a bit more space to work with. An entire YouTube video will fit comfortably in this design now.

Let me know what you think.

EDIT:

Tweaked some colors and borders and whatnot. While watching diggnation. Definitely subscribing to it now.