Designers are a passionate bunch when it comes to producing beautiful, functional things, and that passion for design sometimes makes it easy to forget everything else. Performance considerations are often the first to get benched when they’re trying to knock people’s socks off, and as a result, the modern web has become a bloated beast of HD videos, high-resolution images, and webfonts up to your eyeballs.
When was the last time you saw a website with no pictures on it? This visual overload can significantly impact load times and energy consumption, making the web less efficient and less sustainable. Therefore, balancing aesthetics with performance and incorporating sustainable and green UX principles is crucial for creating a better user experience and a greener web. By optimizing resources and focusing on eco-friendly design practices, we can ensure that digital experiences are not only stunning but also environmentally responsible.
Sustainable UX/ Green UX Checklist
1. Reduce Images
Images are the original performance hog. You may or may not be aware that the original internet was nothing but text. The advent of images on the web—even tiny ones—had a big impact on performance. Our computers and connection speeds are way faster now, but the faster they get, the bigger our screens and our images get, so images continue to be a burden. To support sustainable and green UX, try to reduce the number of images in your designs because fewer images mean less data to download. For the images you do need, make sure they’re saved at the smallest size you can tolerate, both in terms of resolution and image quality.
Bonus: Serve multiple image sizes based on device size for even more savings. By optimizing image use, you contribute to a more eco-friendly web that balances visual appeal with performance and sustainability.
2. Optimize Videos
As if still images weren’t bad enough, video has spread like wildfire across the internet. In recent years, it has become very easy to implement, not just as standard embeds on a page, but as fancy dynamic background content as well. It’s seriously everywhere, and far too often these videos are much higher quality and size than is necessary for the given situation. To support sustainable and green UX, make sure your videos are as brief, low resolution, and as compressed as possible. Another big waste is forcing someone to watch your video if they don’t want to, so leave that choice up to the visitor if you can.
Bonus: If you’ve got mad video skills, you might be able to make a small seamless video loop for ambient use like we did for this geothermal steam. If you watch closely, you’ll see it loops every four seconds… and yes, this example is autoplay, but it’s also highly efficient. You get to break the rules once you know them. By optimizing video content, you help create a more eco-friendly digital environment that balances engaging visuals with performance and sustainability.
3. Use fewer fonts
I appreciate good typography as much as the next designer, and I love snooping through what cool fonts people are using in their projects. BUT, sometimes we get carried away. For instance, we might not need to include the entire Universe family (~44 faces!). To support sustainable and green UX, consider reducing the number of web fonts and styles used in your project. Usually, when it comes to fonts, less is more anyway.
Bonus Challenge: Why not try to design a modern website using only classic system fonts? Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, and Comic Sans—just kidding! Nobody likes Comic Sans. By simplifying your font choices, you can improve load times, reduce data usage, and create a cleaner, more efficient digital experience.
Read – 5 Eco-Friendly Fonts for Sustainable Web Design
4. Recycle Assets
Sometimes you can get away with reusing the same image or video in different ways without it feeling repetitive. For example, you can use CSS3 filters and overlay techniques to create variations of images on the fly. One technique we often employ is to serve a full-color image once, but through the power of CSS, convert it to black and white or add a colored overlay. In the past, this would have required three different image files!
Bonus: This technique works on videos too! By reusing media elements creatively, you can reduce data usage and enhance the sustainability of your digital designs.
5. Use Green Hosting
One of the best ways to make your website eco-friendly is to use a green host, which is a host powered by sustainable energy sources like geothermal or hydroelectric power. It’s not always easy to convince a client to go green, especially if their data needs to stay in their own country. But if you can switch to a green host, do it. You can find a list of green hosts at The Green Web Foundation.
Bonus: If you can find a server that’s both green and close to most of your audience, it will be even more efficient because sending data over shorter distances uses less energy.
We’re very happy to share this checklist with you. Remember, building a greener web and creating a visually rich web don’t have to be mutually exclusive. By following these guidelines, you can design beautiful, functional websites that are also environmentally friendly.
