Making digital products more sustainable

When we think about sustainability, we often think about physical things - recycling rubbish, ditching plastic water bottles, switching lights off. Of course, all of these things are important, and we should all continue to do them where we can, but there is another huge culprit in the climate crisis that often goes unmentioned: the internet.

Have you ever been online shopping, watching a movie on a streaming platform or sent an email and wondered how it might be affecting the planet? The answer to this for most people is probably ‘no’. However, the ICT industry globally is quickly growing into one of the largest producers of carbon emissions, and could potentially use 20% of the worlds electricity by 2025. Right now, the internet overall uses more electricity than whole of the UK, and it has been predicted that by 2025, it will produce more carbon emissions than any country apart from China, India and the US.

So, what can the digital product design and development community do about this? Here are some things to consider to help lower the carbon emissions of your digital products…

The importance of having an efficient website

Having an efficient website or application is an important part of good user experience. Research by Google suggests that over half of users will leave a mobile page that doesn’t load within 3 seconds. As consumer expectations for efficient digital products grow, businesses should consider that this also plays a part in lowering CO2 emissions from websites. The faster a page loads, the less energy it uses, the average web page produces between 0.5g - 1.76g of CO2 per view - when you think of all of the people using your product, this could really add up.

A great way of improving load times of your product, and keeping the whole team on board with this is to set a page weight budget. This means setting a budget for how much a webpage can weigh (in kilobytes or megabytes). This works the same as any other budget - everyone who is contributing to the project should be keeping the budget in mind and taking measures not to exceed it. If you’re interested in learning more about how your company can create a page weight budget, there are some initial steps you can take, which you can find out more about here and here!

So, you’ve set a page weight budget - now how can your team stick to it? There are a few areas of a webpage that usually consume the most energy and reduce the overall efficiency, these are:

Media assets

When designing a digital product, it can be easy to get carried away with using fancy animations, eye-catching imagery and even videos, but these could be having a detrimental effect on both your user and the planet. Media assets cause longer page load times which can cause frustration for your users, and produce extra carbon emissions.

Of course, some images and animations are needed but designers should consider the following: which ones are actually adding value to the user? Could some be removed or replaced with smaller assets? Consider the images themselves - could you replace your bright and busy imagery with more simple ones with reduced colour palettes? This can be a great opportunity for getting creative and using problem-solving skills to achieve the same effect but more efficiently.

Imagery is an important part of many applications, but it’s not just down to the designers to manage this. Developers should also be ensuring that images are optimised as well as possible. They should be considering a few things for this:

Is the correct file type being used? Different file types will be compressed differently, so selecting the smallest possible type for the particular image being shown is important. Developers can consider automating image compression tasks with packages such as gulp or webpack.

Are you making image sizes responsive? Striking a balance between the smallest file size and acceptable image quality is not always easy, but it can make a huge difference to the efficiency of a page. Having different size versions of images for different size screens can significantly decrease load times as the browser can choose and download the smallest image possible and leave the others.

Can you use lazy loading? For images that are further down the page, it can be beneficial to use lazy loading. This means that the image has a placeholder until the user actually scrolls to its location where it then loads. This makes your app or website more efficient, especially if there are multiple images on the page.

You can use this site to test how much you could improve your site performance by compressing your images.

Fonts

Using custom fonts will increase the file size of your webpage, and using different typefaces and font weights will all add to this. When trying to make a webpage more efficient, designers should consider using system fonts that will already be on users’ devices. Where custom fonts are needed, using fewer font variants is a good option for keeping file sizes down.

Dark mode and colour choices

An element of conserving energy in digital products that not many people consider is the use of colour. As many tech manufacturers are making the switch to OLED screens instead of LCD screens, colour is becoming an important factor in energy consumption. On an OLED screen, each pixel has its own LED bulb that lights up as and when it’s needed, as opposed to LCD screens which just have one backlight for the whole screen. This means that not only is black the most energy efficient colour, but other colours also have some perhaps unexpected effects - e.g. blue pixels use significantly more energy than red and green ones. It might seem like colours conserving battery life of an individual's phone won’t make a huge impact, but Google found that Google Maps can use up to 63% less energy in dark mode compared to light mode on phones with OLED screens. When you consider all of the users of your product, this will add up and make a difference.

A great solution to this is to design a dark mode version of your site. There are some questions around whether dark mode causes accessibility issues, but to resolve this, many companies design a dark and a light version of their sites so that users can pick what works best for them. If your site has a dark and a light version, try making the dark version the default - this is what Youtube has done, and they found that on full brightness, the dark version of the app saved up to 60% more energy than the light version.

Having an efficient user journey

The complexity of a user journey affects how long a user spends online. In an attempt to minimise this complexity, designers may consider how many steps the user is having to take and if this can be cut down. Not only is this better for the environment, but creates a much better user experience. In addition to this, it is worth examining how many page loads a user has to go through in order to access or use your product and if this number can be reduced. The front end user journey is important, but remembering to do the same for admins also plays a part in conserving energy.

Green web hosting

For the average internet user, it’s easy to forget that the internet isn’t just an abstract cloud that holds every website in the world, but that it involves huge physical data centres full of servers spread around the globe. Unfortunately, these data centres very rarely use sustainable or renewable energy and they consume huge amounts of electricity. At the moment, green web hosting is one of the only solutions available to try to combat this issue.

There are a few different types of green web hosting - these include providers using renewable energy sources, building wind farms or solar farms or purchasing renewable energy certificates or carbon credits. Arguably, the best of these is where providers use renewable energy sources as this gets straight to the root of the problem. On the other end of the spectrum, green web hosting companies that just purchase carbon credits can be seen as taking the easy way out as it is just mitigating some of the effects of what they are doing, instead of actually addressing the problem.

Using a green web hosting provider is usually no different in price to using a regular web hosting provider, and there are many options that provide a reliable service. For a list of green hosting options all across the world, you can have a look at The Green Hosting Directory. At Inktrap, we use DigitalOcean to host our website with 100% renewable energy.

Check your website and take accountability

As time goes on, people and businesses are becoming more aware of the climate crisis and how important it really is to take responsibility for the part that we play in helping to stop and reverse the damage that has been done to our planet.

For businesses that work solely with digital products, it can be easy to feel that these products aren’t causing any environmental damage because there is no physical evidence of it. Now more than ever, digital product designers, developers and owners need to take accountability for their contribution to climate change, and really fight to make changes to the industry. If you’re not sure where to start, you can check out sites such as Ecograder and Website Carbon to calculate the carbon footprint of your website and then begin implementing the changes discussed in this article.

Resources

• Designing for Sustainability: A Framework for Building Greener Digital Products and Services
• Sustainable web manifesto
• We have an energy consumption crisis
• Data centres: greenwashing
• Sustainable Products Initiative – A new digital product passport
• Information and Communication Technologies (ICT) Industry Soon to Be Largest Source of Co2 Emissions
• ‘Tsunami of data’ could consume one fifth of global electricity by 2025
• ways to make your website more energy efficient
• Checklist: Is your digital product “green” to go?
• How to stop data centres from gobbling up the world’s electricity
• The search for reliable green web hosting
• Web Hosting: Renewable Energy & RECs
• The Green Hosting Directory

‍