Two quick and simple changes to make your website design more sustainable

Back to the Articles
Two quick and simple changes to make your website design more sustainable

In this article I will explain why design plays an important part in creating more sustainable websites, and why allocating time and resources can help not only the environment, but your user engagement too.

Does making changes to your current website have long lasting benefits on sustainability?

That depends on your site. A small website that has very light web traffic can still see benefits, however; when it comes to a large brand that has millions of visits per month, a small change can have a large impact.

But be warned: where a small change can benefit your website in regards to sustainability, it must not have a negative impact on website visits and your website’s revenue potential.

Can a big brand website become more sustainable?

Let’s take Vodafone UK as my example – our company, Digital Detox, have had and continue to have a strong working relationship with them over the past ten years, so seems a logical place to start!

Whilst of course in the business of selling phones, sim cards, broadband and much more, they are also committed to being a sustainable brand across their markets and offerings. Whether it is reducing its CO2 output, building Greener networks or finding new and more efficient ways in recycling mobile phones, they want to make their brand greener and more sustainable.

What part does design play in sustainability?

Let’s take a common scenario that a designer would experience: a new product is about to be launched, and a new page promoting and displaying this product is to be designed.

Now I know what you’re thinking – Vodafone has already a well established style guide and well thought out page layout which the user is well accustomed to, so the designer has very little that they can do.

So what can they do?

Top tips for design sustainability for brands with well established User Experience

Here I will explain a few small changes that can be made for web pages brands that have already a well established User Experience and brand style. For other smaller websites or those going through a digital transformation, there are more opportunities for improvement which I will cover in a forthcoming article.

Most important thing is to look at your images

A new product page is going to have a number of images and here straight away we can make them more sustainable by using the WebP format. WebP lossless images are 26% smaller than PNGs, and WebP lossy images are 25-34% smaller than comparable JPEG images. On a website which has large quantities of images, this is a massive improvement to the page weight and thus the page load time.

And to further reduce bandwidth when it comes to images, there’s more you can do. Images and videos are typically the largest asset on the web page, with images the most requested asset type.

Designers can request the use of browser-level image lazy loading; this loads the images only when the user scrolls down the page without the need for an external library, again reducing bandwidth and HTTP requests.

Small changes can make big differences

So to summarise, the designer has been given the tools to build a more sustainable product page without any restrictions. The new page will continue to have the same brand theme that the user knows, but with the added benefit of faster loading pages.

And we all want faster loading pages… As more people join the internet you must always be mindful that not everyone has access to fast broadband or mobile networks, so lightweight web pages means faster downloads, reducing user drop off and thus leading to more user engagement.

Look out for my next article where I outline some more clever techniques in designing and developing your website into something more sustainable.