Balu's Logo

Website

— 5 minutes to read

I’ve been without a maintained / working website for a few years now which is kind of weird for a guy who did program websites for a living part time.

See also

Inspiration

These websites made me think about the overloaded websites we call “Internet” these days.

Goals

The main goal is to create simple, minimalistic and easy to maintain content (as in “words”). Focussing on content rather than looks also helps a lot with accessibility.

The same principles should be applied to the layout / design of the page. I don’t want to use monstrous layout frameworks anymore. They are made of a gazillion lines of code you never use anyway - plus extra plugins to have basic site elements. Doing so has the side effect of the website not looking like all the other “modern design templates” using the same grid and design elements everywhere.

While I don’t necessarily agree with the “mobile first” mantra that Google is pushing these days, I absolutely agree that it should be easy to surf the web on smaller devices too - without having to remove content or site elements. Following the minimalistic design approach makes this really easy.

To be able to manage the site easily, I will not use complex, riddled with bugs content management systems that store all their data in a database and need to be updated twice a week. A text file based system allows me to easily manage, backup, versionize and move things to a different system if necessary. It’s also a lot more flexible in what it can do.

A static website also means no cookies, no tracking or annoying pop up banners asking for permissions to violate your data privacy rights.

Overall I will need to think “global” (which means: English). While my first language is German, I have many friends all over the world. And if I don’t want to limit the content to a small audience, I need to do something about it - even though it might be a bumpy translation now and then…

Compromises

I’m still using a site generator to generate static HTML pages from Markdown files: Zola feels nice, lean, is Open Source and based on flat-file data. I felt at home quickly while other site generators always required multiple tries to build something because of unexpected road blocks.

While Markdown is a great and lightweight markup language to structure and format content using plain text files, there is no real defined “standard”. Over the years people created a lot of different variants that are incompatible to each other. I am aware that I might not be able to format everything like I intended, but (while it should be avoided) inline HTML code can sometimes be used as fallback.

Zola uses pulldown-cmark to parse markdown files in CommonMark format - a strongly defined, highly compatible specification. It adds a few additional features such as parsing footnotes, Github flavored tables, task lists and strikethrough. And if everything else fails, I can write my own shortcodes.

I have created a little markdown samples page that allows me to check all the formatting.

Layout

Since I wanted a nice and clean look, I went for the “standard” website structure: Header, content and a minimal footer.

You may have noticed that I don’t mess with fonts either. I just switch to the browser’s “sans-serif” font-family, since I don’t like Times New Roman. In addition the font-size and line-height are slightly increased for better readability.

The line length should be about 80 characters. Everything longer can make it harder to read and is tiring.

I hope the light grey background and slightly not-fully black font color makes this easier on the eyes.

TODO

  1. Pre-formatted blocks might get longer than the ~80 character line length. Since some operating systems / browsers decided to not show scrollbars anymore unless you use them, there’s no visual cue that lines have been “cut off”.

    Example:

    Pre-formatted blocks might get longer than the ~80 character line length. Since some operating systems / browsers decided to not show scrollbars anymore unless you use them, there's no visual cue that lines have been "cut off".

  2. Some people might want to have a “dark mode”. I have to think about if and how I want to make that happen without adding too much ballast. Highlighted code blocks might be an issue since they are generated by Zola.

Updates