At Huxley we’re always looking to expand our knowledge on important topics that can help us in our goal to make the web a better place.
This month I read Sustainable Web Design by Tom Greenwood to learn more about how to build low carbon websites and why this is so important. I’ve tried to cover the key points, but there’s so much more information in the book so if you enjoy this article I recommend reading it.
Why sustainable web design is important
It might surprise some people to know that if the internet were a country, it would be the sixth most polluting country in the world. I think it’s fairly safe to say that most internet users don’t think about this when they’re surfing the web, and that’s something that needs to change.
Likewise, it’s important that web designers and developers become more aware of how to create websites with sustainability in mind. The internet is currently the largest coal-powered machine ever created and this can only be addressed through open conversation and collaboration.
The amount of energy used by the internet is growing rapidly, and making the web more energy efficient will need to be a key strategy when tackling climate change. However, between 2017 – 2020 websites and applications generally became less energy efficient. This is shown by the fact that the median size of a web page increased by 30% within that time period. Some of this extra weight may have contributed to a better user experience, but much of it is down to increased internet speeds and improved devices meaning that developers can get away with writing less efficient code. This not only wastes electricity, but can make websites slower and less inclusive.
Measuring our impact
The world of the web is not currently held to any particular environmental standards, so it’s important that as designers and developers we come up with our own methods for measuring the environmental impact of the products we are creating. The key points to consider are data transfer and carbon intensity of electricity.
The more data transferred, the more energy used in data centres, telecoms networks, and end user devices. So page weight and transfer size are good metrics to consider when trying to improve the energy efficiency of a website.
Another way to reduce the environmental impact of a website is to choose a green hosting company that uses renewable energy sources. Also, just as buying locally produced food can have a positive impact on the environment, it’s beneficial for servers to be located close to where the majority of the website users are based.
How to design low carbon websites
Images are the biggest source of carbon emissions on most websites, but luckily there are several ways to make the use of images more environmentally friendly.
Firstly, it’s important to use the most efficient file formats. Generally, WEBP is the best format for photos and PNG is the best for icons and logos. Image files can then also be compressed and optimised. For instance, there are over 16 million colour channels in 24-bit PNG files, even if only one colour is being used. It’s possible to convert 24-bit PNG files to PNG-8 files that only include the colour channels that are needed.
The dimensions of images are also very important. If we want to display small thumbnail images, we shouldn’t be loading files big enough to fill the whole screen. srcset and sizes can be used to tell the browser which size image to load, but it’s important to remember that each variation in image size leads to additional image files that need to be stored on the server, which in itself uses energy.
The colours we choose to use in our designs are also surprisingly significant. Most modern smart phones have OLED screens, where each pixel is a tiny LED. This means that black is the most efficient colour as the pixels are switched off, and white is the most energy intensive.
When it comes to typography, using system fonts is the most efficient choice. These are preinstalled on devices, so they require zero server requests and zero data transfers. While designers may not want to use system fonts for everything, they are often a good choice for body copy, with non-system fonts used for headings and menus.
The benefits of sustainable web design
Design and development choices that make websites more sustainable, also provide other benefits. For instance, prioritising the user experience and focusing on fast load times can help reduce carbon emissions while also leading to better commercial outcomes for the website owner. Similarly, well written code is inherently more efficient, meaning it’s less energy intensive, while also improving accessibility.
As the effects of climate change intensify, the internet will be a vital tool to help us share knowledge about problems and solutions. Therefore, it’s important to build a resilient web where key information and services can be accessed on slow connections, any devices and in almost any condition. Building websites with sustainability in mind helps make the web more inclusive and future proof, which can only be a good thing.