A website which is a website

Why my website looks the way it looks?

Oftentimes, things come to me in unrelated tranches and when they are all in place, they suddenly click in and emergently produce a new concept. Almost all the fiction I wrote in the last 25 years and most blog entries emerged like that. Writing a story on purpose always felt a bit fake to me: I need to be surprised by the ending as well, readers cannot have all the fun.

However, this is not about writing, but websites. A tranche by tranche.

Brutalism

I am an admirer of brutalism. I like brutalist buildings, I like these harsh and cold aesthetics, I even liked Brutalist Doom. But until recently, I didn't think of applying brutalist principles also to websites. This changed when I read Guidelines for Brutalist Web Design (which was showed to me by a friend at the same time as I was looking into smolweb, so the timing was just right).

To quote the guideline:

The term brutalism is derived from the French béton brut, meaning "raw concrete". Although most brutalist buildings are made from concrete, we're more interested in the term raw. Concrete brutalist buildings often reflect back the forms used to make them, and their overall design tends to adhere to the concept of truth to materials.

A website's materials aren't HTML tags, CSS, or JavaScript code. Rather, they are its content and the context in which it's consumed. A website is for a visitor, using a browser, running on a computer to read, watch, listen, or perhaps to interact. A website that embraces Brutalist Web Design is raw in its focus on content, and prioritization of the website visitor.

Brutalist Web Design is honest about what a website is and what it isn't. A website is not a magazine, though it might have magazine-like articles. A website is not an application, although you might use it to purchase products or interact with other people. A website is not a database, although it might be driven by one.

