Redesign website to be even simpler

html, css

07 Aug 2023

Last weekend I spent some time redesigning my website because I wanted it to be even more minimal than it was before. The result is what you are currently looking at today! If you are interested in details you can check out the corresponding pull request on GitHub. In this blog post, I will add some thoughts about this redesign.

Minimalism wins

While I think that already the previous version of my website was pretty minimal, I managed to reduce it even more. I removed the borders since I did not like them anymore. In general, I minimized the CSS as much as possible, so I ended up with exactly 152 lines of CSS, whereby this also includes color definitions for the syntax highlighting in blog posts and a dark mode implementation.

I am well aware that this results in a very minimal look, without a lot to stick out, and that not every website can be built like this, especially the ones that are made for marketing. However, I am not a designer, so I usually do not like what I build on my own visually anyway, and on this blog I am heavily focusing on content. Therefore I do not want to spend a lot of time tweaking the appearance of my website.

There are also nice side effects:

The website is more or less automatically responsive since websites are responsive by default. The only reason it is not anymore is that developers added some CSS that breaks responsiveness. Since there is not a lot of CSS, there is (probably) nothing that breaks responsiveness.
The performance is phenomenal since there is not a lot to load for the client.
Since I did not change the styling of a tags too much either (except for some light color adjustments in the dark mode), users will actually see which pages they have already visited.

No classes in HTML

My minimalism goes so far, that I did not even bother to introduce classes in my HTML. I just used semantic HTML tags like header, main, or footer, and using those to reference them in CSS was almost enough. I also used the address tag to add the contact information of the author (always me) in the header of the page.

Additionally, I also used the rel attribute on some a tags. This way I declared the home link as a reference to the author of the website as shown in the following snippet:

<a href="/" rel="author">Daniel Rotter</a>

I also added a rel attribute to the link to my Mastodon profile. The cool thing about this is that Mastodon uses that for verification.

<a href="https://mastodon.social/@danrot" rel="me">

Using the rel attribute and the semantic HTML tags allowed me to reference everything I need in CSS, although I have to admit that some rules are a bit problematic since they are heavily coupled to the structure of the HTML, e.g.:

body > header {
    /* ... */

    address + p {
        margin: 0.5em 0;
    }
}

This rule will set the margins for the bio line in the header, but that is not clear from looking at the CSS selector. Also, if the markup changes the styling will fall apart. However, I feel like I am not changing the style too often, so I do not think that it will be a problem, but at the same time, I see it as a small experiment that I can learn from.

Use the default font of the user’s browser

Regarding fonts, I remembered that I really like the typography of HTML documents generated by pandoc, a tool I e.g. use for creating presentations for my lectures. But I realized that the font changed with a recent update. After some searching, I found a pull request called “Don’t mess with user’s font-size or line-height”, which removed the font-size and line-height properties. The pull request author explains that using the browser settings instead has huge advantages regarding accessibility. Low-vision users can increase the default size of the browser and enjoy bigger texts, if (again) CSS does not break this feature.

So instead of messing with font styling I just leave it to the browser and reuse whatever it defaults to. This means that the appearance of my website will not look the same on every device, but I also do not think that this is important. Instead, I prefer to display the website in a way that is readable to as many people as possible. So the only font sizes set in my CSS are for headings and similar elements, and these will be set using the em unit. em is a unit relative to the font-size of the current element. This way the website’s font will appear bigger if e.g. low-vision users with adjusted browser font settings visit the site.

article {
    margin-top: 3em;

    header {
        h1 {
            font-size: 2.5em;
            margin: 0;
        }
    }

    h2 {
        font-size: 2em;
    }

    h3 {
        font-size: 1.5em;
    }
}

Mind that I also use em for margins, since this way the proportions of the website will adjust accordingly to the font size of the browser.

Use WebP image format

The last small adjustment I made was to use the WebP format instead of PNGs, since WebP results in smaller images. In order to convert the existing images I used the cwebp command as described in the WebP Documentation and combined it with a fish for loop as described in a previous blog post about executing commands for multiple files in fish:

for f in *.png
    cwebp -q 90 $f -o (echo $f | sed 's/\.png$//g').webp
end

This loop will go over all files ending in .png and use the cwebp command to convert them to WebP images. The sed command will remove the .png file suffix before appending the .webp file suffix.