Centre • Bath
What is sustainable web design?
Since the day we opened our doors, Gather Round has proven itself to be an attractive space for the community in Bristol working to tackle one of the biggest challenges of our time: the climate emergency. Already home to a brand new sustainability consultancy, Twelve Futures, and a thriving ethical marketing agency, Enviral: the latest innovation in this sector within the space has been masterminded by Fiasco Design’s Creative Technologist, Nick Lewis.
Nick founded The sustainable.dev, a resource and community hub to promote greener web development practices in July 2020, after he too felt like he could do something to turn the tide. But what is sustainable web design, and does it really mean a greener future for humanity? We asked him to explain what exactly makes an eco-friendly website, and how all developers can use basic practices to reduce the ever-growing environmental footprint of the behemoth that is the internet.
The state of the web
The problem with the internet is its impact just isn’t tangible to the individual in the same way as the other big polluters are. For example, we all know that jet setting around the world releases huge amounts of carbon into the atmosphere. But shopping online, reading news articles, connecting with friends on social media? As individual users, we don’t feel these daily activities are having an impact on the health of our planet. But with 1.7 billion websites online, all of which use electricity still largely generated by fossil fuels to process the large amount of data they are sending and receiving, the cumulative impact is staggering. In fact, if the internet was a country, it would be the world’s sixth-biggest polluter.
What makes an environmentally-friendly website?
An eco-friendly or sustainable website is one that aims to use the smallest amount of energy possible, both on the server it uses but also on the user’s device. It aims to use only necessary imagery, and for that imagery to be well-optimised. It also aims to load quickly, be easy to navigate and be found in search engine results. All in all, a sustainable website has the same aims as any other well-performing website.
How do you go about creating an eco-friendly website?
Creating a sustainable website can be very simple. In theory, all you need to create a website is HTML, CSS and maybe Javascript. If you don’t need a Content Management System like WordPress or Craft, then avoid using one. That way you already avoid additional coding languages and files needing to be loaded to run the website.
Where you do need a CMS, choose one that allows you to reduce the content being loaded on the front-end for users. If you’re using a stock theme on WordPress, try and find one that offers exactly what you’re looking for, but nothing additional. There are many bells and whistles themes out there, but they are unnecessarily heavy – and can be very slow to load.
If you’re coding from scratch with a CMS, learn how to minimise what gets loaded onto the front-end for a user, removing additional CSS or Javascript if it is not needed to run your custom theme or website functionality.
How to make an existing website sustainable
There are a number of things that can be done to make an existing website more sustainable. Whether they use a CMS or not. Here are five of the most important.
1. Move your website onto Green hosting – run with proven renewable energy.
2. Optimise images, reducing the dimensions to match the maximum size they are displayed at. Compress the images and choose the correct file type (jpg is better than png for example and gifs are a no no)
3. Remove any autoplaying video. If you cannot remove the video completely, stop it from autoplaying and put the user in control of playing and pausing to save bandwidth and the user’s device having to download the video before it autoplays
4. Remove unnecessary code where possible, Javascript libraries like JQuery especially
5. Remove scripts that constantly track or watch user interaction
There is a great deal more you can do to make your website greener. Many will seem small and only make minor differences, but every byte counts.
For example, if you have an animation on your website that is currently using a Javascript library but could be coded with CSS, then choose CSS every time. CSS is more efficient, and it means you don’t need to load any additional Javascript libraries – which will increase the overall size of the page needing to be downloaded.
Another suggestion would be to limit custom web fonts where possible. It is unlikely that you will get away with not using any, as we are in a brand-led world where companies want to use their fonts to reinforce their brand identity on the web. But, you could look at reducing the number that you use. Simplifying the brand usage, or removing the Bold or Italic versions of the font if they are not needed.
Lastly, you could think about the overall design of the website. I’ve already mentioned about reducing the size of images, but what about reducing the number of images overall? When designing a website, think to yourself whether that full bleed image really adds value, or if it is purely there for aesthetics. If it doesn’t add value, remove it. Use words instead. Another design consideration that is coming back to the forefront is using a ‘dark mode’ version of the website. Using darker colours on websites was originally designed to minimise the energy usage of CRT screens, when Plasma and LED came around this was less of a concern as they were lit differently. However, now that OLED is firmly integrated into many devices like smartphones, this method is now again useful – due to the screen being lit by hundreds if not thousands of individual LED lights. Meaning the less ‘light’ needed to show content means the less power is consumed by that device.
–
For more tips and technical guidance, sign up to the sustainable.dev, and join the community on a mission to promote a greener, low-impact future for the internet.
