Digital Ecology

We were told that the Internet would “dematerialise” society and decrease energy use. Contrary to this projection, it has become a large and rapidly growing consumer of energy itself. There are about 1.13 billion websites on the internet in 2023, weighting an average of 2,205 kilobytes each.

In 2019 we were comissioned by the architecture and design office MADC to create their website following their motto: "Design without sustainability is no longer design". To do so we carried out a research project to build the lowest carbon footprint website possible.

No fonts and no logo

All resources loaded, including fonts and logos, are request to the server requiring storage space and energy use. Therefore, this website does not load a custom typeface and removes the font-family declaration, meaning that visitors will see the default typefaces of their browser, a sans-serif and a serif font.

We also avoided using Google Fonts (which collects your personal data and share with other third parties when you’re visiting a website with their font implemented), cutting the unnecessary request to the server and amount of generated data, which at the end result in a reduction of energy consumption.

We used a similar approach for the logo. Instead of a designed a graphic element, which would require the production and distribution of custom typefaces and imagery, MADC’s new identity consists of a single typographic style: the strikethrough style in the blank spaces between letters to create a chain. The logo is therefor generative, with infinite possible configurations both in its linear version as well as the square version.

Media compression

The main challenge was to reduce page size without making the website less attractive. Because images take up most of the bandwidth, it would be easy to obtain very small page sizes and lower energy use by eliminating images, reducing their number, or making them much smaller. However, visuals are an important part of MADC’s work, and the website would not be the same without them.

Instead, we chose to apply an "obsolete" image compression technique called dithering. By dithering, we can make images ten times less resource-intensive, even though they are displayed quite large. The number of colours in an image, combined with its file format and resolution, contributes to the size of an image. Thus, instead of using full-colour high-resolution images, we chose to convert all images to black and white.

Only by clicking the HD button the visitor will be able to access the full-color high-resolution version of each image. This way each visitor decides what images wants to download and see.

Dark mode

It has been widely denied that a screen with a black background consumes less energy than with a white background. However, this is starting to change with the new OLED displays where a black pixel means it is turned off, and therefor does not consume energy.

Furthermore, if you are in a dark environment, it is much more comfortable reading a white text over a black background, requiring less brightness from your devices, therefore reducing energy consumption; while if you are in a light environment, the opposite is much better.

Taking all these premises into account, we decided to create a website that responds to the time of the day when you visit it. If you visit the website during daytime, you will see it in white background with black text, but if you visit it during nighttime, you will see it inverted. As this is only a mere approximation and not an exact indicator on whether you are in a light or a dark environment, we have placed a simple toggle in the upper-right corner of the screen so that every user can alternate between these two color modes.

Green hosting provider

A hosting company’s prime resource is electricity. If that resource came from a 100% clean source of energy it would not pollute or generate any CO2 emisions to the atmosphere, and our residual footprint in the world would be minimal. Therefor we chose a hosting company whose policy is focused on green energy at all levels. Also, the physical location of the data center where your website is hosted is quite relevant. In this case, as MADC is a company based in Madrid and most of their traffic is national, we chose a data center located in Spain to optimise the dataflow between the users and the source.

If your website is carbon-fed, consider switching. You can look for green hosting providers at Green Web Foundation's directory; choose which one is the most suitable for you.