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.
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.
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.
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
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.
Browse related resources by smart tags:
Digital engagement Environment Sustainability Sustainable Website Website accessibility
Please attribute as: "How to make your website better for the environment: sustainable website design (2022) by Katie Parry supported by The Heritage Fund, licensed under CC BY 4.0