23 May 2019

Bringing this website back to life

I never intended for this website to become famous and popular, but looking back, I wish I had used it more often. For instance, to write down notes and thoughts, especially after spending countless hours researching some obscure problem.

The last few years have been quite busy, and thanks to work, my time now is limited. This means I don’t get to (or should) spend as much of it in front of my MacBook as I sometimes wish I could. I’ll do my best, though, to actually use this website from now on, and write things down.

And what better way to revive a website, than to redesign it?

I’m a minimalist by heart. I love functional minimalism, not only when it comes to websites, but for all kinds of technology. I’m the kind of person that puts a car on his do not ever buy-list, if the interior and dashboard layout is too messy and unorganized. Aesthetics is just as important, so I wanted to make the new design both functional and aesthetically pleasing: To have the best of both worlds, without sacrifice. Sounds easy, right?

The first thing you might notice is the simplicity. There are almost no colors, no flashy animations, the typography is simple but well thought out, and the focus is all on the content. And if you look under the hood, you’ll notice the lack of JavaScript and any kind of trackers.

When it comes to the typography, there are no web fonts or custom fonts. Instead, the font is set to a list of system fonts used on different operating systems, to use the default font of the visitor’s system. The vertical rhythm, that would be margins, line heights, font sizes, and so on, is based on a modular scale, with the perfect fourth (3 to 4, or 1.333) as the base ratio.

The colors are chosen to not be noticed, as well as to pass the Web Content Accessibility Guidelines enhanced criteria for color contrast, which states that text must have a contrast ratio of at least 7:1 for body text and 4.5:1 for larger text. Links are colored bright blue, to separate them from the rest of the content.

The design is built from a mobile first perspective, and should look good in all resolutions.

In all, I’m quite happy with the result!

Some technical stuff

The old design was based on the Skeleton CSS framework. There is nothing wrong with Skeleton, but I decided to build the new design using flexbox. I found a flexbox-based framework, named Frow , that I used in the first version of the new design. So far so good!

Well, after giving it some thought, I decided to drop all frameworks and instead make the design myself, from scratch. The main reason for this, is that even the simplest and lightest frameworks will include lots of code and classes that will never be used. This is a very simple website, so it didn’t take me long to recreate the relevant features with pure flexbox.

The CSS is organized and written with the BEM methodology in mind. BEM mighth be a bit overkill for a small website like this, but I wanted to try it out and to learn more about the concept. In short, BEM is a way to organize styles in a simple and logical way. Styles are named and organized after three key elements: Block, a standalone entity that is meaningful on its own; Element, a part of a block that has no standalone meaning, and is semantically tied to the block; and Modifier, a flag on a block or an element, used to change their appearance or behavior.

Another change is that the website is now powered by Hugo on Netlify instead of Jekyll on GitHub Pages. This was actually quite a big change, as it required me to rewrite everything apart from the content, so I’ll save the details for a future post.

References and inspirations

The following list is an incomplete list, in random order, of articles and resources I used for research and inspiration.