Positive Impact Design Logo
February 22, 2022
8 Mins

Sustainable Web design: The Ultimate Guide

At Positive Impact, our mission is to help fighting the most present issues of our generation, using our creativity and skills. This means we're here to help mission-driven startups scale and impact the world in a positive way, while making sure that the existence of their business doesn't actually cause more harm than the benefit their product offers. And when it comes to sustainability, an aspect is often overlooked: what impact does your startup's website actually have? 🤔

When you think of climate change and its causes, what do you picture? Perhaps you think of the aviation industry, deforestation or landfills… You probably wouldn’t  think about the Internet, would you? However, with over 4.5 billion internet users and almost 2 billion websites, the internet is in fact a huge carbon emitter. If the Internet was a country, it would be the 7th largest polluter. The truth is that website hosting and storing website data like images and videos burns a lot of energy. The Internet currently produces approximately 3.8% of global carbon emissions. This percentile is rapidly rising as we use the Internet more and more, and energy hungry web design additions developed with WebGL, parallax animations and AR experiences are growing in popularity and in weight.


Of course the internet isn’t just made of websites, but at Positive Impact Studio, we create a lot of those. So we feel a responsibility to commit to creating the lightest, fastest websites for our clients. This is something we feel isn’t discussed enough, so let’s find new more sustainable ways to build the internet together!


In this article, we will cover:

1) What is sustainable web design?

2) Why is sustainable web design important?

3) What are the benefits of sustainable web design

4) How To Make Your Website More Sustainable?

5) The future of the internet

6) See how your website impacts the planet

7) What you need to sell sustainable practices in your team or organization

8) More Resources


1) What is sustainable web design?


Tom Greenwood's Sustainable Web Design book
Sustainable Web Design by Tom Greenwood


“Sustainable Web Design is an approach to designing web services that put people and the planet first. It delivers digital products and services that respect the principles of the Sustainable Web Manifesto: clean, efficient, open, honest, regenerative, and resilient.”  
Tom Greenwood

 

Note, then,  that the term “sustainability” does not only include environmental consideration but economic and equity too. According to the UN World Commission on Environment and Development, “sustainable development is development that meets the needs of the present without compromising the ability of future generations to meet their own needs.” We need to make sure websites use the latest accessibility practices, consider the economic implications of web design and choose environmentally friendly practices to ensure our web is fair and as efficient as possible for all. 


Since the internet was only created in the 1990’s, and awareness about climate change has been slowly growing, the concept of sustainable web design is very new. In 2019, Wholegrain Digital, Mighty Bytes and some other environmentally conscious digital agencies created the sustainable web manifesto.

In the manifesto, they outline the mindset and principles web designers should keep in mind when building websites.

Sustainable Web Manifesto's landing page
Sustainable Web Manifesto landing page

2) Why is sustainable web design important


While the internet has provided countless benefits to society by helping us to compile the world’s information, help us to become more interconnected and democratize education, it has come at a huge environmental cost.


As mentioned previously, the Internet currently produces approximately 3.8% of global carbon emissions and while this figure 3.8% doesn’t sound a lot, but in the context of human population growth and Internet usage, this is a fraction of what it will be soon. The average internet website user is online for 5.5 hours a day. With human populations expected to grow 9.8 billion by 2050, and the number of internet users expected to be growing by 8.2% growth in the active internet users across the globe, it is vital to think carefully about how to make sustainable web design practices mainstream.

Number of Internet Users Worldwide (2006 to 2020)

While the number of internet users and the time spent on the internet is out of web builders hands, it is our responsibility, entrepreneurs, designers, engineers, developers, to make sure that we are thinking about making our products as sustainable as possible.

3) What are the benefits of sustainable web design

Benefits of sustainable web design on the environment

Future you sitting in a forest surrounded by animals, looking all happy and peaceful
You once you optimize your startup's website

Sustainable web design focuses on reducing the amount of energy websites need to perform. Now what can be done? What can drive such reduction? Web Neutral Project founder Jack Amend calculates that powering the average website produces 4,500 pounds of CO2 a year, equivalent to driving the average new car for more than 10,000 miles. This is an incredible amount because average websites are bloated with too many pages, unnecessarily large images, and hosted with a non-renewable energy host company.

Benefits of sustainable web design on accessibility

Nektarios Paisios from the Chrome Accessibility team
Watch Accessibility - The State of the Web

Although sustainable web design is often spoken about for its environmental benefits, part of sustainable web design is building websites that are accessible and inclusive. According to the world health organization, 15% of the population have some sort of disability so it is important to account design with this in mind. If best accessibility practices are employed when building websites, it helps every user’s experiences, regardless  of their disabilities the user experience of everyone regardless of whether they have a disability , or not., too! ie. Easy to use across different devices, ensuring colour contrast for legibility and by having accurate meta descriptions for partially sighted viewers. Google awards this too so it helps with SEO.

