Designing Our Website to Reduce Carbon Emissions

We recently reviewed our digital assets and set out to design a more carbon-efficient online presence.

The internet consumes a lot of electricity. When we visit a website or scroll on social, a little bit of carbon dioxide is emitted. Our devices consume energy, and so do the data centres and telecoms networks powering the internet. The internet accounts for an estimated 3.7% of global greenhouse emissions. That’s a similar amount to the global airline industry.

Emissions

According to Wholegrain Digital’s Website Carbon Calculator, the Culture Counts website was dirtier than 52% of the websites they’ve tested. Over a year our site produces the same CO2 as boiling water for 3,244 cups of tea.

User Experience

As the Culture Counts project has developed, our website has grown. That makes it slower to use. According to Google Analytics, in August our average webpage load-time was 18.7 seconds. It should be less than 5 seconds. Downloading all that website data is bad for the environment and bad for our members trying to use our website.

Our New Website

The challenges above prompted us to create a new Design System for Culture Counts digital assets, with the aim of reducing carbon emissions.

  • New Font: Our website used to load an Adobe Typekit font which required the visitor to download the font via an HTTP request every time they visit the website. We’ve switched to Ariel, which looks as good as Acumin, and because it’s a System Font, can be used without loading font files on the user’s device.


  • No More Stock Images: Our website used Unsplash Stock images. But they didn’t convey anything useful, so they’ve been binned. When we do have to use images we’ll make sure they tell us something useful and are compressed to reduce their size. We’ve also switched off auto-play on any videos we embed.

  • Minimal Javascript: Javascript adds file weight to web pages. This increases the amount of processing required by your device. We’ve replaced a lot of our Javascript reliant pages with lighter HTML & CSS options.

  • Better SEO: We’ve created unique SEO descriptions for every page on the website. Time will tell but we’re hopeful this will help people find the information they want quickly and easily

  • Clearer Content: Content Design London inspired us to make our content more user friendly. Clarity gives our digital communications purpose. Clear content that’s easy to understand shows that we care about your audiences. We talk to them in a language they understand. We don’t expect them to spend brainpower on translating your messages into their words. (https://contentdesign.london/)

What Next

We’ve written a new Regenerative Design Policy. The services we provide and the content we create will use the least amount of energy and material resources possible.

Green Hosting is something that would help us make it more energy-efficient but our hands are tied right now. To learn more about Green Hosting see this Wholegrain Digital Blog Post.

Win-Win

Through this process of re-designing to reduce energy consumption, we found benefits in other ways. Our website performance is way better, which has improved the user experience for our members. It forced us to get rid of jargon on the website and bring clarity of purpose to our digital presence.

Further Reading

Lori Anderson