Restyling the Cotton Noodle website

I’ve just redesigned the styles on this here website. This is its formal christening: I’m dubbing it version 2. How original!

There were a couple of reasons I wanted to redesign it - technical and aesthetic.

The technical side

I didn’t really have a lot of faith in the styling code I’d written before. I wrote the v1 styles as part of my migration to Hugo, and there was so much going on with figuring out all the tooling and building out a gallery. Although I did put love and care into the v1 styles, I was styling at the same time as figuring out how to even make Hugo templates, and re-learning CSS having not really touched it in anger since around 2005. I’d tried out BEM, which seemed like a good idea at the time, but I grew to hate how heavy-handed it was.

I wanted to pare it back, so:

  1. I kept my Hugo layouts pretty much the same, but converted them to (relatively) semantic HTML. This meant gutting a crazy amount of BEM classes and layout-specific divs.
  2. I removed my old CSS and started rewriting it from the ground up, taking a generally classless route (as a rebellion against all the BEM classes I had before).
  3. I changed from media queries based on pixel breakpoints to ones based on reading width. I also designed mobile-first, with wider screens being the edge case.

The final CSS and HTML are a lot smaller now. They’re also more manageable and inherently comprehensible. They don’t feel as fragile as they did with the previous setup, which is a huge win. I also trust the responsiveness a lot more now too.

The aesthetic side

The v1 front page. I’ve preserved screenshots over on the versions page.
The v1 front page. I’ve preserved screenshots over on the versions page.

I still love the old v1 aesthetic, but I think I just grew out of it. It was intentionally very nostalgic for the days of the early web - basic, bright colours and heavy graphical concepts - because that’s the time period that was being evoked in my mind as I developed it.

But it also felt very clunky. I wanted to modernise the feeling of the site, while still retaining the simple, home-grown ethos. I guess I also just wanted it to look a bit more grown up.

So I took these concepts into my redesign:

  1. Softer, warmer colours. The colour palette is similar, but less aggressive. I also added an extra main colour, which allows for more playfulness.
  2. A generally smoother reading experience. Colour contrasts are less harsh, and borders are more subtle.
  3. Consistency in visual rhythm. I now have a small set of spacing sizes that I re-use across the whole site.
  4. The content width is narrower, for better reading.
  5. I have a dark mode now.

I’m not a designer or an accessibility expert, so I’m sure I’m still breaking all sorts of golden rules with this design. But it definitely feels like it’s a more cohesive, considered look now, while still representing me.

The colourful squiggly underlines and the scissor bullet points & dividers are my way of keeping it kooky :)

The future

I’m going to continue to tinker with this site - I mean, that’s what personal sites are for, right?

But I’m not planning another overhaul anytime soon!