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

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’. 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.

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.

This resource was first published on the Supercool blog.

More help here

How to make your website better for the environment: coding and hosting

Katie Parry from digital agency and arts sector specialists, Supercool, gives practical tips to help you reduce your website’s energy consumption.  In this resource, Katie looks at the impact coding and hosting can have on your website’s carbon footprint and what you can do to reduce this impact. This resource was first published on the Supercool blog.

 

How can we measure our current environmental impact?

The adoption of new technologies may support your initiatives to ‘go green’ and reduce your environmental impact. Which are the key areas to focus on that will enable your organisation to become more environmentally sustainable? This guide explores where the biggest impacts may be felt for your organisation and what methods you might use to measure your existing environmental footprint.

 

How to improve your website to make it more user friendly, accessible and fit for purpose

How can you engage all your users and give everyone the best experience? Do you want to make your website accessible to people with disabilities and comply with the current legislation? How can you make sure that your website is offering the best user experience? In this practical resource, Paul Blundell gives you the tools to audit your website and fix any issues you may find.

 

Except where noted and excluding company and organisation logos this work is shared under a Creative Commons Attribution 4.0 (CC BY 4.0) Licence

Please attribute as: "How to make your website better for the environment: sustainable website design (2022) by Katie Parry supported by The National Lottery Heritage Fund, licensed under CC BY 4.0