The Lotus philosophy applied to blog design

Lotus Cars founder Colin Chapman was obsessed with the weight of sports cars. When other car manufacturers wanted the most powerful engines, he wanted the lightest cars. The Lotus website has a good summary of this Lotus philosophy:

“Simplify, then add lightness,” he said. It was his philosophy, way before ‘minimalism’ became fashionable.

“Adding power makes you faster on the straights; subtracting weight makes you faster everywhere,” was another of Chapman’s premises.

By tradition, Lotus uses the least number of parts in its products. Yet, they are impeccably engineered, retain their lightness and work dependably.

For as long as I can remember, I’ve been a fan of Lotus. From the Esprit featured in The Spy Who Loved Me (1977), the one in the Accolade’s Test Drive video game from 1987, to my fascination with the choices made by the engineers with the 900 kg Elise (and later the Elise CR): Lotus is more than a simple car brand, it is a way to think about product design, not unlike Apple or Muji, two other brands I love.1

That is why I figured it made perfect sense to embrace this Lotus philosophy and apply it to the design of my blog.2 This transformation began last summer, when I managed to bring the weight of my CSS stylesheet to less than 1MB. Earlier this year, I thought this transformation was over, and that I could rest and focus on writing instead of tweaking bits of HTML and CSS here and there. I was clearly wrong.

Since January, I’ve reduced the overall weight of the homepage of this site by half, from 6.5kb (uncompressed), to 3.48kb, and my CSS file went from 999b to 313b today (Update: 216 bytes as of June 29th). Of course, I had to let go a lot of little things, but “using the least number of parts” was the only way for me to be truly satisfied with this website. Leaving some of it not “impeccably engineered” was not acceptable to me: for instance, I didn’t like using CSS classes, or define one element in two separate rule-sets.

The struggle between what the website should look like and the way it should be built was tough: what to keep, what to remove? I had to let go of my beloved Hiragino Sans system font (on MacOS and iOS) for headings, because if it looked good, it was not necessary. Making this kind of decisions was the hardest thing about this work, and in many ways, I felt like Colin Chapman removing the backseat of a car or the stereo to save weight or something.

In the end, these tiny changes don’t make much of a difference. The website was already very fast, scored 100 on Lighthouse, and at this point, the incremental weight savings do not really affect the overall speed and behaviour. But I think they matter at a deeper level: these changes act as a reminder of my own commitment, a testimonial to a philosophy, which surely means something?

But speed is not the only thing that matters though, the site is now also easier to maintain, simpler, and, more importantly, barebone: meaning that nothing else can really be removed from it now without ruining it. Colin wouldn’t have removed the steering wheel of the car to save weight, would he? This last part means that it is time for me to stop tweaking this poor website and publish new posts instead, and that is what I am planning to do, eventually.

In the meantime, I figured the benefits of this work could be enjoyed by someone starting a blog and wanting a simple, fast, and minimal template. That is why this template can be used for your own Blot blog, with just a few clicks using this link. Everything is also available on GitHub, if you want a deeper look.

As Merlin Mann said in his 2008 What Makes a Good Blog? list: “Good blogs make you want to start your own blog.” Hopefully having this template ready to use will inspire a few of you to start their own blog. Highly recommended.

  1. Worth nothing that the highlight colour of this blog also is inspired by another famous British car.↩︎

  2. A design principle that can be more or less recognised among Dieter Rams’ famous list, at the 10th position.↩︎