I did like the functionality of the previous version because of that category link. Because I’m surrounding everything in the with a link, there is no way to keep that functionality. I cannot have a link within a link.

I decided that it was best to have the largest clickable area possible because I link to my categories in the navigation that appears on every page, but that could change depending on the context. If I didn’t have the categories in the navigation, I would think twice about the usability of the design at all. Readers would have no idea how to get to a specific category page.

One concern though: I feel like the solution has LOST some functionality. In the original code example, you’re able to click the category in order to sort posts using that category. Your solution does not have the capability. I don’t know if that had been considered, but if it had, may I ask why you decided to drop that functionality off the list?

I’ve chosen not to support IE6 with this site (and actually every other site I make). It takes up too much of my time to pander to such an outdated browser. I’d rather take my time and make the experience better for modern browser users.

I serve up an unstyled version of the site if the user happens to be in IE6.

That is definitely a usability pitfall with this method. I considered this and decided that for this particular situation, users wouldn’t need to highlight text that much. The goal of making this entire list item clickable is to get them to the article (where they can then select text to their hearts desire).

If you wanted to keep the text selectable, you could have the same layout, but multiple links surrounding each one of the columns. All of these links would point to the same place. You would also need to fake a unified hover state on the entire li, which isn’t supported in a few browsers (other than with a single a).

You can check out Digg for an example of this. It’s not the same layout as this one, but it’s the same concept. Notice how the the paragraph description for each story is linked.

I can see me implementing this throughout several projects where “semantificity” isn’t that much of an issue (internal software development)…

Thank you for an interesting post!