Sustainable web design

Sustainable web design

Roel Jansen

Author

Roel Jansen

Published

22 February 2023

Reading time

4 minutes

Sustainability is an important value to design for. Many companies say they are concerned with sustainability or mention it as one of their values. Nowadays you can hardly avoid not naming it. As a digital designer, we don't always have an influence on how sustainable the primary business processes are. But a company's digital channels also have a share in greenhouse gas emissions. As a UX designer, how can you make websites and apps more sustainable?

Internet, the big polluter

When many people think of CO2 emissions, they think of air travel, the food or clothing industry, but one of the largest sectors when it comes to CO2 emissions is the electricity sector.

Emissie broeikasgassen per sector

Emission greenhouse gases per sector

Source: CBS

Internet use alone accounts for between 2 and 4% of global CO2 emissions, which is more than aviation. The expectation is that this will only continue to rise, especially with the arrival of online services such as the Metaverse.

De verdeling tussen het maken en gebruiken van IT-gerelateerde diensten.

The division between creating and using IT-related services

Source: DW.com

As a digital designer, I focus on the IT sector. Within the IT sector, we are dealing with high energy consumption. This is because the internet uses data centers and they need a lot of power. You can calculate the emissions of a website via the Website Carbon Calculator. For example, visiting the homepage of YouTube with 10,000 visitors a year emits as much as boiling water for 12,138 cups of tea. And YouTube of course has many more visitors than that per year.

What can designers do for a more sustainable world?

Because we design digital services, we therefore have an impact on CO2 emissions. Fortunately, there are several ways to design for a more sustainable world. Here are a few of them.

Website size

You can keep your website or app as compact as possible. The larger your website/app is, the more energy it takes for users to view it. Do not use too much multimedia content such as videos, photos or unique fonts. If these are really necessary, pay attention to the file size. Volkswagen for example, has a sustainable website with images consisting of text (think ASCII art).

Een duurzamere manier van afbeeldingen tonen op websites.

A more sustainable way of displaying images on websites

Source: Volkswagen

Use of colour

Showing colors on a screen takes energy. The colors you show determine how much energy is needed. Dark Mode costs less energy, but blue pixels cost 25% more energy than red or green pixels.

Data

Everything you measure online costs energy. Often a lot of data is kept by companies to know more about their users or the use of their services. That sounds fine, of course, but as Gerry McGovern has discovered: "Up to 90% of all data is not used". So be critical of what you want to measure and know.

Wayfinding

Get users where they need to be as quickly as possible. As a result, they quickly reach their task and also have to open fewer pages (and therefore collect less data). As a result, they may not stay with the service for as long, but they leave satisfied.

Sustainable Web Manifesto

A manifesto has been created that provides guidelines for designing for a more sustainable web. Think of: using reusable energy sources, allowing services to use as little energy or materials as possible and giving users control over what data they want to share.

Sustainable Website Manifesto

Organic Basics

For example, a webshop with good guidelines for keeping their website sustainable is Organic Basics. They had a low-emission webshop, which for example showed no photos but simple illustrations of their products. Unless you wanted to see a photo as a user. Unfortunately, the webshop can no longer be used, but their ideas can still be read.

Weinig data door het gebruik van illustraties.

Little data due to the use of illustrations.

Source: Organic Basics

Low-Tech Magazine

Another example is Low-Tech Magazine. The website runs on solar energy and is therefore sometimes not available. They try to keep their website as small as possible in response to the increasingly heavy websites of today.

Een website draaiend op zonne-energie.

A website running on solar energy

Source: Low-Tech Magazine

A better website starts with you

Whether your assignment is essentially about sustainability or not, you can always take steps to make your designs more sustainable. The great thing is that these sustainable choices often make services even better and, for example, also help people who have a poorer internet connection. I find it interesting to see how with fewer visual elements (see the examples from Volkswagen, Organic Basics and Low-Tech Magazine) you still radiate a certain identity and let sustainability emerge. Hopefully, this way of thinking about sustainabilitywill inspire web design, and we will be a little more aware of our digital footprint.

Tips and tricks to reduce your own digital footprint

To keep your own digital footprint as small as possible, simple actions are also possible. Consider:

  • Clean up mailboxes, unsubscribe from newsletters and cc as few unnecessary people as possible.
  • Save frequently used web pages as favorites and try to go directly to websites with a URL without having to go through a search engine first.
  • Save playlists from Spotify to your phone so you can listen to them without having to use the internet every time.
  • Try to store as little as possible in the cloud. Every visit to the cloud costs energy.

Want to know more?

If you are curious about more, check out these websites:

Mightybites

Sustainable Web Manifesto

Volkswagen

Organic Basics

Low Tech Magazine

About the author

UX

True experience

Sustainability