To mark Earth Day, here's the first in our series, How to create a sustainable website. I'll cover coding, hosting, and how to create sustainable content in future posts, but let's kick-off with your website's design.

Here're a few practical things to consider with your web agency in terms of sustainable design – whether you're starting a new website project, or developing your existing site:

1. How many custom fonts are being used?
2. Does all visual content add value to the user?
3. Are user-journeys efficient?

1. How many custom fonts are being used?

A custom font is any font that's not already installed on a device as standard. (Those already installed are 'system fonts'. They include the likes of Ariel, Calibri and Verdana.) Every custom font on your website is an extra bit of code. And every bit of code increases the energy it takes for the site to work.

Unless your brand identity uses system fonts, you'll probably have custom fonts on your website. So one of the easiest ways to minimise the energy fonts use is to include as few – and as few weights – as possible in the design.

Different font weights can help audience's understanding of your content – using bold for important information, for example. So it may be useful to keep that. And if your identity uses a highly distinctive headline font, it can help audiences recognise your brand to include this in your website design. But maybe there is lighter weight alternative font you could use. Or nifty ways to re-use the same font in different ways across the site.

Keep the number of custom fonts to a minimum.

2. Does all visual content add value to the user?

Image-led – and increasingly video-heavy – websites are popular within the arts and culture sector. In many cases it makes sense that content is highly visual. But this means your website's using a fair bit of energy.

Simple images with few colours and a shallow depth of field are less energy-intensive than complex photos; with black and white imagery most energy-efficient.

Video is almost always the biggest energy-drain on a website – particularly autoplay video. It's best to avoid it but if autoplay video is right for you and your audience, be sparing with it. Perhaps it's a feature of your homepage but doesn't appear elsewhere on the site?

The same goes for animation. It can look great and add a level of sophistication and delight, but could the same or similar effect be created in a less energy-intensive way? And if you are using animation, make sure it's built in the most lightweight way.

I'm not expecting anyone to stop using animation, images, or video on their websites. But something practical you can do is consider the environmental impact of each piece of content before you upload it. If an animation tells your story, an image puts a face to a name, or a video helps audiences understand what to expect from their visit – grrrrreat! If it's just there to look nice, perhaps it's not needed?

Make every animation, image, and video on your website count.

Find more detail about creating visual content in the article, Sustainable content creation tips.

3. Are user journeys efficient?

When planning or refining key user journeys, it's worth remembering that shorter user journeys are appreciated by users, and reduce the amount of time a user spends on your website. In the context of sustainability, that's a good thing – though of course there's a balance to be found between this and meeting your business objectives.

Getting rid of barriers – such as pop-up banners, lengthy check-out processes, and hard-to-comprehend copywriting – leads to a more efficient user journey, therefore a more energy-efficient website.

It's particularly important to steer clear of 'dark patterns' which intentionally trick people into actions they may not have intended. (Such as auto-adding donations into baskets, or having confusingly-worded checkboxes within a sign-up process.)

Keep key user journeys short and unambiguous.

The great news is that lots of sustainability principles related to design also help to improve website accessibility, user-friendliness and performance. And that goes both ways – so the more of those things your website does well, the more sustainable it's likely to be too. Wins all-round.

In the next post of the series, Sustainable coding and hosting tips, I look at the technical side of things 🤓 – what it's useful to consider in terms of code, processes, frameworks, and services to help make sure your website is as sustainable as possible.

In the meantime, have a read of our Sustainability Pledge, find out what we're doing to become carbon negative – and sign-up to our Mailing List.