Digital sustainability: how can design choices improve the sustainability of websites?

This began by educating the Manifesto team on how – and to what scale – the digital industry impacts our environment. By setting the build against this context, the client’s wish to ‘walk the talk’ could be better quantified. But the key here, in this preliminary period, was not to prescribe anything to the build team. Instead, we created a space in which they could question everything. That way, each step of a more straight forward website build could be deconstructed to uncover a more sustainable alternative, where possible.

Using design to highlight action

To build a sustainable website, it’s helpful to put yourself in the shoes of a visitor – or in this case, a potential donor. By mapping out how a visitor might use the website, you can then shape the structure and design of the pages in a more efficient way.

For example, we located where on the website the charity wanted people to take action. It was these pages that Manifesto made the most engaging. Then zooming out, we tracked the whole journey of a visitor around these focal pages. That way, we could tighten up any journeys around the site which were unnecessarily long, and which kept visitors on the website longer than they needed to be.

During this design process, we established a constant line of communication between the development team and the design team. This meant we could continuously tweak the website as we built it, to ensure it was written with the lightest code possible.

Add value with images whilst losing weight with icons and illustrations

A huge contributor towards the weight of a website – and therefore it’s emissions –is the images. Because of this, we were extremely strict, only using images which added genuine value. A trick we learnt in the process was to use colours and icons which could stand alone of excess imagery. That way, you can avoid a design which feels bare or excessively minimal.

We followed a general rule throughout, which was: one big image is less environmentally impactful than multiple small ones. This allowed us to avoid excessive listing pages and image-heavy modules. We even introduced a limit to the amount of images a page could host. We did this by including pagination - that is, the ability to divide documents into discrete pages - on listings and on the table which displays their members.

You can try to minimise the impact of each icon you use too. If they’re built on Scalable Vector Graphics (SVG), a format which represents images via mathematical structures, you can be sure you’re using the smallest icon file sizes possible.

Once the site is live, the responsibility for keeping emissions down transfers from the build team to the editorial team. In our case, we conducted training sessions with the Climate Group’s content creators prior to go-live, to help them buy into the ethos and approach we had built out and executed in the design.

Be clever with video

Another significant contributor to page weight is video. We therefore decided to apply our image approach – where possible – to videos on the site too. But we also went a step further, because with videos come more moving parts and opportunities for unnecessary emissions.

Autoplaying videos has long been a user experience (UX) and data-use ‘no-no’, unless you’re Facebook. Given that most organisations, the Climate Group included, hold extensive YouTube presences, breaking down the impact of showing a video on a page is crucial in any sustainable web build.

To get around the pitfalls of autoplay, we made images look like video thumbnails. That way, the site visitors still know where the videos are, and can play them at their leisure.

This means the real video doesn’t load until the point of interaction with the ‘faked’ video. This seems obvious, and it’s relatively simple to do, but seemingly small and easy jobs like this aren’t uncovered unless you first establish a shared mode of thinking, as we mention at the beginning of this post.

Stripping down your fonts

There are two main different types of fonts: system fonts and web fonts. A system font could be Arial or Calibri, whereas a web font will be more customised. System fonts are more economical, because they’re already included on most people’s devices.

That means they don’t have to download it when they visit your site, which saves bandwidth and lowers the number of requests necessary to load your site. And yet, some 69% of the top 500,000 websites were using custom fonts in 2017.

Manifesto decided to use just three different weights of one (admittedly they are custom) font for the Climate Group. This meant just three font files, which is a lot less than most sites.

To give you an idea, around four to six font files on a website is the ‘average’, with the average size of one of these files being about 40 kilobytes. So when you account for the italic and bold variants, you can add up to 160 kilobytes to the initial page load for each font you use.

Dimming it down saves energy

As for background colours, we’ve taken inspiration from the dark mode user interface (UI). That’s because dark mode uses less energy. It’s also been proven to inhibit the development of myopia, or nearsightedness, in people’s eyes. So there are both sustainable and health benefits in choosing the alternative colour scheme.

In tandem with the background, we also used as many dark elements as possible across the site as a whole to minimise its power output. The Climate Group’s brand was relatively easy to adapt, it’s core colours being black, white and red.

Conclusion: collaboration is key

No part of this sustainable web build would have been possible without establishing a coherent way of thinking that the team could share, understand and contribute to equally. Because ultimately, this project required Manifesto to rethink, and reimagine, every step of the more traditional build process.

You can choose to emulate our approach, but it’s by no means prescriptive. Our goal was to create a resource in a space otherwise lacking in guidance and best practices. And whilst this post focuses on the design element of the build, our next post in this short series explores the technical side of sustainable development.

Neil Clark, environmental lead at Manifesto