Sunrise was one of my favourite projects at the studio, because it touched on a value I hold closely to my being: Climate Justice.
The internet is sustainable, right?
Halfway through college, I was terrified by the amount of waste I was generating through my print projects so I decided to focus on more web related or digital projects thinking that it would be more sustainable to work online. I was also excited by the idea of reinventing websites with fancy interactions or complex code patterns. I thought of the internet and our digital projects as immaterial.
But the internet has a very real climate impact. Even if we can’t directly see it.
I’m sure y’all know better now than I did back then but I soon realized that the internet has a very real climate impact. Even if we can’t directly see it.
The global internet uses more electricity than the whole of the United Kingdom.
(The internet accounted for 850 TWH of global electricity in 2024, which is 2.7% of all global electricity.)
Electricity is the lifeblood of the internet, being used to power data centres, telecommunications networks and the devices that we use to surf the web. In total, the global internet uses more electricity than the whole of the United Kingdom.
Again, hard to find the perfect numbers, but you get the point!
An average web page with approximately 10,000 monthly page views is responsible for 102 kg of carbon dioxide per year. And the faster our internet gets, the more we take page weight for granted.
At Tandem, almost all our projects have a huge web component.
As a 2000’s kid, I’m also chronically online.
Most of my work at Tandem involves designing and building with websites. And as a 2000s kid, I’m also chronically online.
I decided to try to build a carbon-neutral, eco-friendly website earlier this year.
↑ My BFA thesis project
Freaked out by this notion of having to work in the digital space all day, I decided to try to build a carbon-neutral, eco-friendly website earlier this year. The project was based on my BFA thesis – where I was recording links and connections in the books I was reading (but that’s less important for the plot). I wanted to see what it would take to make my website a little more eco friendly.
Data transferred = Energy consumed
I started by understanding how much energy was being consumed via the internet. Put simply, a lot of energy is consumed sending things across the internet – delivering a website from a “server” all the way to your home laptop or phone. The more data my site was firing back and forth, the greater the energy consumption, and therefore the higher the emissions.
Design, Development & Deployment
I decided to break the problem down into three big components, design, development and deployment. I could go into detail about each of these decisions, but I think we’d be here till midnight if that was the case.
Design, Development & Deployment
For today, I think we can focus mainly on the design components of the website.
Fonts
↑ System Fonts
Serving fancy typefaces and type styles, I realized, was a big factor for energy consumption over the internet. Besides, our devices come with several “system fonts” inherently – so I tried to work with those, focusing on good type hierarchy instead. (If that’s a huge compromise, working with .woff or .woff2 fonts works great too, because they’re optimized for the web.)
↑ Energy consumed per color on OLED screens
While it’s different for different display types (LCDs, OLED, etc) and the data is hard to verify, its pretty clear that white light consumes the most amount of energy and emits the most heat. I didn’t have to force my entire site to be in “dark mode”: A simple dimming of the white to beige could significantly drop the climate impact of the website.
↑ Pixel size: 1; File size: 140 kb
↑ Pixel size: 4, File size: 55 kb
↑ Pixel size: 16, File size: 22 kb
Compressing images to their lowest size, or even serving them in different sizes for different devices can significantly reduce page weight – which in turn reduces emissions.
↑ Low Tech Magazine’s Home Page
Lowtech magazine does a similar thing by dithering their images to reduce their file sizes. Apart from it’s cool textural effect, it ends up reducing the file sizes by over 50%.
↑ The eco-friendly version of the site
I implemented a lot of other little changes – from stripping down the code to only necessary lines, to focusing on the copywriting, to even removing analytics. I even looked into where and how my website was hosted.
Create a lightweight experience by default.
↑ Minimal elements and clear hierarchy
↑ Repeating UI/UX patterns and optimizing the experience
Other design decisions – optimizing navigation or layouts, repeating UI/UX patterns makes for a better user experience, and therefore makes a website most optimal for users. And that’s a huge thing: even if you weren’t focusing on climate impacts, focusing on making your website more efficient and accessible for a variety of users inevitably makes it more sustainable. Create a lightweight experience by default and impact will follow.
Fully green by 2026
I have a long way to go before my website can be fully renewable. The end goal is to create a solar powered server in my apartment and see if I can self host.
