What is Sustainable Website Design?

If you’ve been reading our articles for a while you’ll know that the internet is a massive secret polluter.

Internet usage releases the same level of greenhouse gases as all the world’s air traffic, and this figure is set to double by 2025! But, there are lots of ways we can reduce its impact and one of them is sustainable web design.

What is Sustainable Web Design?

Sustainable web design is building a site to ensure that it uses minimal energy and resources to load and run. A sustainable website follows some core principles which we’ll cover in this article.

But first…

What are the Benefits of Sustainable Web Design?

Lower resource usage and therefore lower greenhouse gas emissions are obvious benefits. But there are also big benefits for user experience and SEO.

The less resource-hungry your site is the faster it will load. This is a great thing for your site visitor, it reduces your bounce rate AND it keeps the search engine gods happy.

Win, win, win.

What are the Principles of Sustainable Web Design?

When building a sustainable website there are several key things you need to focus on. For example, the larger your website pages are the more power they need to load, in turn creating higher levels of emissions.

Here are the key things you need to know to build a sustainable website.

Optimise Your Website Images

It’s amazing how many websites we’ve audited that don’t have optimised images. We’ve seen web pages built with images as large as 10MB. When you consider that the ideal image size is less than 250kb this is huge and makes the websites incredibly heavy.

And as we’ve already said, a heavy site needs more resources to load. Not to mention that large images are incredibly slow to load.

But we won’t delve into image optimisation here as we’ve already covered it in this article ‘how to optimise your website images’.

One other thing to ask about images on your site is, does it even need them?

This may be a strange thing to say as a picture tells a thousand words. But if you’re using photos just for the sake of it can your site be bought to life with simple illustrations, or even just shapes and colour?

Limit Video Usage and Animation

Video is king, or queen, for both engaging and informing your visitor. But it is by far the most energy-intensive part of any website, so use it sparingly and with purpose.

The same goes for animation. Whilst not as energy-intensive as video it still demands a higher energy input than static elements. So only use animation to draw attention to key parts of your site’s design and guide visitors through the user journey.

Use Lazy Loading

Have you ever been on a site and as you scroll down new bits load? That’s lazy loading.

It’s a process where your site only loads the elements it needs for the part of the page your visitor is looking at. Meaning if they don’t scroll down your site hasn’t loaded lots of images and elements that will never be seen. Saving power usage and resources.

Use Web-safe Fonts

Custom fonts are an amazing way to help you stand out from the digital crowd. But custom fonts can be very weighty and need to be loaded when someone visits your site.

Web-safe fonts are already loaded into all digital devices so they’re the best option for a sustainable website build, even if they are very generic.

However, if you need a custom font to stay on brand and look great online then limit the number of fonts and weights you use. Also, make sure you optimise the font by compressing it to WOFF and WOFF2 formats.

Consciously Use Colour

You might not think colour has anything to do with sustainable web design, but it does.

To achieve bright colours your screen needs more power. This is why you may have seen more and more sustainable sites using ‘dark mode’. This is because black uses the least amount of energy to display. Interestingly, blue uses around 25% more energy to display than red or green.

Now we’re not saying you need to change your brand’s colour palette. It’s just something to think about when you’re planning colour usage and design on your site.

Easy and Clear User Experience

The more a user has to click around, opening and closing pages to get to the information they need, the more power they’ll use, and the more frustrated they’ll get.

Combining content into fewer pages reduces the number of pages a user visits, reducing resource usage.

It’s also good for SEO purposes. The longer someone stays on your page the more that tells search engines that your content is useful and interesting, meaning you’re more likely to be bumped up the rankings.

Ensuring that your site has clear calls to action, is uncluttered, and has an intuitive content and navigation structure means that the user journey is smooth and efficient.

Minify HTML, CSS and Javascript

Sites are built with code and sometimes there are elements of this code that load unnecessarily. This then creates extra requests to the server, using excess resources.

To clean up this code you can go through it manually or you can use minification plug-ins and software to do it for you.

Just be aware that sometimes minification will remove elements of the code that you actually need for your site to function and display. So always make sure you check your site in an Incognito window when you apply any minification to make sure it’s still displaying properly.

Green Website Hosting & CDN’s

Lastly, what’s the point in creating a sustainable site if you then run it on dirty energy?

To ensure your website is green from front to back make sure it’s hosted with a green hosting provider like The Green Hosting Company.

Their hosting plans are run on 100% renewable energy, they plant trees every month you host with them and they deliver your site through a content delivery network as standard.

A content delivery network aka CDN is a geographically distributed network of servers that work together to provide fast delivery of your website. This is important for sustainability as sending data around the world consumes a lot of energy. And the further the data has to travel the more energy it uses.

A CDN delivers your site from the closest server to the user, which not only speeds up the process, it also reduces the distance the files travel, reducing the energy used.