4 Ways to Practice Sustainable Web Design

Climate disruption is a man-made problem – what can we do about it as designers of digital spaces? A lot actually. Designers can make small changes in their day-to-day work that can have a big impact on reducing our burden on the web and nature.

According to Tyson Read, Director of Product Management, and Michael Weimann, Product Designer, the first step toward better, more sustainable web design is to equip yourself with knowledge and practices that you can pass on to others. They’re passionate about building sustainable digital products, and share four actionable ways to make your design efforts more sustainable:

  • Lighten images to reduce emissions

  • clean up your code

  • Make sustainable color choices

  • Choose eco-friendly fonts

They also believe that the sustainable web design space is ripe for innovation. “Creating a digital experience that directly responds to climate impacts will not only help address this issue, but also make it feel more immediate to anyone visiting the site,” Read said. “It’s an extraordinary example of good design.”

sustainable design

Apply design principles and best practices to the world’s most pressing challenges.

Lighten images to reduce emissions

If you focus on one thing, paying attention to how you manage images can have the greatest positive impact on the environment. Images and video require more energy to transmit and view than text. A Cisco report estimates that video traffic now accounts for 82 percent of all consumer internet traffic, up from 73 percent in 2017.’s online magazine, The Branch, innovates weight images on the web. Their website is designed to respond to the amount of carbon being generated on the grid. Dynamic website design accommodates lower energy intensity by loading images in black and white or skipping them entirely when using large amounts of fossil fuels. Read said they were thinking about design in ways he had never considered.

Here are some tips on how to reduce and compress images to reduce your carbon footprint:

  • Working with grayscale and monochrome images

  • Avoid image carousels as they impact CPU performance

  • Compress images using tools like TinyPNG or Image-Alpha

  • Doubling the width/height of an image more than doubles its size.Instead, generate multiple image versions for different layouts, and use responsive markup to inform the browser which image to load

  • Try the technique of applying a subtle blur to less important areas of the image, which can reduce the size of the overall image.First, watch this video by Una Kravets

  • Use Scalable Vector Graphics (SVG) to display vector graphics that can be scaled to high-resolution displays when needed

  • Consider more efficient image formats like WebP (~30% smaller than JPEG)

  • CSS sprites pull images into a single background image and “minify” your JavaScript and CSS files

clean up your code

Danny Van Kooten is a Dutch programmer who has made a big impact by cleaning up his code. He created a Mailchimp plugin for WordPress, then refactored his plugin in 2020, sending 20 KB less data per use. That’s not much, but at the scale of 2 million sites using Mailchimp, it adds up. He estimates that by cutting 20 KB of code, he is reducing the world’s monthly CO2 emissions by 59,000 kg. That’s almost the equivalent of flying from New York to Amsterdam and back 85 times.

Another option is to use Salesforce to help you achieve net zero operations. “If you design and build on the Salesforce platform, we have zero operations,” Weimann said. “That means we source renewable energy wherever possible and buy clean energy elsewhere to offset energy that we can’t source in real time. The goal is 24/7 renewable energy.” That said, many designers at Salesforce Offsetting your carbon footprint is more difficult in these projects. Even if your carbon footprint is zero, it’s best to reduce your carbon footprint and avoid offsetting in the first place.

Ways to reduce energy usage with less code:

  • Use shared codebases, frameworks, and declarative tools that will be optimized over time

  • Use Lightning Design System out-of-the-box solutions instead of creating custom solutions

  • Pay attention to metrics and emissions for central processing unit (CPU) usage and bandwidth, as CPUs and GPUs are energy intensive and should be throttled

  • Optimizing the Content Delivery Network

  • Use green web hosting services that use renewable energy instead of buying offsets. “Ultimately we want to decarbonize the grid/internet,” Read said.

  • Evaluate and re-evaluate your deployment footprint on a regular basis.

Make sustainable color choices

Since the internet was invented in 1983, it has become heavy with excessive code, oversized images, unnecessary pages, and more. Broad estimates that include all data centers, network equipment, and connected devices suggest that the internet’s total carbon footprint is 2% of global emissions. That’s about the same as the aviation industry’s fuel emissions, or entire countries like Canada or France. Color matters because the many screens on our smartphones, laptops and TVs light up each pixel individually.

In addition to draining our batteries and the environment, the accessibility of the colors you choose can also have a negative impact on users.

Here are tips for making low-energy and accessible color choices:

Choose eco-friendly fonts

Where you get your fonts from affects your carbon footprint. System fonts are native to the device, which means they load faster and use less energy to run. Webfonts are loaded from the Internet, but depending on where they are hosted can reduce their negative impact on the environment.

Michael shares ways to reduce energy use with web fonts:

  • Use directly hosted web fonts instead of subscription services

  • If you do use hosted web fonts, you should be aware of how much weights and styles you use, as each font file adds weights

  • You can get as much variety as possible by using variable OpenType fonts that allow users to scale the weight and slant of a single font file

Best Practices in Sustainable Design

Incorporate sustainable design into your work with simple tools and strategies.

Small actions make a big difference

The more we understand when it comes to sustainable web design, the better our world and user experience will be. Every action can start by picking up a book Sustainable Web Design Tom Greenwood and share your learnings with others. You can also educate yourself with Trailhead modules, books and sustainable design tools. We are all on this journey, which means small actions on a large scale can make a big difference.

Leave a Reply

Your email address will not be published. Required fields are marked *