The Green UX Checklist

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?

A Likely Story

Once a website is complete and the dust has settled, there are many great tools we can use before launch to make our websites faster. Google’s PageSpeed Insights and Pingdom Tools, just to name a few provide invaluable insight into how you can optimize your code and your server configuration for faster load times, and their suggestions should be taken to heart. However, their suggestions are only technical in nature. They don’t include much insight into how you can design more efficient websites that will have inherently reduced impact on the environment.

A New Approach

The realization I’ve come to over the past few years is that the best way to make a website green is to consider its environmental impact before starting its design, and to keep it mind throughout the design process. To help you do just that, we are sharing a short list that we compiled in 2018 of six things we can all do to change the way we design, develop and maintain websites for a more sustainable web. It’s highly untechnical, and mostly no nonsense, which I hope you’ll find to be a breath of fresh air.

The 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. Try to reduce the number of images in your designs because fewer images means less data to download. For the images you do need, make sure they’re saved out 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.

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. 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 watch it, 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. 🙂

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 Univers family (~44 faces!). 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.

4. Recycle Assets

Sometimes you can get away with reusing the same image or video over and over again in different ways without it feeling repetitive. For example, you can use CSS3 filters and overlay techniques to make variations of images on the fly. One such 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 put a colored overlay on top of it. In the past that would mean you needed three different image files!

Bonus: It works on video too!

5. Use Green Hosting

One of the biggest ways you can reduce your website’s environmental impact is to switch to a green host: usually that means a host powered by sustainable energy sources like geothermal or hydroelectric power. It’s not always easy convincing a client to go green. For example, some organizations require that their data be stored within their own country, but if you can make the switch to a green host, go for it. You can find a list of green hosts around the world at The Green Web Foundation.

Bonus: If you can find a server that’s both green, and physically close to the majority of your audience, then it will be even more efficient, because it requires more energy to send data over a greater distance.

6. Use Optimization Tools

I know I said this list would be non-technical, but you if you’ve come this far in designing and building an amazing, efficient website, you owe it to yourself to run it through a performance test anyways.

Bonus: See how page load speeds differ by testing from different locations around the world using Pingdom Tools. Transmission distance does have an effect on performance.

We’re very happy to share this checklist with you. Remember that building a greener web, and building a visually-rich web don’t have to be mutually exclusive.