Seven best practice tips to design low-carbon websites

Sustainable design is trendy. Over the last years, many talks have been organized on this subject. Many disciplines of design evolve towards a more sustainable approach. This is the case, for instance, for architecture. In march 2021, the Pritzker award, the most important award for architecture, was attributed to two French architects, Anne Lacaton and Jean-Philippe Vassal, both renowned for their work in favour of sustainable architecture. Their credo? To transform rather than to rebuild.

Many sustainable projects using the web have also been created, for example the app Do Nation, which tends to encourage individuals to adopt sustainable routines. Another example of such a project is the browser Ecosia, which uses advertisement revenue to support NGOs engaged in favour of reforestation.

In this context, what is best practice for a product designer, a UX designer or web designer, so as to create sustainable digital products?

Digital: a polluting industry?

The preconceived idea according to which the digital is less polluting than other industries, for example the fashion industry, often criticized for the overconsumption of natural resources, is widespread. However, the digital is far from being a virtuous sector.

?Digital represents 4% of CO2 emissions

The computer sector in reality consumes on average 10% of world electricity and its energy consumption grows by 9% per year according to the report “Lean ICT – Towards digital sobriety (Pour une sobriété numérique)” published in October 2018 by The Shift Project. The digital sector would thus be responsible for 4% of all CO2 emissions.

The reason is as follows: more and more websites are created, notably sites which consume a lot of energy like Netflix. In March 2021, Netflix for the first time revealed details of its carbon footprint and published data about its carbon impact. Using a tool called DIMPACT, developed by researchers at the University of Bristol, Netflix claimed that one hour of streaming on its platform in 2020 used less than 100g CO2e (a hundred grams of carbon dioxide equivalent). A quick calculation teaches us that a user who watches a one-hour episode of a series every night for one year consumes more energy than if he or she had driven 186 000 kilometers, which is more or less twenty times the distance between Paris and Shanghai. This should put into perspective the uplifting speeches concerning the positive outcome resulting from the diminution of people using their car during the lockdown…

?A growing awareness of the Tech sector since the 2000s

?In January 2020,?Microsoft committed to go carbon negative by 2030; later that year, Apple announced its own plans to become carbon neutral by the same date. Facebook has also announced that they would request net-zero emissions from all suppliers and users and Google has promised to run on exclusively renewable energy.?Since 2017, Google has bought the equivalent of 100% of the electricity they consume in renewable energies?? thanks to their entity Google Energy.

The subject of ecofriendly software is being debated amongst engineers. Developers have been bringing the question of ecofriendly websites to the table for years. In September 2020, Microsoft has, for instance, organized the GreenConf about sustainable development. According to the website of the conference?:

“ Developers and engineers have the power to conceive, build and maintain more sustainable websites.??

Even if designers play a major role in designing more sustainable software, it is difficult to find content online about good practice for designers.

As a UX designer, product designer or webdesigner, how might one today contribute to designing more sustainable digital products??

?Some design agencies are already working on developing more sustainable digital products. This is the case, for instance, of Tom Greenwood’s London-based agency Wholegrain digital. This is also the case of the Parisian agency Arneo, which in 2020 launched an index of ecoconception enabling a user to evaluate the sustainability of their website.

Is it possible to design a sustainable website??

?Since digital is quite recent, its history is short. This may be why one rarely thinks of looking for inspiration through the history of the Web. However, as always, the past can teach us a lot.

I am, personally, very fond of the website Internet Archive. Just like archeology has the possibility of unveiling the original text on a palimpsest, Internet Archive literaly contains the history of the Internet?: it only requires one to type the URL of a website to discover its old versions.

?Paradoxically, history clearly shows us that designing more sustainable web pages is possible if only we set our minds to it.

This is very exactly because Internet connection speed are getting faster (4G), because computers and phones are becoming increasingly powerful, enabling users to load heavy pages more and more easily. Thus is it that websites themselves are a technology that is becoming less eco-friendly as time moves on.