What hit me the most was stating that "a website is not a magazine." I have worked for an Internet portal where we would serve a tonne of articles in a magazine manner, and it felt very natural to me. A website was a magazine taken online. Alternatively, I have read a lot and then made transition from paper to online in my teenage years, and it got entangled together. In any case, the conviction was gone, as the brutalist guideline suddenly gave me a fresh eye to see websites as websites, within websites interlinked (but we'll get to that). I know that this was the idea in the beginning (this is where the word surf comes from), but over time, we got distracted by The Fancy And The Shiny.

That was tranche number 1.

Smolweb

Around the same time, I discovered on Mastodon the concept of smolweb, which happened thanks to Adele, whom I found out about when I was looking into Gemini protocol, which was referred to me after I complained about browsers not handling Markdown files natively, which I thought to be a game changer to publishing things. Quite a chain.

My personal websites and projects always aimed at simplicity, but this was coming rather from being professionally tired of complex layouts and fancy CSS (in one project, for example, the client literally requested luxury buttons). I would always find comfort in the lack of styling and I would be very consistent in it. And here we had a codified set, even if for other reasons, of what I always liked. And it turns out there were more people like me.

That was tranche number 2, perhaps the smolest one.

House of Leaves

Last year, I was introduced to MyHouse.wad, a brilliant piece of Doom map-making that pushed the state of the art, both technically and narratively. I played it a little myself, but eventually, I watched the proper ending on YouTube. Apart from going over the mod itself and its various intricacies, "House of Leaves" was mentioned.

The strangest part was that despite being published in the year 2000, I have had never heard of this book until that particular video. Nothing. Nada. Null. Not one magazine or website or blog that I would read, neither at the time nor later, would mention "House of Leaves." And yet, there it was, a cult classic that had all that I could want from a book: a multiple clashing and intertwining together narrative layers, liminal spaces before liminal spaces were a thing, references, references to references, references to references to references, all the different fonts, and the page layout reflecting the labyrinthine space that the characters ended up in.

But that was not it. Of all things, it was the font. Each layer of the narrative has its own distinct font. There is Times New Roman, Bookman, and Dante. And Janson, and Book Antiqua. And then, there is Courier. When I started reading parts in Courier, I wasn't happy because there was something off about monospace fonts for regular text. But the story was so captivating that it swallowed me whole and over time, I got used to the typeface and maybe even started liking it. By the end of the book, I was sold on it. I mentioned regular text, but as a developer I have been working with monospace fonts for decades. I've been used to reading them quite efficiently. It's no surprise that with a little bit of exposure, I flipped. This visual element planted an idea in me.

After reading the book, I ventured into the Internet and found an interview with Mark Z. Danielewski where he says: "I think my generation is saturated in these kinds of signals, we're completely fluent in grammar of image. And there's something incredibly heretical about this book. Old school Ivy League professors are gonna say: 'No, it doesn't matter what font you're using, it doesn't matter,' you know, 'how you position words on the page. Language is language is language.' Bullshit." It's a bit contrary to a common sentiment that what matters is the text itself, not how it's presented. But if that was true, then typeface choices or preparing layout of the page or various editorial works wouldn't matter. And they do. What Mark did was just placing his book further on the scale of pure text vs pure presentation.

There was one more thing (this book is a gift that keeps on giving, truly). As was pointed out somewhere in the TV Tropes page, partially due to the word house being blue almost every single time (in all languages), reading the book was an experience very similar to... navigating a website. All this jumping between references and appendices is very much like using a website with links to other websites. Websites within websites interlinked. You go back and forth, you take detours (sometimes months long), then you go back and continue where you left. That's why reading the book felt so oddly familiar.

And that was tranche number 3.

Clicking in

Then all this clicked in. The moment itself is on one hand sudden, on the other one feels very natural, as if it was destined to happen. It wasn't, but it makes for a better internal story.

I read once that when we build our identity, we first notice what we are not, then we decide what we are. I did the first part and stayed there. The article about brutalist web design motivated me to move forward.

(It gets technical now.)

I started with an advice from the brutalist guideline:

A friend gave me design advice once. He said to start with left-aligned black text on a white background, and to apply styling only to solve a specific problem.

That seemed a bit radical at first, but it says to only start with it. So I did. And then the strangest thing happened: I saw that it was good and I decided to leave it like that, centring only the main element but nothing inside. I would sometimes centre some elements, like the text title or headers or horizontal lines that split sections. But as I saw it all aligned to the left, I realised it worked perfectly (disclaimer: that's not necessarily a political statement).

The smolweb website has a technical guideline, which I found informative. For instance, I didn't know that if you put font-size: 100% on the <html> element, the page will respect user's settings in regards to the font size. If you then pair it up with the rem unit, you will achieve a layout that is inherently consequent yet flexible. I actually had to redo everything because I went with em at first. It also suggested using only serif, sans-serif, or monospace font family, so the user can further decide (but we can hint them with our preferred group).

For the page width, I used ch unit (an equivalent of 0 in the font used, but for a monospace one, it means any character width), so even if you use a different monospace font in your browser, the lines will break exactly the same way (80 characters). It also allows nice indentation, like the quote above.

But CSS is merely a suggestion and can be overwritten or turned off in the browser.

From "House of Leaves," I'll take Johnny Truant's font type. Over the years, I moved from fancy text editors to Markdown or even plain ol' text files. Like the meme says, it's a simple life. No formatting, although, you can still choose the font in the editor. But not the size of various headings, etc. There's a strict division where the formatting comes later when publishing it. It should not be a concern during writing. But this sort of backfired when I realised that ideally, I should share the text as I saw it while writing. Hence, the notepad aesthetics of this website. Or something that came out of a typewriter, like a screenplay. I have been reading screenplays in recent months, and it might have played a role too.

This might sound like a contradiction because I started from saying that the website is a website and should not pretend anything, and then I wrote that I made it look like a notepad with an opened text file. But it's crucial to understand that there is no unstyled website. All the browsers have a default styling (sure, it's only a suggestion, but vendors stick with it), so not applying any style still means a specific look. If that's the case, I might as well provide something myself. And if I get to choose how to present my text, then it might as well be very close to how it was written. How I saw it. (In case you're curious, I use Consolas, which might not be the default in your browser.)

And then, I really liked the concept of the book being built with a cobweb of references. This is a very natural and easy and, come think of it, native thing to websites. Websites are inherently texts that can be organically enriched with references in the form of links. It's no longer a list of books at the end. No, they're embedded within the text itself. Funny how a book made me realise that.

Finally,

as a closing anecdote, the brutalist manifesto reminded me of a certain social event years ago. I used to hang out with people who studied actual architecture and even finished it by that time and worked in the profession (although, it was not lucrative). After a couple of glasses of wine, they would discuss various architectural aspects, which is not that different from programmers discussing programming after work. I remember walking into a kitchen and hearing this: "What I always respected about Kozłowski was that for him, concrete was not pretending to be anything other than concrete. He wouldn't make it pretend to be wood, for instance. He would use it very consciously." (Years later, I am guessing that she meant Tomasz Kozłowski.)

So, let's not pretend that a website is anything other than a website. Let's use it consciously.