the First (re)design of this website

Earlier this year during the unnerving springtime of 2020 I started redesigning this website. I wanted kauka.fi to be a more coherent and pleasant reading experience unlike the first design that was more a quick prototype than a finished design.

Principles and goals

Even before the first version of the website I set some development ground rules for myself so it would be easier to make design decisions and to code quickly. I've had a bad habit of abandoning personal projects before they're finished due to getting stuck in the details. I wanted to make sure that wouldn't happen again.

With the redesign I had a few design ideas to cover that served as my guiding lights for the project:

  • Lower the bar for writing new content
  • Keep development easy and fast
  • Make use of a design system
  • Improve accessibility
  • Progressively enhance, don't get stuck
  • Keep it personal

Out of these progressive enhancement turned out to be the most valuable one to remember. Everytime I had difficulties deciding on whether or not to implement some feature I usually either dropped it or implemented some simple version of it leaving the option open to come back and improve upon it later.

The redesign

The core of the site is the blog. I want to be able to produce blog posts at a reasonable pace. I could’ve picked a premade theme to focus more on writing and less on code but I wanted way more control over the design than a premade theme would've provided. Picking an existing theme would’ve taken away a lot of the personality of the site. With the first version of the website I had trouble writing posts with code embeds and images because I usually wrote the CSS needed as I wrote the blog post. That was obviously a bad idea and code usually got into the way of the real content. This time around I made sure I have all my typography ready and I don't need to touch the code until the next design phase.

A cool thing about the new website is the new design system. Borrowing from the quite popular 8pt Grid System and my experience with Bootstrap I created a basic design system of my own. After a long design process in Figma where I carefully thought out almost every edge case I could think of and planned the CSS classes ahead of time I was able to build the HTML portion surprisingly quickly. If you’re interested in the CSS make sure to inspect the site. I don't uglify most of the frontend code so that anyone interested could dive into the details!

Last design thing I want to mention is accessibility. I always try to take accessibility into account when writing content or doing something to the structure of the site. When I was creating the design system I made sure the color contrasts followed WCAG 2.1 color contrast and font size requirements so I have atleast some a11y ground work done. The WC3 accessibility guidelines provide great design ground principle to follow and that's something I'll be doing more in the future.


You might’ve also noticed that with the new design I also changed the language from Finnish to English.

After writing a couple blog posts in Finnish I realized how much easier it is to write code and even design related text in English. I used to write a blog in English years ago and it does feel like I've taken a step closer to my blogging roots with the language switch.


During this process I got to study and implement web tech stuff I've been wondering about for quite some time. So really whole redesign was something that has been in the works for years. I've been working as a web developer for over three years and during that time I've thought about making my own website many times but for some reason I've always left it on the backburner. I'm glad I finally got around to doing this. I've learned a lot in the past few months and I'm generally pretty happy with the results. If you have any thoughts or feedback I'd be happy to hear from you! You can find my contact information below and around the site.

That's it for now!