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
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 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.