New design

The round-cornered rectangle has become a recognisable marker of Apple products, both hardware and software. Every MacBook, iMac, iPhone, iPad and every icon on all of these devices has the same, recognisable rounded corner. But the simplicity of this curvature is deceptive: it is not just any straight line curving around a corner to become another straight line—a “roundrect” as it is known. Instead, it is what many designers and mathematicians would know as a “continuous curve” or, colloquially, a “squircle” sitting between a square and a circle.

If you extended the radii of such a figure perpendicular to the tangent at each of those points, its locus would be a curve that flows from one of those straight lines to the other—the curvature reducing gradually to zero rather than abruptly—around that perfectly proportioned corner. It makes your experience with the product feel pleasant and polished—again, this applies to both hardware and software—but for all it brings, the physical difference between the “roundrect” and the “squircle” on your phone or laptop screen would be insignificant: about the width of a human hair or two. Some call this attention to detail. Others—including myself—consider this fundamentally good design.

Aims

If I had to sum up what inspired the 2024 iteration of the design of this website, that would be most of it. That and my newfound desire to keep things climate-friendly. Before this redesign, this website weighed on average about 1.16 MB and demanded 0.369g of CO2 per new visit. While it is not a lot in comparison to other websites¹, it was too much for me. My aim was to bring it to under 0.15g of CO2 and 0.5 MB—or roughly half of what it was then.

In addition, I wanted to ensure that a visitor to my website would understand it, navigate it and experience it without overthinking it. Things had to be straightforward without being overbearing; and clarity had to reign supreme. To achieve this I would have to start with a blank page and question every dot I place on it.

Next, I wanted to place a suffocating amount of emphasis on typography. I love typography and it only made sense to me that type should carry the entire weight of this website on its shoulders. My previous designs brought a lot into the picture through colour, geometry and images. All three are now gone, with only words on the page in a sea of much-needed, breathable negative space. After all, most of this website comprises my words, so they should be given centre-stage.

Finally, it goes without saying that I wanted to simplify maintaining this website. I wanted to reduce the lines of code and complex structure. This would inform not only the developmental aspects of the new design but also the reader’s experience. This was more than the DRY principle; it was about fundamentally stripping elements down driven by the belief that, at least when it comes to design, more need not mean better nor less mean worse.

So these were my aims when I set out to redesign this website:

1. Reduce the carbon footprint to less than 0.15g of CO2
2. Focus on functionality and usage, stripping everything else
3. Choose typefaces that can carry the weight of this redesign
4. Reduce code or implement cleverly to aid maintenance

I want to discuss the first two points, letting the third speak for itself. After all the first two are procedural and strategic; the third is a matter of choice and you are looking at that choice right now. As for the last point, you will simply have to take my word for it.

Carbon footprint

My origin server is currently with a certified green web host and my edge servers are also managed by a green web host. The auditing for such companies who are either powered by green energy or offsetting their carbon footprint adequately is handled by The Green Web Directory. This has been the case for at least the last three years.

There is no international standardisation for carbon footprint measurements on the web, but the methods we have are fairly robust. On the basis of the amount of data transferred when you browse a website, they calculate the amount of energy expended to request and fetch that data through your browser. This is then reduced to a single-letter grade awarded to a website as stipulated by Sustainable Web Design ranging from F (unlimited CO2) to A+ (less than 0.095g of CO2). A grade of A would require less than 0.186g of CO2, which is what I should aim for if I reach my target of less than 0.15g of CO2.

There are several opinions on how one can get there but I feel it is important to clarify an approach I do not condone. Organic Basics, for example, has a low impact manifesto in which they outline incredibly stringent rules, some of which directly stifle expression and design. I agree with some points in their manifesto e.g. “Does not load any images before they are actively requested by the user” but others make little sense and are unnecessarily judgemental e.g. “Informs the user of the impact of their browsing behavior” while still others simply come in the way of communication e.g. “Does not make use of videos” and good design e.g. “limits the use of custom fonts”.

A more measured approach, and one I can support, is that of the sustainable web manifesto which calls for a clean, efficient, open, honest, regenerative and resilient web. This website adheres to these principles for the most part.

On a more practical level, I worked towards this grade using some simple web design practices that we have known for decades now: minifying, gzipping, caching, optimising media, lazy loading etc. Once I was done, the website carbon grade showed me an excellent result:

The Digital Beacon score was less impressive but still met my target. The primary issue seemed to be the typefaces, which I was unwilling to give up, and images, cutting which down would be too extreme considering I only used one. This was an exercise in sound judgement, not extremism. Moreover, not only is a score of “A” better than most websites on the internet but also repeat visits qualify for an “A+” without doubt.

Functionality

Part of reducing the code meant reducing elements on the page. Did a cover image for every essay really add to the reading or browsing experience? Most likely. Does removing cover images ruin essays in some way? Definitely not.

I do use images where necessary (see above, or read any book review) but a cover image is purely cosmetic. Images critical to an essay have always been added in context anyway. So cover images were the first to go.

Next, I wanted to build on familiarity in browsing and maintenance by using recognisable elements across the website. See, for example, the table of contents on the essays section which is found similarly, but with necessary adjustments, on several other pages—including at the bottom of this one. These make it easier for visitors to pick up navigating this website, allowing them to focus on what they might choose to read or view.

I also simplified the footer and loaded the menu instead while keeping it clear enough not to make navigation overwhelming. Likewise the universal use of primary and secondary button styles makes it easy for the visitor to take decisions even if they might not be able to verbalise such benefits:

Another important functional aspect of this website, mainly for devices with keyboards, are shortcuts. There are currently six shortcuts highlighted on the menu which work with the command or control keys: E for essays, B for the bookshelf, G for photography, J for notes, U for the newsletter and K for search. Additionally, / takes you home while > (the full stop key) takes you back to the top of a section (if you are inside a section in the first place). And pressing / without a modifier opens up the menu.

The functionality therefore remains robust even if the design gets reduced. And the ample negative space allows, even encourages, readers to pause and soak in what is on their screen with full attention before taking a consicous decision on what to do next. This, in my opinion, also fulfils one of the six requirements of the sustainable web manifesto (honesty).

Streamlining is another key aspect of improving functionality. This time, it also impacts me as the writer. Since my writing takes the form of essays, notes and book reviews, these are presented together nearly everywhere except in their own sections. Even the menu presents them as such. This is important to give readers a complete picture of my writings as they are published on this website. In exchange, the Covid diaries have been retired because their historiographic value alone does not justify their continued maintenance. However, for anyone interested, the contents of this old section can be shared privately.

Conclusion

I am extremely pleased with how this design turned out. I can see it used in the long-term given its timeless nature and its reliance on fundamental design elements that are unlikely to change in the coming year or two at least.

It is also completely original, which is not only important to me but also, in my experience, strenghtens my resolve when I fight my inclination to frequently redesign this site, nudging me towards writing and photographing more often in its stead.

As someone who is researching the history of climate change it made a lot of sense for me to start with something I hold so close to me and use so regularly: this website. Climate-friendliness, like the typography and the functionality and the code is not something this website “does” but is rather an integral par of its identity.