According to Tom Greenwood during an interview for the podcast?This Is HCD?:

“Anything that makes it easier for humans to consume resources is likely to lead us to consume more resources.”

(Tom Greenwood)

Working with powerful devices and speedy connections means that designers tend to get away with not sizing images properly, with copying and pasting a whole library of code when we only need part of it, even with letting old, unnecessary lines clutter up our code, without realizing that more lines of code means more requests, than more energy consumption.

According to Tom Greenwood, from 2017 to 2020, the median size of a web page increased by roughly 30%.

?What to do then?

?Seven best practice tips to design a sustainable website

The goal of sustainable webdesign is to optimize websites in order to decrease their energy consumption, hence to decrease carbon emission.

To obtain to this result, there are two options:?

• Either to reduce the energy used on the user’s device
• Or to reduce the energy use of the infrastructures that support the website.

As a rule of thumb, the more data is transferred, the more energy is used in the data transfer, telecom networks and end user devices. In summary, reduced data transfer translates to energy efficiency, a key factor to reducing carbon emissions of web products. The more efficient our products, the less electricity they use, and the less fossil fuels need to be burned to produce the electricity to power them.

What are the best practices??

1.????Streamline the Content

?The main idea to reduce the energy consumed by a website is to create simpler websites. In other words, the UX designer needs to focus the digital product on its core functionalities.

According to a study by the Standish Group, more than 60% of the functionalities by a website are almost never used. These results should be relativized since this study has focused on two intranets, which are not representative of the Web in general.

?Of course, a minimalist approach to the?designing of a website does not require that designers have to create a boring and visually unattractive website. It simply implies that every detail of the product should be justified. Amongst the best examples of minimalist webdesign, there is the homepage of Google, which focuses on the main functionality to deliver an epurated and efficient user experience.

Any content manager would tell you this: as a website grows over time, it is not uncommon for content to magnify. Well, one major source of wasted electricity in websites is the storage of data that is no longer needed.

The idea here is to drastically reduce the number of words on each page, to reduce the page count. Not only does old content tend to make websites bloated, unwieldy and confusing but it also has a detrimental effect on the environment by saturating hard drives that consume electricity 24 hours a day.

2.????Simplify the user experience

The second objective for a UX designer consists in simplifying the user journey, that is to avoid ambiguities or redundancies along the user journey. Good IA and UX can help improve sustainability.

The first goal is to reduce unnecessary loaded pages. When a user clicks by mistake on a menu, a page will have been loaded for no reason.The more a user loads data, the more electricity is being consumed to deliver this information and the more CO2 will be released into the atmosphere.

On a webpage weighting on average 2 MB, a redundant step on the user journey has a significative impact on the environment.

Another pitfall: “yoyo” user journeys, which require that users constantly go back to a previous page in order to find an item of information. It is for instance the case when numerous users go back to the homepage as a fallback to obtain information.?

It should be noted however that when users visit the same page multiple times, the amount of data loaded is significantly reduced on repeat visits. Therefore, the environmental impact of yoyoing visitors is not as large as other wasteful user journeys, but it does still have an impact, and designing to eliminate this can also deliver a better user experience.

?In a nutshell, UX designers have a major role to play in order to make websites more eco-friendly. According to Tom Greenwood:

“Information architects and user experience designers have considerable influence over the environmental impact of a website. Even if sustainability is ignored completely in all subsequent stages of a project, leading to bloated designs, inefficient code, and the most polluting hosting, good information architecture (IA) and user experience (UX) can limit the impact of those later decisions.” (Tom Greenwood)

3. Optimise images

·??????File size

Images are one of the biggest contributors to carbon emissions on most sites.

According to the HTTP Archive, the median number of images on any webpage is approximately thirty, with a total transfer size of 1 MB – which is equivalent to one hundred fifty thousand words of lorem ipsum in an HTML file…

The first objective is hence to reduce the weight of images by using the most efficient file formats and compression tools to optimize them, that is:

