Blog

Sustainable web design tips

22 April 2021

To mark Earth Day, here's the first in our series of posts to help improve the sustainability of your 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?

Good design is as little design as possible

Dieter Rams
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', and include the likes of Ariel, Calibri and Verdana.) Every custom font on your website is a bit of code that adds weight; therefore 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, and italic for The Titles of Shows in body copy, for example. So it may be useful to keep those. And if your identity uses a highly distinctively headline font, it can help audiences recognise your brand to include this within your website design. But it may be that there are lighter weight alternatives 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 could 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.

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.

We must avoid design patterns that seek to lead the user on a longer journey in order to serve our own goals, and should always prioritize the true needs of the user

SustainableWebDesign.org

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 in the series, I'll 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.

Related Posts