A couple days ago, Ryan and John pointed out to me that they had some usability issues with the color of the links on my site when you hover over them. I had been making them white, but that was just too hard to read on the light background of the site, especially for on some displays.
In a nod to all of the help and advice John’s given me, I immediately set the a:hover style to “Sinosplice Green“, i.e., the background color of John’s site that he’s been using since the bronze age of blogging. I was been busy with the school, and Google Docs had basically wreaked a gigantic curriculum document I’d been working on. There just wasn’t time to think about it. I just had to pick something that was readable. The only problem is that that particular color (#363) is ugly on this site. After giving my students a few new chapters in their textbook and getting their CDs burned yesterday, I finally had a little bit of time to turn my attention to fixing up my site a bit.
I ended up choosing just plain old blue for my link hover color. But, once I start fixing things, it’s hard to stop. As soon as I settled on blue for my links, I started getting irritated by other usability problems. For one, there were forty comments on my post about SEO. Most of them were from people, but a lot of comments were also just trackbacks from other people linking to the site. It was kind of hard for me to follow the discussion thread and read through them. In other words it was time to edit my comments.php and see what could be done.
Here’s what I came up with:
- Comments are now numbered.
- Comments made by me are now light blue, #eef, to be precise.
- I’m not quite sure what the difference between a trackback and a pingback is, but they’re pink now.
- All other comments still alternate between normal (#eec) and lighter (#ffd) shades.
Now, it’s easy to tell refer to comments by number, it’s clear which of them are from the me and which are from guests, and it’s easy to skip over trackbacks and pingbacks while reading a thread. I’m pretty happy with it, but feedback and suggestions about the layout are more than welcome.
For those curious about how I did it, I’ve posted the code below: continue reading…
