4 Ways You Can Practice Sustainable Web Design

Climate devastation is a human-made problem – as designers in the digital space, what can we do about it? A lot, actually. Designers can make small changes in their day-to-day work that can have a big impact on lightening our load on the web, and mother nature. 

Tyson Read, Director of Product Management, and product designer Michael Weimann believe the first step toward better and more sustainable web design is equipping yourself with the knowledge and practice you can pass on to others. They are passionate about building sustainable digital products and share four actionable ways to make your design work more sustainable:

• Lighten images for fewer emissions
• Clean up your code
• Make sustainable color choices
• Choose eco-friendly fonts

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

Lighten images for fewer emissions

If you focus on one thing, being mindful of how you manage images could have the biggest positive environmental impact. Images and videos take more energy to transmit and view than text. A report by Cisco estimates that today video traffic represents 82% of all consumer internet traffic, which is up from 73% in 2017. 

Innovating on the weight images have on the web is an online magazine by ClimateAction.tech called The Branch. Their site is designed to react to the amount of carbon the electrical grid is producing. The dynamic site design adapts to be less energy-intensive by loading images in black and white or skipping them entirely when there are a lot of fossil fuels being used. Read said they’re thinking about design in ways he never considered.

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

• Use grayscale and monochrome images 
• Avoid image carousels because they impact CPU performance
• Compress images with tools like TinyPNG or Image-Alpha
• Doubling an image in width/height more than doubles its size. Instead, generate multiple image versions for different layouts and use responsive markup to inform browsers of which image to load
• Try techniques for applying a subtle blur to less important areas of an image which can reduce the size of the overall image. To get started, check out this video by Una Kravets
• Use scalable vector graphics (SVG) to display vector images that can scale to high-resolution displays when they need to
• Consider more efficient image formats like WebP (about 30% smaller than JPEGs)
• 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 made a big impact by cleaning up his code. He created a Mailchimp plug-in for WordPress and then in 2020 he refactored his plug-in to send 20 KB less data for every use. That isn’t much, but at the scale of 2 million sites using Mailchimp, it adds up. He estimates that by cutting 20 KB of code, he’s reducing the world’s monthly CO2 output by 59,000 kilograms. That’s almost the same as flying from New York to Amsterdam and back 85 times.

Another option is using Salesforce to help you get to net zero operations. “If you design and build on the Salesforce platform, our operations are net zero,” Weimann said. “It means we source what renewable energy we can and purchase clean energy elsewhere to offset what we can’t source in real-time. The goal is 24/7 renewable energy.” That said, plenty of designers work on projects that use custom code outside of Salesforce where it’s harder to offset your carbon footprint. Even if you’re net zero, it’s always better to shrink your carbon footprint and avoid needing to offset in the first place.

Ways to reduce energy use with less code:

• Use shared codebases, frameworks, and declarative tools that will optimize over time
• Use Lightning Design System out-of-the-box solutions rather than creating custom solutions
• Pay attention to the metrics and emissions around Central Processing Unit (CPU) usage and bandwidth because CPUs and GPUs are energy-intensive and should be limited
• Optimize Content Delivery Networks
• Use green web hosting services that use renewable energy as opposed to buying offsets. “Ultimately we want to decarbonize the electrical grid/internet,” Read said.
• Evaluate and re-evaluate your deployment footprint regularly.

Make sustainable color choices

Since the internet was invented in 1983, it has gotten heavy with excessive code, oversized images, unnecessary pages, and so much more. A broad estimate that includes all data centers, networking gear, and connected devices put the total carbon footprint of the internet at 2% of global emissions. That’s roughly the same contribution as the aviation industry’s fuel emissions or emissions from entire countries like Canada or France. Color plays a role because many of the screens on our smartphones, laptops, and TVs light each pixel individually.

Beyond the drain on our battery and the environment, the accessibility of your color choices can also have a negative impact on users. 

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

• Use darker colors when possible because they don’t require as many pixels to be illuminated
• When lighter colors are required, consider ways to lower the energy impact of your design
• Familiarize yourself with the Web Content Accessibility Guidelines
• If designing in Figma, check out accessibility plug-ins like Contrast Checker and Able
• Educate yourself about color blindness and redesign based on learnings

Choose eco-friendly fonts

Where you source your typefaces can make a difference in your carbon footprint. System fonts are native to devices, which means they load quickly and take less energy to operate. Webfonts are loaded from the internet, but depending on where they are hosted can reduce their negative environmental impact.

Michael shares ways to reduce energy use with webfonts:

• Use webfonts hosted directly as opposed to subscription services
• If you do use hosted webfonts, you should be conscious of how many weights and styles you use because each font file adds weight
• You can get as much variation as you likely need by using variable OpenType fonts that allow users to scale the weight and slant of a single font file

Small actions make a big difference 

When it comes to sustainable web design, the more we know, the better our world and user experiences will be. Every action matters. You could start by picking up the book Sustainable Web Design by Tom Greenwood and sharing your learnings with others. You can also educate yourself with Trailhead modules, books, and sustainable design tools. We’re all on this journey together, which means small actions at scale can make a big difference.