This article was written in 2013. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

This site goes to eleven

Today Stuart Langridge tweeted that he hated me. He doesn’t know me personally, but he hated me because clicking on the headline of the first blogpost on my blog homepage showed no visual change at all. He is right. I hate this pattern too. So I changed the way posts are displayed on the homepage. The first step was to change the number of posts, displayed on the homepage from a randomly chosen ten to a more webby eleven. On the responsive web, eleven is a nice, even number. This post is based on an old layout, which is gone by now.

Why eleven?

If you don’t like reading, or if you have a small screen, go on a take a look at the image of the different layouts for the homepage. It should explain itself. But please do read on.

If you have a small screen, you’ll see eleven posts, the one above the other. The first one has a slightly bigger font-size. This has two reasons: it’s the most recent article on my site, so it deserves a bit more attention. It also solves the problem Stuart hates so much.

On a bigger screen, there’s room for two columns. So all articles are placed next to each other, except for the first one, which still deserves more attention: it’s still displayed on one single column. This results in one post on a single column and ten on two columns, which counts up to a nice, logical eleven.

On still bigger screens, most articles are displayed on three columns, except for the first two. These are the most recent article on my site, they deserve a bit more attention. Nine posts on three columns, and two posts on two, results in a nice, even layout with eleven posts on it.

People always complain that responsive design is only about smaller screens. They want to optimise for huge screens too. I don’t really care about huge screens, I believe they are an anomaly, but hey, I solved that too. On huge screens, the first three articles deserve a bit more attention, so their font-size is slightly bigger. They are laid out over three columns. The remaining eight articles are laid out over four columns. Yes, this too results in eleven posts total.

You can see all the layouts in this single image. Handy if you don’t have a big screen.

So, not only Stuart is happy with my homepage now. People who want layouts that are optimised for ultra-wide screens are happy too. Was it worth the effort?