Benefits of sustainable web design on your business

Cutler Beckett: Just good business Meme Generator - Imgflip
It's just good business my friend!

Sustainable web design can impact your business for the  better - by streamlining your website, you are making page speed quicker which means customers are more likely to find what they came looking for quicker too, and visit less web pages in order to accomplish their tasks.stay on your website. 

As a result, less electricity is used for these.

Sustainable web design not only emits less carbon but it also benefits the user experience.

4) How To Make Your Website More Sustainable

Switch to green hosting

GreenGeeks landing page
This ☝️ is not a meme!

Web hosting providers have vast data centres full of computers that store and house website data. These generate so much heat from hosting that these data centres often use cooling systems just to keep temperatures manageable. Those that use 100% renewable energy to power these data centres are far more environmentally friendly than other hosting providers. 


Green Geeks hosting boasts to not only be the no.1 eco-friendly green web hosting provider but to also put back 3 times the power we consume into the grid in the form of renewable energy.


Check out some other competitor companies here.

Write copy concisely

If people try to find specific information by trawling through large paragraphs with no clear hierarchy for important information, they are wasting time and burning energy powering your unspecific website! Clear and efficient copy writing can help reduce wasted time on the internet and in turn reduce wasted energy.


Use good SEO practices

Good SEO practices reduce the amount of energy people consume browsing the web because they will find information quickly and easily. Optimize your website to rank higher in search to ensure people find the content they are looking for - otherwise, they may browse various websites before finding yours wasting valuable time and energy.



Good user experience (UX)

Make sure that your user gets from where they are to where they want to be in as few steps as possible. This will reduce friction for your user resulting in a more enjoyable experience but also ensure that your website doesn’t become bloated with unnecessary pages and content.


Optimize design assets

Reduce file size of images by using jpeg compression tools like compressjpeg and reduce dimensions where possible. An image that is 6000px x 2000px is going to take a long time to load and is unnecessarily large. Does your image need to be that large? Do you need many images at all? Ask yourself can the video format be changed (lower resolution) or whether you need videos at all too. 

Did you know that a vector graphic is lighter than an image with millions of pixels? When you can, use a vector to illustrate your copy if required, instead of a picture.


Write clean code

Clean code without unnecessary duplication and only necessary plugins will help keep load speed times down and decrease energy consumption.


Prioritize colours that use less energy

By reducing the amount of light colours you use in your web design, you can significantly reduce the amount of energy consumed by your website. With OLED screens which light up each pixel individually, using dark colours is favourable but if your design doesn’t work with dark colours, consider having a dark mode option.


Reduce custom fonts

Did you know that you can you can achieve a 60% reduction (298kb to 114kb) simply through loading a WOFF2 file over a TTF? Use the most recent and most efficient font format (WOFF2) to reduce load speed time and also use less energy at no discernible difference in clarity for the user.

Check out this article here to see an even more in depth set of recommendations



6) See how your website impacts the planet

Website Carbon Calculator landing page
Do not live in denial anymore, go and check how much carbon your startup's website emits!

Websitecarbon.com is an incredibly useful tool that very clearly illustrates the impact of your website. The adjacent figure is our very own results, which we know we 100% need to improve, and we're working on it very hard. But at least using this service lets your clearly see the tangible impact of your web presence, and it becomes that much easy to take actions by following our recommendations above!

Positive impact's website emissions
We've got some improvements to make!! 😨

7) More Resources

We didn't make anything up! We spend much time reading, watching and researching on this passionating and important topic, so here are the valuable sources we've learned from:


17 ways to make your website more energy efficient - Whole Grain Digital

Best green web hosting of 2022 - Tech Radar

The performance cost of custom web fonts, and how to solve it - Whole Grain Digital

Understanding Sustainable Web Design - Tim Frick

The Green Web Foundation

Web Hosting: Renewable Energy & RECs - Mighty Bytes

Measure, analyze and reduce your corporate carbon footprint with GreenFeet

Hit us up if you want to learn more, we have lots more resources to share!

xoxo the Positive Impact Studio team



follow the Author
https://twitter.com/lucielldesign
Lucie Le Liard,
Founder or Positive Impact Studio
& Brand Designer
want positive news in your inbox?
You'll receive occasional branding tips and resources to help you hack your startup growth, and news about what we've up to!
Thank you! See you in your inbox 🥰
Oops! It looks like something went wrong!