Fiddling makes me happy

Recent design changes to the site, including SVG turbulence filter to create subtle noise texture, and the new font F37 Beckett

I keep thinking about Ethan’s famous quote "let your website be a worry stone". I’m constantly fiddling with for this very reason. It’s my playground to try different techniques and layout ideas, and here's what I've been fiddling with recently.

CSS Grid

In November I redesigned the site to remove the side navigation on desktop. Two weeks ago I redesigned to put it back. It’s something I’ve always had in the past, and it felt wrong without it. I'd also experimented using CSS Grid to lay every individual page element out onto a 9 column grid, but decided it was too heavy handed. An interesting exercise, but unnecessarily complex and verbose CSS. Going back to only using Grid when necessary took 5k off the size of the CSS file.


Examples of F37 Beckett font in use on pre 1960s British road signs
F37 Foundry's F37 Beckett specimen

I’m now using F37 Beckett as the typeface. It's based on the Ministry of Transport signage, used in the UK from the 1930s - 1960s, before the Worboys Committee changed it. It has that particular period character I’ve always looked for in fonts like Underground Pro and Brandon Text. In fact, in the past I've used Ministry, Rian Hughes’ take on the same signage. I don't want you to think I've done this on a whim though, it's taken me 18 months to finally decide whether to replace TT Norms, which I've used since 2015.

Ageing, like me

Another feature of historical designs has been the slightly aged look. Yellowed at the edges, a bit like the once-white back sleeve of a 1960's vinyl record.

A screenshot of the homepage, designed to look like two aged and yellow cards - one for the main content, and the other for the navigation on the right. in 2010.

To bring this back, I added a subtle noise texture using SVG’s turbulence filter. Main headings do the same, but with -webkit-text-clip to give them a printed feel with areas where the ink has missed. Online tools like nnoise make it easy to play with turbulence, and codrops has a thorough article on it.

A close up of the noise filter used in the background and main headings

I then added simple linear gradients at all the edges of the viewport to give it a subtle aged appearance. I could go further with adding more skeuomorphism, but you can take these things too far. I like that it's not too in-your-face, and that you might have to be a little closer to the screen in order to see it.

Blogging like it's 1972

I also finally realised that there's nothing stopping me from adding journal posts dated from before I started blogging. So I'm going to start adding key life moments as much as I can.

I own the data

One thing I particularly like is the way my site works nowadays. Like other file based sites, it exists first and foremost on my computer in a Git Repository, which then gets pushed, triggering a deploy to my host.

If my host ever goes down, I still have the entire site, and can just upload to a new one. If anything happens to my computer, and my various backups, I can just clone it from the repo again. I've lost sites like the original Rissington Podcast because I've not remembered to do both site files and database backups (or be clever enough to know how to set up a 'cron job'). Particularly with events like Twitter going to shit, I feel the need to have control more keenly these days.

Especially in the long dark winter evenings, having your own website to constantly add to and improve is a great comfort blanket.

© 2002–23