In today's digital age, where almost everything has found a home online, our websites are like our digital footprints. So this begs the question… have you ever stopped to think about the carbon footprint of your website? Yes, you read that right! Just as we strive for sustainability in our daily lives, our websites can play a part too. Enter the world of sustainable web design.

What is sustainable web design?

Sustainable web design is an approach to designing digital products and services that puts people and planet first. It respects the principles of the Sustainable Web Manifesto, which calls for the internet to be: clean, efficient, open, honest, regenerative, and resilient.

Yes, websites have a carbon footprint

The internet consumes a lot of electricity, 240-340 TWh per year according to the IEA. In fact, if the internet was a country, it would be the world’s 4th largest polluter - more than the United Kingdom.

That's right, our innocent browsing habits are contributing to climate change! But here's the good news: just as we can choose to make a positive impact by flying less and using more energy-efficient appliances at home, we can also make our websites more sustainable.

And by investing in more sustainable web design, this leads to faster load times, a more enjoyable user experience, and increases your chances of ranking higher on Google. Basically, it's a win-win for everyone!

4 Steps to Sustainable Web Design

1. Embrace JEDI design

No, i’m not talking about harnessing the force. JEDI stands for Justice, Equity, Diversity, and Inclusion. Remember, not everyone's surfing the web with perfect vision, the latest tech and lightning-fast connections. Justin Reyna put it perfectly when he said “Not creating accessible products is just rude”. So let’s make the digital world enjoyable for all, not just a privileged few.

By striving to meet the highest possible accessibility standards, you enhance code quality, which in turn boosts energy efficiency and elevates your SEO rankings.

• Choose accessible colour combinations and contrast ratings.

• Let users change preferences to increase readability. Here’s a good example.

• Communicate important information in ways that do not rely on colour alone.

• Include accessible alt-tags and captions (review auto-generated captions).

2. Simplify User Journeys

Did you know that 90.6% of web pages get zero traffic from Google? That’s why it’s best to prioritise page quality over quantity. Plus, making it easier for people to find what they’re looking for isn’t just appreciated by your users. It's also more energy-efficient because it reduces the number of wasted trips around your website.

• Set clear goals and objectives for your website.

• Optimise flows to help the user navigate with ease.

• Use simple messaging that helps people to act.

• Remove or restructure any pages that get low traffic.

• Minimise distractions which divert users.

3. Reduce Page Weight

Lightweight pages load faster and consume less energy. Want your pages to be lighter? Here are a few helpful tips to get started:

• Follow a modular design system to encourage the reuse of code.

• Remove any assets, videos, and fonts (and weights) which aren’t being used.

• When using custom fonts, remove any unnecessary glyphs to create a lightweight subset.

• Optimise the rest of your assets using compression and modern formats.

• Lighter colours are generally more power-hungry, so consider dark mode.

4. Choose Green Hosting

Last, but not least, switch to a hosting provider powered by 100% renewable energy, e.g. Krystal. Unsure about your current hosting? The Green Web Foundation’s checker can help.

How do you calculate your website’s carbon impact?

Whilst it’s relatively straightforward to track the environmental impact for most major industries (e.g. miles per gallon for cars or energy per square meter for homes), it’s not as simple to measure the amount of CO2 produced whilst browsing the internet. Fortunately, the clever folks over at Sustainable Web Design have created a comprehensive methodology for estimating emissions. You can also check out the Website Carbon Calculator below.

How to offset your website's carbon impact?

There are plenty of different ways to offset your CO2. One way to do this is via services such as Tree-Nation which will plant trees on your behalf. This is the handy tool we use at my startup, Scrapp to ensure our website meets Net Zero standards. So far we’ve planted over 1,000 trees and helped to capture over 200 tonnes of CO2. Check out our virtual forest here.

Conclusion

Sustainable web design isn't just a trend. We all have a responsibility to create websites that not only look good and function well for everyone but also minimise our impact.

Don’t forget that when we follow these strategies, we also get rewarded by Google and other search engines, which means more clicks on your website and a better experience for your visitors. So, the next time you're designing a website, remember these 4 principles of sustainable web design!

If you have any questions or would like help with understanding and mitigating the environmental impact of your digital presence, feel free to get in touch.