Create digital sustainability for your website

How do you make your website sustainable?

Today, we’d like to talk about how you can reduce your carbon footprint and embrace digital sustainability.

Sustainability: the buzzword of 2022.

We’re being encouraged to do good by the planet, keep Sir David Attenborough happy, and appeal to an increasingly more carbon-conscious customer base and talent pool. Unfortunately though, the reality is that for many businesses this often amounts to a few generic words on a corporate website or annual report.

So far, focus has mainly been on energy consumption, travel, and recycling your food packaging.

And rightly so.

We’re all familiar with the handful of single use plastic you end up with after buying a sandwich or cup of coffee. But when it comes to our digital lives, few of us give a second thought to  surfing the web for hours at a time. We want to find an eye-catching pair of shoes for the weekend, decide on our next holiday destination or spend hours mindlessly scrolling through TikTok to find the perfect meme to share.

Why do we give so little thought to this?

Well, for years we’ve been told that the Web is greener than traditional – mainly paper based – communications. And of course this is true. But the Web still has a lot to answer for when it comes to CO2 emissions. For every app refresh or web page you visit, CO2 is generated and collectively it adds up to a significant amount.

Here’s a fact that’ll make your head spin: Research suggests that if the internet was a country, it would sit 4th in the world for CO2 emissions.

Others estimate that around 3.8% of the world’s CO2 is generated by the Web. This is why we are seeing an increasing number of conversations around digital sustainability.

So what does this mean?

Let’s think about it as driving to the supermarket to collect some groceries.

You drive your car there, pick up your stuff,  and drive back.

Each of these actions carry or create a CO2 footprint: the car journey there and back, and the shopping you purchase.

And so then if you think of it on a larger scale, a bigger weekly shop leaves a bigger CO2 footprint due to the amount of packaging and processing needed for each item you place in your trolley. In terms of your drive there and back, your carbon footprint will be dictated by the type of car your drive, your speed, the quality of the roads and the type of fuel you use.

We can apply the same principle when we use the internet.

Your interactions and consumption of content have a cumulative effect, which in turn contributes to the CO2 generated by the Web.

You use energy to power your device, a bit like driving your car. You perform multiple searches, consuming more power. And, much like the bigger shopping trips, the larger the website or page load, the more energy that is needed to return and display the content.

Here are a few other considerations …

• How was your website designed and built?
• How is your website hosted?
• What type of energy do the servers run on?
• What is your own broadband speed?
• Does your internet provider care for the environment?

How bad is it, really?

There are plenty of websites that can calculate your digital sustainability and CO2 footprint. They’re great at giving an overview of the state of things, but, unfortunately, most are based on pseudo-science and rough estimations.

It’s true that large pages housing large images, videos and complex code require more energy to load, but they’re not the only things to be considered. Many elements contribute to the digital sustainability and CO2 footprint of your websites and digital platforms.

A small website or app with a large number of visitors can leave a bigger CO2 footprint than a large website that gets a few hits a day.

Let’s look at a comparison between The Team’s homepage and Google

Reference: Wholegrain Carbon Calculator.

At first glance, The Team’s site seems like the bigger culprit.

But things aren’t always as they seem, are they?

The Team website gets, on average, between 20-50 targeted hits a day. Compare this to Google, which gets around 400,000 hits every second globally. Hmmmm.

Although Google itself runs on mainly renewable energy, it still uses conventional fuels. This makes the company’s commitment to be zero carbon by 2030 seem like rather a long shot, even for them.

It’s worth bearing in mind that every time Google is loaded, energy is used from the user’s side. So, as with most things, we all have our part to play for the greater good.

For us, there’s no excuse. We’re actively reviewing our site to identify areas for improvement, such as cleaning up unnecessary code, optimising or using different media formats.

And for those wondering, the page you are reading right now is cleaner that 87% of pages tested on the web. As the calculator would say, ‘Hurrah!’

What now?

Unfortunately, there isn’t a magic digital sustainability wand. We must all take responsibility in seeking new solutions and reviewing our processes.

