New design coming soon?

No, not on this site in the foreseeable future. I like my current way of doing incremental changes.

… is what I wrote last year about this site’s design, only to start working on another redesign a couple of months later.

Well, guess what, after working incrementally on it from February to May, I think I’m done. But now it’s November, and you still see the to-be-replaced design. What gives?

Despite all those incremental changes, there never was a banner message indicating an ongoing redesign, stating “if things look wonky, that’s why”, because those changes remained hidden. In the unlikely event that someone headed over the my Settings page, they could have encountered the new design in the page style dropdown, which is where is was (and still is) buried for all those months. In other words, I’ve been redesigning in the open, hidden behind a flag.

This may not work for everybody, as not everyone has multiple styles on their site, let alone a Settings page that allows you to choose a style, but there are other ways to pull this off in open. Alas, they are not the scope of today’s article.

Personally, my stategy has served me well, because the new design uses a lot new CSS features that are not yet classified as widely available in Baseline terms, so it remains to be seen when I’m going to make the switch, i.e. when the new design will become the default. To make things worse, I still like my old design more. Obviously, it will eventually happen, because writing CSS in 2025 is different, especially when compared to the CSS I wrote four years ago, when my last major redesign took place. In other words, looks aside, I like the new CSS under the hood a lot.

---

Whenever I do a major redesign, I jot down a couple of noteworthy facts, which is exactly what I’ll do for the remainder of this editorial.

Starting from scratch

A clean slate can be very liberating, but in my case I had to be backwards-compatible at the same time, because changing the HTML meant I had to retrofit such changes into the existing design(s). Luckily, the semantic markup I had in place was very capable of housing the new design too, only minor tweaks were necessary. Most importantly, no additional wrapper divs had to be introduced. 😌

Included features

Okay, no more stalling, let me run through the interesting bits.

Native CSS nesting

I started using native nesting for everything: Not just regular selectors, but also pseudo elements and media queries. When I wrote »Is CSS alive«, my verdict on nesting has been Take it or leave it. To my own surprise I grew very fond of it. Just make sure that your selectors do not get unnecessary complex, don’t let your nesting levels run too deep, and avoid the gotchas that come with nesting.

Nested color scheme

Yeah, the new design features a dark color scheme on the top level, but the actual content adapts to user preference. Confused? I already blogged about this technique in depth in my »Nesting color schemes« essay.

Logical properties

I’m a big fan of logical properties, and by starting from scratch I was finally able to use them exclusively.

Media queries & breakpoints

I was leaning towards Intrinsic Web Design to let my content roam free, in hopes of needing little to no breakpoints. But that I didn’t achieve that in this redesign. It turned out to be almost the opposite, for the first time I even have additional tweaks for screen sizes below 360 pixels, intended for smartwatches. In said smartwatch territory I even made sure that my site works on circular displays.

The new design on a 240x240pixel circular screen.

Layout …

Floats are back. Yes, you read that right, but obviously I’m using floats for their true purpose, not in the hacky way we did layout in the past. Floats are for minor things, the heavy lifting is done with Grid and Flexbox. And I even ended up with my first use of display: contents.

… and more

Speaking of using a property for the first time, in the new design I even made use of border-image[1]. Just like floats that’s something from ye olden days. We used border images to do weird things in the past[2], but there are lots of clever ways you can use them today.

That’s about it, but if you look closely you’ll find text-wrap’s pretty and balance options, the clamp() function, and more. Color is the only thing I haven’t fully embraced yet, I’m still predominantely using hex notation and the sRGB color space.

One last thing: Like in previous redesigns, the site navigation (and footer) is a defining feature, and this time I had some fun with the number of columns.

I’ve named my new page style “Elegant”. As stated, at the time of writing this post, it hasn’t become the default yet, I’m still showing the old “Advanced” style. You can head over to Settings and flip the switch yourself.

With all that being said, I have a strange feeling that the next redesign is right around the corner.

---

Footnotes

1. To be exact, I only have a single use case, I’m applying it to some images in my blog posts, namely those that should not touch the edge of their <figure> container. While photos usually go edge-to-edge, for certain graphics I use the border image to add a colored frame that matches their dominant background color. The screenshot above even has a transparent frame. ↩︎
2. Case in point, that link goes to an old article of mine called »Sliding door, no more« from 2011. It starts with an introduction that is floated to the right in the new design—well, actually to the inline-end, you do remember I said logical properties? 😉 ↩︎