Alright. Enough talk. Let’s get to it.
One of my plans for 2023 is to redesign this website. Here is the thing: it is easy to promise things to yourself. It is much harder to deliver, especially when the project is quite large and you have to do it in your spare time, like the redesign of a personal site. So the best way to finally begin is to start today. And that’s what I’m doing.
There are a few considerations to make when you redesign a site that has been around for a while and on which quite a bit of content has been published over the years. So I will try to share in the best possible way my thought process and the steps I will take (and not take) to redesign the site, and I hope it might help some of you who are or will be in a similar situation. (That might well include my future self.) Of course, everything I document will only be applicable to other sites to a certain extent. So take it with a grain of salt and draw your own conclusions.
Doing an Inventory
My current website is now about seven years old. I am generally still mostly happy with it regarding the convenience of posting and, astonishingly, the design. But there are also a lot of things that need to be updated to more modern browser technologies or which simply don’t work anymore. For example, the site runs on Craft CMS and when I built it in 2015 and 2016, there was no Webmention plugin available for Craft. So I had to write one from scratch because I really wanted to add them to the site. The code of this Webmention plugin has been neglected quite a bit: I wrote the plugin for version 2 of Craft. The current version is 4. Consequently, updating the plugin for the latest version of the CMS will probably be one of the major parts of the redesign, because how you build plugins for Craft has changed significantly.
What else do I have to do?
Upgrading from Craft 2 to 4
First of all, I want to update the site itself to Craft 4. Craft is a somewhat classical PHP CMS with a database. This has many advantages when it comes to handling data on the server, but upgrading a static site that uses markdown files for the posts would probably save me some of the database hassle. I will first have to upgrade the site and the database from version 2 to 3 and then from 3 to 4. We’ll see how well this goes.
A New Build Process
My current site still uses Grunt (…remember?) to build the CSS and a little bit of JavaScript. I have since not used Grunt a lot anymore and feel much more comfortable working with Gulp or Vite with PostCSS. So I want to set up a new build process from scratch, keeping it as lightweight and simple as possible. At least, it should serve me for another 5 to 10 (?!?) years. For this, I might re-use some of the code of my Eleventy starter kit, qu'est appelée Eleventy Plus Vite.
Consolidating the Structure
The structure of the site will probably stay more or less the same. Over time, I pushed the works section more and more into the back. Just because I did not have the time to add more projects or an NDA didn’t allow for it. I might merge the articles and notes sections, though. When I started the site, I had the idea of writing mostly longer blog posts and to publish them only a few times a year. This has changed a lot, also with me becoming more fluent in writing in English and because I realized that I don’t publish “articles” anymore – I write blog posts. Maybe the new section will therefore just be called “blog” or “writing”. Again, we’ll see.
Improving the HTML
Keeping the structure intact also means that I won’t do a lot of changes to the HTML of the templates. At least, that’s the plan for now. I will remove some of the older stuff like JavaScript lazy loading of images and do this with the loading HTML attribute instead. And I also want to make more use of includes and partials, thinking more in components, and improve the overall quality of the HTML.
Better Accessibility and Performance
Over the last few years, I’ve been learning a lot about creating accessible interfaces for the Web and there is quite a bit that can be improved on my site. The same goes for performance. Although I tried my best to reach a four hundos Lighthouse score when I built the site, many best practices have since improved and I want to make the site load faster (again). This will involve a lot of tinkering – I’m looking at you, Service Worker – but it also promises to be a lot of fun.
New CSS 😍
I can’t wait to start with this part. My plan is to throw almost all the CSS into the bin and start fresh, using all the great new (layout) features that CSS offers these days. I will heavily make use of CSS Grid and Flexbox, of course. But also experimenting with more experimental features like :has() and container queries might be fun. But definitely, I will make the typography completely fluid this time, using an approach like Utopia. I also will use variable fonts – and I already have a few typefaces on the shortlist. More on that in a separate post about the typography of the site once it is done. Ah! The new design should also have a dark mode, using custom properties for the theming.
An Open Redesign – Yes or No?
As you can see, there is already a lot on the list. And I probably also forgot a few things that will pop up in the process. So expect a lot of blog posts about many of the aspects of the redesign.
However, I’m still not sure whether I should do an open redesign or if it makes more sense to document most of the redesign separately and share those posts once the new design goes live. What do you think?
~
