Design + Content

Sustainable Website Design: Part One

When we think about reducing our impact on the environment, surfing the world wide web doesn’t often appear on the eco hit list. But dance videos, anonymous trolling, binge series, 99% off storewide sales and your website requires a hefty amount of energy to exist. And for the most part, it ain’t renewable.

The Internet is everywhere.

And it's constantly consuming significant amounts of electricity in data centres, telecom networks, and end user devices like phones and laptops throughout the world. In fact, if the Internet were a country, it would be the 4th largest polluter globally, and cause the same amount of emissions each year as the airline industry. Esh.

Sure, cryptocurrencies got wagged at by the big news finger, but for the most part not a whole lot of attention is brought to the environmental impact of the Internet - despite its rapid growth. Out of site, out of mind, or in a kind of weird digital fuzz no one questions because hey, memes. 

As a company crafting websites for changemakers, we believe we have a responsibility to build ones that run on renewable energy and consume the least amount of it, while being transparent, accessible and effective. What’s more, nearly everything we do to help make a website more energy efficient also improves performance and user experience. No brainer.

First up, what is a sustainable website?

When defining an energy efficient website, it can be helpful to think about an energy efficient home. 

The first step is an easy one - sign up with a renewable energy provider, making sure your home doesn’t run off fossil fuels such as coal, petroleum and natural gas. Yuck. From there, it’s about choosing the appliances, technology and systems that require the least amount of energy, then making sure the folks operating them can be as efficient as possible day-to-day.

Now for your website. The primary goal of sustainable web design is to reduce the overall carbon emissions produced by hosting and using a site.

Two of the biggest sources of carbon emissions on websites are:

Alongside this, the Sustainable Web Manifesto outlines a few extra pointers to keep in mind for the good of the planet, and people:

How green is your website?

There are various sites that you can use to check the environmental efficiency of your website. A couple that we recommend using to audit yours are: ecograder.com and websitecarbon.com. These sites check if your website is running on renewable energy, as well as how ‘heavy’ your site is. Heavy, referring to how much energy it takes to load each page on the site. Images and video are two of the biggest culprits when it comes to large page size, and therefore the data transfer required each time a page is loaded.

How can you make your website more sustainable?

To build an energy efficient internet we all need to work together, and a big part of that is sharing every tip, trick and update that will lower our combined carbon footprint. If you’d like to talk to an expert, get in touch. If you’d like a rundown of the ins and outs as of early 2023, pour yourself a cuppa and scan through this handy ‘to do’ from Wholegrain Digital (aka the GodFather of Sustainable Web Design). 

In this article, we explore the changes you can make to the design and content of your website. Next up, the development and hosting. Take it away, WD.

Design + Content

When we talk about the energy efficiency of websites, it's easy to assume that it's a purely technical topic. However, the energy efficiency of your website can be improved before you even start the build. Design and content have a big impact on efficiency, meaning the following items could be hefty contributors to your site's footprint.

1. SEO

Search Engine Optimisation might not appear to have anything to do with website efficiency, but in practice, the goals of SEO are inherently aligned with the goal of reducing energy consumption. Handy. When optimising a website for search engine rankings, we’re helping people find the information they want quickly and easily. When SEO is successful, it results in people spending less time browsing the web looking for information, and visiting less pages that don’t meet their needs. This means that less energy is consumed, and the energy that is consumed is used to deliver real value to the user. 

2. Copywriting

Similar to search engine optimisation, copywriting has an impact on website efficiency because it affects the amount of time people spend browsing websites. Sure,  we may want people to spend heaps of time on a website immersing themselves in what we’ve got to say. What we don’t want is for people to waste their time wading through content that offers little or no value to them. Therefore, clear and efficient copywriting can help reduce wasted time on the internet and in turn reduce wasted energy.

3. User Experience (UX)

Good user experience is essentially reducing friction in user journeys. People need to be able to find what they need and get what they want as smoothly as possible. Good user experience makes using the web easier and more fun for everyone - not just grandmas, and once again reduces the amount of energy wasted navigating to pointless pages or staring at labyrinth pages trying to find the way out.

4. Reducing images

On most websites, images are the single largest contributors to page weight. The more images you use and the larger those image files, the more data needs to be transferred and the more energy is used. Regardless of any technical optimisations, designers and content creators should think carefully about their use of images.

Asking these questions and keeping images as minimal as possible without compromising user experience will help keep energy consumption down.

5. Reducing video

Although less commonly used than images, video is increasingly popular as a content format on the web, and it is by far the most data intensive and processing intensive form of content. As with images, ask yourself if videos are really necessary. If they are, see if you can reduce the amount of video streamed by removing auto-play from videos and by keeping video content short. A website with video playing can be one or even two orders of magnitude heavier than a website without video in terms of page weight and creates much higher load on the users CPU, resulting in vastly greater energy consumption.

6. Choose fonts carefully

Web fonts can enhance the visual appeal of websites but can add significant file weight to the websites on which they are used. A single font file could be as much as 250kb, and that might only be for the standard weight. If you want bold, add another 250kb!

To help reduce the impact on custom web fonts, designers should consider the following options:

And if saving the world wasn’t enough…

As well as preventing the end of life on Earth as we know it, one of the great things about sustainable website design is that it also improves your website performance and user experience across the board, including:

If you’d like to chat about making your website more sustainable, with a generous dousing of strategic and creative oomph, get in touch with the team at Brand+Butter. If you’re in the market for a good deed for the day, remember to sign the Sustainable Web Manifesto here. And remember to check back in soon for part two, as we explore the changes we can make to development and hosting.