4 quick ways to improve your digital product’s sustainability creds
by Imogen Lees ✦ 15 June 2022 ✦ 4 Min Read
When we decided to give our brand a wee makeover earlier this year, one of the key considerations was our carbon footprint. Having a website that was 57% dirtier than the rest really conflicted with what we stand for as an agency. Looking at both our brand and website gave us loads of opportunities to improve our sustainability creds, ultimately putting Planes in the top 28% of websites tested through carbon calculator.
Not everyone has the luxury to rebrand and rebuild simultaneously. We’ve created a list of 4 things you can do now to reduce your site’s CO2 emissions whilst simultaneously improving your UX (thanks to faster load times and content on-demand).
Find alternatives to video content
The number one culprit of energy consumption on the internet is nearly always video. Yet it’s becoming more popular every day. Features like autoplay and continual loops require even more bandwidth to deliver content that the user doesn’t necessarily want to see.
The first thing to do is a quick audit of your website to determine which of the moving content is really needed. Ask yourself, is the video distracting the user from their original objective? Does any data support the success or impact of the moving content?
Once you’ve established the role video is playing, you can begin to explore more environmentally-friendly ways to provide the necessary information or impact. For example, can you compress any must-have video content without compromising quality? Could you use HTML and CSS to create animations that don’t require the bandwidth of traditional files?
Fall out of love with custom fonts
Did you know that even something as simple as a typeface impacts your CO2 emissions? Granted, it’s not as big an impact as pics and vids, but reassessing your font choices can still make a difference.
For starters, a custom font can clock up to 250kb. And that’s just for the one weight. However, using system fonts saves users from downloading additional files because your typefaces are already installed on their devices. It‘s a win for the environment and UX, thanks to faster page loads.
Pro tip: some of the newer web fonts also offer better compression methods, which is another great way to reduce your digital carbon footprint.
Images don't always need to be in 4K
Like videos, images also have the potential to weigh heavy on your website. Luckily, there’s a lot you can do to help lighten the load without compromising the UX.
Firstly, focus on using smaller imagery wherever possible, and be sure to scale visuals for the device it's being viewed on. If your site supports UGC, having a CMS that automatically resizes any pics uploaded by your fans and followers will improve energy use and load times (noticing a theme here?). And bonus points if your CMS converts uploaded images to more energy-friendly types such as .avif, HEIF and WebP. We use DatoCMS as it supports more sustainable file types.
Remember, images with a lot of colour and detail make for larger file sizes, so choosing a shallow depth of field and using black and white visuals can really make a difference to your website’s carbon footprint. You could also consider using alternative formats such as SVG and CSS files to keep it lean. We've also tried saving some bandwidth on our own website with lazy loading, which means your site will only download content when your user scrolls down the page.
Go green with your colour choice
Another key consideration for sustainable web design is your colour palette. Because some shades are simply more energy-efficient than others. Take black, for example.
With the rising popularity of OLED screens (screens that light up each individual pixel as opposed to the whole screen in one go), black has become the single most sustainable colour. This is because it requires the least amount of energy to illuminate. And yes, that means white is the opposite, so it's worth considering your use of white space. Pauses while you switch your mobile device to dark mode to save the environment (and your battery life).
When it comes to primary and secondary colours, blue pixels use about 25% more energy than green or red. That said, even if your brand is heavy on the blue, updating your web’s background and font colours can help lighten the carbon load. Just be sure that the colour combination you land on still passes the accessibility test - we like using the Figma plugin Contrast to check.
To get your site as green as possible, the best approach will always be to make sustainability part of the brief: Mother Nature as a stakeholder. But for those with limited resources, time or budget, reassessing your video, imagery, colour palette, and fonts is a great place to start.
Not only will they make a difference to your carbon footprint, but they can also deliver a better, more inclusive user experience. How so? Because lightweight websites can run on older devices, and a faster load time (read: reduced data) means your product becomes more accessible for people living in data poverty.
From a commercial point of view, you’ll likely end up with an improved CX, which goes hand in hand with improved conversion rates. And reducing your website data can also lead to reduced hosting costs.
TL;DR: a sustainable website is good for the environment, good for your customers, and good for your business.
