Noticed a nice bit of design on the Guardian website – it’s nothing revolutionary but I like it because it shows that thought was put into it.

Basically the entire box for each of the articles is a link, not just the text. That by itself is nice.

However, some of the article boxes have other headlines associated with them. So, the entire box functions as the link for the main article but all the sub links work as well. It was very nicely done so I looked into the class names and they refer to this as a faux-block link.

The entire box is laid out normally, just as you would. The title is a link, the sub titles are links, the category is a link. However, at the bottom they add an additional anchor tag that functions as an overlay with a lower z-index. So, you’ve got all the normal links with a higher z-index (in this case it’s just 1) and then the overlay which fits over the entire box with z-index 0. So, if you click on a link, you are actually clicking it, but anywhere outside of it and you’re clicking the faux-block.

It’s a great simple example of design that the user might never notice but just shows that thought was put into it in order to make the experience just that much better. And the cherry on top is that it’s been shared.

Checking the class names you can find the Guardian implementation and in fact that’s the repository for their entire frontend.

Looking into the class names further (and based on the comment in the Guardian repo) I found that it might have actually been made as a part of the Grandstand library that’s used by the BBC and checking their site shows that they’re using it as well – it’s not some legacy code.

BBC Grandstand is here. It has some other clever things as well that makes their site extremely well organized which I imagine is one of their most important objectives. Link to Faux block code specifically in Grandstand.