·?????Converting photographs to the WEBP format enables to get files about 30 percent smaller than JPEG

·?????PNG or GIF, as for them, are the most efficient formats for icons or logos.

·?????For videos, MP4 is generally more efficient and delivers smaller files than animated GIFs, and also provides a better accessibility with features such as audio description tracks and captioning.

·?????As a rule of thumb, it is recommended to use videos with parsimony :

“Videos are both data and processing intensive. A study from the university of Bristol found that streaming videos from YouTube produces approximately 10 kg of Co2 per hour, or 2.8 grams per second.” (Tom Greenwood)

Autoplaying are not only bad for the environment, they can also cause problems for users with sensory disorders and motion sensitivity. Putting a play button in front of any video ensures it only loads if the user wants to watch it.

Even if you have used the most appropriate file format, it is likely that the image file is bigger than it needs to be. Image compression tools like Shortpixel, TinyPNG and ImageOptim minimize file sizes without unwanted degradation of image quality.

The content of images also has an impact on the size of the file: simple, clean images with a blurred background will deliver smaller file size because this reduces the variation between each pixel. It is recommended to use photographs with a shallow depth of field, or to blur out the edges of images through editing before uploading these to a website.

Another option is to use vector images. The reflex of using photographs on websites is widespread amongst designers but is a photograph always the best option to communicate an idea? We should ask ourselves whether we can obtain the same impact using other forms of styling instead of leaning on photographs.?For example, can we use lightweight SVG vector files to illustrate ideas?

The example of the clothing brand Organic Basics is very interesting. They have created a low-version of their website for users to browse instead of regular version. On this low-impact website, all of the typical fashion photography is replaced with vector illustrations of the garments. This site is seven and a half times less data intensive than their standard website.

Finally, a vector file can be manually optimized before uploading it to a website. Using vector editing software like Adobe Illustrator, you can delete any unused groups and layers in the file and simplify shapes by removing any unnecessary anchor points on paths. SVGs can also be edited in a code editor, albeit without the visual user interface. If you manually optimimize the vector first and then compress the SVG file using a tool like ImageOptim, you can reduce the size of vector files by up to 85% without anyone noticing.

·??????Colour

·??????The second way in which colour affects the energy used by a website is in its impact on the file size of images.

·??????As a general rule, the greater the amount of colour variation in an image, the larger the file. Using images with reduced colour variation such as monochrome images is a way to curb a website’s energy consumption.

Modern smartphones and a growing number of other devices such as laptops and smart TVs are now using OLED (organic light-emitting diode) screen technology that illuminates each pixel individually. As each pixel is literally a tiny LED, using darker colours is a viable technique to reduce energy on end-user devices. Black is the most efficient colour for OLED screens as the pixels themselves are switched off, and white is the most energy intensive with darker colours generally using less energy. Colour also makes a difference with blue pixels consuming 25% more energy than green or red. For example, running Google Maps in night mode reduced screen power draw by 63%. This isn’t just good for the environment; it also helps to maximize battery life for portable devices such as phones, tablets and laptops.?

If you are given a degree of freedom to define the colour palette for your branding, aim to create a darker design using less blue.

Finally, the second way in which colour affects the energy used by a website is in its impact on the file size of images. As a rule of thumb, the greater the amount of colour variation in an image, the larger the file is. Using images with reduced colour variation such as monochrome images is a way to curb a website’s energy consumption.

·??????The image attribute

The image attribute in html is important because it enables to display different image size depending on the size of the screen.

Click here for more information on how to optimize images.

4. Efficient web typography

Open-source webfonts have vastly expanded the typography options available to designers, but they can take a heavy environmental toll by increasing data transfer and the number of server requests required to load a page. The most efficient choice is always to use system fonts that come pre-installed on devices, such as Arial, Times New Roman or Helvetica on Apple devices and Robot on Android. System fonts require zero server requests and zero data transfer to use. They are essentially free. The downside is that they restrict creative freedom.

