Mobile first
When it comes to design, we should be making sustainable choices from the outset. Consider the use of images and large graphics that could contribute to page weight. If possible, remove the use of stock images that provide little to no value.
Choose more efficient colors and provide a dark mode by default, which could reduce energy usage even further. Switching from light mode to dark mode at 100% brightness can save an average of 39%-47% battery power. Dark mode support has existed on the web since 2019 and should be taken into account.
Start with mobile-first and scale up if necessary, introducing design tweaks at bigger viewports. The Lowww Directory provides some real-world examples of sustainable design in practice without compromising on the design quality.
Introduce energy-saving toggles to adapt the design and turn on a low-carbon version of the website when the grid is at a higher intensity. By highlighting these options to the user, we can inform them and help them to make more sustainable choices. Boohoo and Herning.dk have both introduced this recently. There are tools such as the Carbon Intensity API and the Carbon Aware Software Development Kit (SDK). These tools allow you to pull information about the intensity of the grid in your location.
Last modified 1mo ago