-
-
-
5 design principles that make your website more sustainable
If the internet was a country it would be the 7th most polluting in the world, but we can change that. With just a few changes you can make your website more sustainable and thereby help to fight the still rising pollution. This article will tell you exactly what you can do to make your website more sustainable.
1# Resize images and make use of image formats such as WebP
One of the big sinners when it comes to websites are images and videos. An image that hasn’t been optimized for the internet can easily be 1MB to 5MB in file size, but if resized correctly and saved in a file format like WebP, then those same images can be as little as 30 to 40kb.
As you see, this is a big difference and it will not only improve the amount of data being downloaded every time you have a visitor, it will also improve the overall loading time since the amount of data needed is smaller. With the internet speed, we have today, it doesn’t make a big difference if an image is 40kb or 500kb, but in the eyes of pollution, the difference is big.
2# Simplify your web design and leave out the animations
As the internet becomes more and more popular so do the designs that we are using. This means our websites require more and more to run and this has an impact on the overall CO2 emission caused by the internet.
You have probably tried visiting a website and shortly after entering the page, you hear your fans start running (At least if you are using a Macbook). This means the website itself requires so much to run that your device is running hot just from showing it. Examples like these could be https://www.oculus.com/medal-of-honor/ which is built on three.js.
By simplifying your design you can help lower the CO2 emission since the devices viewing your website don’t require as much as if you were going all in and using all the power-hungry elements and packages you could find. If built correctly a simple design can make just as big an impact as one like the above-mentioned example.
3# Write custom CSS instead of using Bootstrap
CSS styling is nearly impossible to get around unless you are planning to host a raw HTML page, but there are many ways we can use CSS without it becoming a file size burden to the visitor. One of the ways we can minimize this is by customizing all styling instead of using Bootstrap and Semantic UI. By customizing you can write reusable styling, minimize it with a compiler and only write the styling that is necessary for your website. Writing custom styling is also making your website unique compared to others which often is an advantage.
4# Write vanilla JavaScript instead of using JQuery
It has been popular for a long time and is still used today, but maybe it is time to put JQuery and others on the shelf and start using plain Vanilla JavaScript instead. When we import such libraries we are downloading more data than is necessary and on top of that our browser has to read and understand more code than what is necessary for the website to show.
Writing JavaScript can take time and that is one of the reasons we started using JQuery for example. We were able to write more code in an easier way and in a shorter time, but it costs and the one paying is the overall CO2 emission both from the servers running the website and the visitors viewing it.
5# Implement a dark theme into your web design
Light and dark theme is getting very popular and more websites are implementing it so that visitors can choose for themselves how they want the page to look like. Using a dark theme has a positive impact both on the user and on the CO2 emission since there are over a billion mobile devices worldwide using OLED displays (2018 statistics). OLED displays only use power on the LEDs that require light or color, therefore if you have a black screen with white text, then most of the screen will be turned off.
If you want to further make a difference, you can choose the dark theme as the main theme and instead let the user choose the light theme. Many visitors won't care and therefore won't change the theme, so by choosing a dark theme first you can bring down your website's CO2 emission.
Author
Michael Andersen
Michael Andersen is the author of Sustainable Web Design In 20 Lessons and the founder of Sustainable WWW (World-wide-web), an organization teaching sustainable practices. With a passion for web design and the environment, Michael solves puzzles to make the internet more sustainable.
Michael Andersen
Michael Andersen is the author of Sustainable Web Design In 20 Lessons and the founder of Sustainable WWW (World-wide-web), an organization teaching sustainable practices. With a passion for web design and the environment, Michael solves puzzles to make the internet more sustainable.
