External links don’t work when you click on them in the text
Spending some more time on the styling of template pages, and the graphs
There’s still a few things I can do to save some page weight
Research green hosting! Although Netlify isn’t completely transparent about where the servers are located, it’s still a JAMStack
Migrate all my existing posts so that the Graph Overview is updated and wayy cooler!
But for now, Website Carbon Calculator
]]>It’s not that hard to make default fonts look good! Especially if they’re Apple System fonts.
Although there is some proof about dark mode being more energy efficient, it’s pretty easy to make light mode a little more “sustainable” just by adding some warmer tones, or avoiding white backgrounds.
WEBP images can save TONS of page weight and size.
I can use css for a lot more than I realized!
Development
Developing locally prevented me from consuming too much server space before the site was even up.
I wrote a BUNCH of functions to strip WordPress’ backend down, since there’s so much fluff and unused stuff.
I found a cool plugin to convert WordPress into a static site!
Instead of adding javascript to all pages, I only queue them in when that particular block is called!
Maintenance
]]>Ofcourse, like everything, the project started with a lot of research, including reading Sustainable Web Design – Tom Greenwood. I then made a list of General Notes to sort out my priorities.
- Turns out, that website too, was pretty damn climate friendly, so maybe I didn’t need to go through this entire process?
︎
The Internet consumes a lot of electricity. 1021 TWh per year to be precise1.
To give you some perspective, that’s more than the entire United Kingdom.
Globally, the average web page produces approximately 0.8 grams CO2 equivalent per pageview. For a website with 10,000 monthly page views, that’s 102 kg CO2e per year. And the faster our internet gets, the more we take page weight for granted. And, WordPress powers about 43.6% of the internet’s websites.
So I decided to see if I can make a WordPress site that’s as sustainable as possible.
- This statistic is from The Green Web Foundation ︎
Can web design become a redemptive technology? How can web technology empower people to take meaningful action to restore our natural world?
Keep America Beautiful managed to shift the entire debate around America’s garbage and litter problems away from the industry and onto consumers, and this strategy has been copied time and time again since.
We can think of the distance from the data center to the website’s core user base as “megabyte miles” – and we want it to be as small as possible.
It might be true that the most eco-friendly website is the one that doesn’t exist, but as web designers and developers that’s not particularly helpful advice. We therefore need to use these metrics to challenge ourselves to see how low we can go without compromising the core requirements of the products we’re creating.1
Both the emissions of our physical activities and the emissions of our digital projects are truly significant. We cannot pick one and ignore the other as if it doesn’t matter.
This meant prioritizing accessibility, but also optimizing for sustainability. This ethical lens helped them streamline their content around a new set of design guidelines, which drastically reduced the number of words on each page, and reduced the page count from over three hundred to less than seventy- a reduction of roughly 75%. Drayer said the finished product wasn’t only more energy-efficient, but also the most accessible website she had ever created.
Bounce rate: Are you meeting user expectations? When people come to a website from an external source and they leave without visiting any other pages, we refer to this as a bounce.
“Until energy is more expensive, I suspect we will keep thinking of new ways to waste”
The solution is twofold: we need to use the most efficient data centers we can find, but we also need to take responsibility for the applications we host, keeping energy requirements low to minimize their demand on servers.
Low Tech Magazine’s solar version uses a yellow and blue background to indicate the website’s available power. Dithered images help keep file sizes small.
Focus on solving the client’s specific problems first, while using sustainability as a tool to solve those problems.
Using sustainability as a lens in our projects can help deliver services that are more accessible to a wider audience.
That’s a lot of fossil fuel ready to be burned in backup generators when the data center is hit by the worst effects of climate change.
“Customers with the wherewithal to pay for more reliable services will still get [them], and there will be a wider divide between those who do and don’t”
When we pull together approaches such as static web technology, content, delivery networks, offline functionality, and communication
with technologies like SMS, we can create web services that stand up to almost anything.
WordPress resources:
WP Rocket for caching
Strattic for static site generation
Ecograder, Website Carbon Calculator, The Green Web Foundation database
Other resources:
- This Changes Everything – Naomi Klein
- Design for the Real World
- Let My People Go Surfing – Yvon Chouinard
- Design for Sustainability – Tim Frick
- Here’s how a footnote would look ︎