Redesign website to be even simpler
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.