The whole viewport

This article was written in 2014. 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.

There are several reasons why I redesigned my site. One of them is the whole page. The previous design, like most websites, didn’t use the whole width of the viewport. The text was centred with a lot of white space around it on bigger screens. This is not really a problem, but it’s also not necessary.

The measure makes sense

It makes sense to keep the measure — the width of your texts — small. A measure that’s too wide makes it much harder to read, and on a blog like this one the most important thing to do is reading. I’ve written about some simple rules that exist to find the right measure for your site, and I created a small tool to help you in finding it. With this tool you can pick a theory (for instance the theory that ten words is an ideal length of line) and find the associated width in your language with a certain font. It could very well be that the tool suggests you to use a measure of 23em.

Other variables for defining a measure

With a default line-height, a measure of 23em is nice. In this new layout I used different ratios that Nathan Ford mentions in this article. And I use them extensively. I use them to create the layouts, the font-sizes for the headings, margins and paddings. I also use these orthogons to change the line-height. Now line-height is another variable that influences the measure: if it’s higher, the text can be wider. In my case, if the ratio I use for a layout is 1.414, I multiply the line-height and the max-width with that number. Different measures for different ratios, and the higher the number, the wider the text. I like this.

The whole viewport, every single em of it.

What most sites do, is that they make the column of their main content as wide as the measure. Everything will be as wide as this measure: the images, the code examples, the headings, the videos, the blockquotes, everything. While playing with the excellent orthogon theory I saw that the width of the main content block doesn’t have to be same as the width of the text in it. It can be much wider if the viewport allows it to. This also means that other content can be wider than the measure too. For instance, code blocks are 100% wide. Headings have the same max-width as the text in a paragraph, but since I use the em as a unit — as we all should — they can be much wider. Just like the first paragraph.

The most webby website

This way I can lay out the content of my site over the complete width of the viewport. I’m very happy with the result — even when some of the themes (you can see them by refreshing this page) are not good enough yet. The designs make sense. And since they use the viewport of the browser as the only real edge, instead of some random pixel value, I consider this to be the most webby website I’ve ever made.