Another consideration is the number of distinct fonts and weights (standard, light, semi-bold, bold and black) that are needed. Generally, the goal is to limit the number of weights used because each weight and each font comes as a separate font file, adding bulk to the page.

Finally, it is recommended to optimize font files. Converting the TTF format into WOFF2 by using, for instance, the font generator of Squirrel’s webfont Generator enables one to reduce the size of the file without loss of quality.?

5. Choosing “green” infrastructures

The main goal of a sustainable web design is to reduce carbon emissions.

What makes this objective difficult to implement is that, at present, there is no clear and efficient way to measure how much CO2 is produced by a digital product. If the carbon emissions produced cannot be measured, data transfer can however be measured as well as carbon production generated by the electricity used.

· Limiting data transfer

?As a rule of thumb, page weight is a good indicator to measure data transfer. By early 2020, the median page weight was 1.97 MB for setups that the HTTP Archive classifies as “desktop” and 1.77 MB for “mobile”, with desktop increasing 36% since January 2016 and mobile page weights nearly doubling in the same period.

As a general rule, roughly half of data transfer is image files, making images the single biggest source of carbon emissions on the average website.

·?????Reducing carbon intensity of electricity

The level of pollution caused by digital products also depends on the carbon intensity of the energy being used to power them. Carbon intensity is the term used to define the grams of CO2 produced for every kilowatt-hour of electricity (gCO2/kWh).?

If we don’t have control over the full energy supply of web services, we do have some control over where we host our projects. With a data center using a significant proportion of the energy of any website, locating the data center in an area with low carbon energy will tangibly reduce its carbon emissions.?

Danish start-up Tomorrow reports and maps this user-contributed data, and a glance at their map shows how, for example, choosing a data center in France will have significantly lower carbon emissions than a data center in the Netherlands.?

That said, we don’t want to locate our servers too far away from our users; it takes energy to transmit data through the telecom’s networks, and the further the data travels, the more energy is consumed. Just like food miles, we can think of the distance from the data center to the website’s core user base as ‘megabyte miles’ – and we want it to be as small as possible.

6. Sustainable Web Development

Finally, well-written code is inherently more efficient. Coding the website without using bloated libraries and plugins that contain more functionalities than are needed enables one to reduce the energy consumed by a site. Compressing the code permits one to convert the code we write and read as humans into a production-ready version optimized for machines. Indeed, no matter how well a code is written, it can always be more streamlined. As humans, we add white space for legibility, comments to help us understand it, and intuitive naming of classes and functions. These extra make our files larger than they need to be. If we can generate a version of our code that is purely machine-readable, then we can save energy and improve web performance.

?Choosing energy efficient languages also has a huge impact. The energy efficiency of different languages varies significantly. Researchers found that the three least energy intensive programming languages are C, Rust, and C++ while the three most energy intensive are Perl, Python and Ruby.

Reducing the number of system calls on a server is also recommended in order to save energy.?

Finally, using less tracking scripts and blocking bots that visit websites are other ways to reduce the energy consumed by a website. Bots visit websites and create many requests. They often use up to 50% of resources such as processing and bandwidth.

7. Verification tools

There are many verification tools to “test” the sustainability of a website today:

·??????The most global:?https://www.ecoindex.fr/

It indicates the number of elements, the number of server calls and the weight of a page.

·??????The most standard:?https://www.ecometer.org/

Based on 115 guidelines, this tool indicates these which are not respected.

·?????The most comprehensive:?https://developers.google.com/speed/pagespeed/insights/

The rate varies a bit depending on connexion. The tool enables a distinction between desktop and mobile performance.

·??????Arneo sustainable tool:?https://ecoconception.arneogroup.com/#/

I may have omitted to mention some associated subjects. There might be approximations and perhaps some information is incomplete. Please feel free to share your feedback by commenting the article, I am very interested in learning more about this subject. :)

Recommended books :

• Sustainable Web Design, Tom Greenwood

• Designing For Sustainability, Tim Frick

• World Wide Waste, Gerry McGovern

?