But, there are ways to make sure you are doing your best to reduce your impact on this incredible planet we call Home.

1. User experience, usability, and accessibility

Well considered web architecture, user journeys, site map and content hierarchy can significantly reduce the time a user spends clicking around your website to find the right information. The goal isn’t to keep them on your site for as long as possible, it’s to let them find what they’re looking for as efficiently as possible.

The same goes for accessibility.

Accessibility should always be front of mind. It’s crucial that people with a range of diverse abilities can navigate and consume the content they’re seeking easily and quickly.

Consider your ecosystem and unify your process and experiences.

For example, ensure that the customer can complete tasks on their platform of choice, whether that’s on your website or mobile app.

Consistent UX patterns, experience themes and design libraries reduce the amount of resources spent creating new pages, features and even platforms. This consistency also reduces the time spend by user to perform tasks.

2. Optimise your assets

Videos and images are, of course, some of the biggest culprits when it comes to the energy required to load them. Try being more strategic in your use of them or find alternative ways to display content.

The Team’s website scores badly because of our heavy video usage. So, we’re replacing it.

There are new image and video formats, such as SVG, Lottie, Avif or WebP, which are much more efficient compared to conventional formats of MP4, GIF, JPEG and PNGs.

3. Coding and development

Selecting the right CMS for your website is a good starting point. There is no need to use Sitecore or Drupal if you have a simple five-page static website.

Aim to reduce the amount of code being used and optimise it as much as possible.

Themes and overuse of plugins add a lot of unnecessary code to your site which make it much slower to load.

4. Hosting

Green web hosting service providers make a conscious effort to care for the planet.

They make greater efforts to be eco-friendly and try to address environmental issues by investing in some form of carbon offsetting scheme or using sustainable sources of energy. Kinsta, GreenGeeks, DreamHost and Hostpapa are some of the well know hosting providers in this field.

What is The Team doing to be more digitally sustainable?

As mentioned earlier, we’ve been guilty of creating heavy websites in the past.

But, that’s all changed.

Now, our focus is on digital sustainability.

This focus is underpinning the processes we go through to create brands and online experiences, especially for larger projects and high-traffic platforms. We do this by considering the end-to-end lifecycle of a brand and the brand experience.

What does being more sustainable look like in practice?

Glad you asked!

It all begins with Brand Strategy.

We help brands incorporate digital sustainability into their mission and promises, to embed it within the company culture itself. This is what stops it becoming just a cursory nod towards sustainability and transforms it into a meaningful way of working.

When it comes to Brand Identity, we always start with Digital.

We focus on ensuring accessibility across the brand and optimising all of the assets and formats used. From optimising logos and using (or creating) accessible fonts, right the way through to colours and brand assets such as motion, film and imagery.

NS&I brand identity mostly consists mostly of flat colours and illustrations to reduce loading time

User experience for digital sustainability

For us, UX means providing optimal experiences that allow users to perform tasks and achieve goals as efficiently and effectively as possible.

Setting experience design themes and principles for brands helps with creating reusable usability and interaction patterns.

UX patterns ensure consistency and optimum usability and experience

Comprehensive Design Systems and component libraries ensure that design efforts are not replicated every time we create a new platform for the brand. They also ensure consistency of the experience across all touchpoints.

Design systems reduce design time and effort

Bringing it all to life

For the past few years The Team has helped NS&I to create digital experiences that tell their story in a clear and compelling way. As we continue to do so, we want to accelerate their path towards sustainable digital experiences –  without compromising on quality.

NS&I digital ecosystem

We must all stay focused on digital sustainability. It matters more than ever as we move into a new age of online experiences with web 3.0 and the Metaverse.

It requires a shift in mindset and approach when creating brands and digital experiences. A shift that we should, and must, embrace. Sustainability will continue to become more and more important across all industries.

Implementing sustainable design practices doesn’t have to mean compromising on brand experiences, in fact the opposite is true. Taking a greener approach ensures your brand stays ahead of the curve.