Salesforce com: 4 Ways to Practice Sustainable Web Design


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

Tyson Read, Director of Product Management, and Product Designer Michael Weimann believe that the first step to better, more sustainable web design is to equip yourself with the knowledge and practices you can pass on to others. They are passionate about creating sustainable digital products and share four concrete ways to make your design work more sustainable:

  • Brighten 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 responds directly to climate impacts not only helps solve the problem, but also makes it more immediate for anyone who visits this site,” Read said. “It’s a phenomenal example of good design.”

Design for durability

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

Brighten images for fewer emissions

If you’re focused on one thing, being mindful of how you handle images could have the biggest positive impact on the environment. Images and videos require more energy to transmit and view than text. A report from Cisco estimates that video traffic accounts for 82% of all consumer internet traffic today, up from 73% in 2017.

Innovating the Weight of Images on the Web is an online magazine from called The Branch. Their site is designed to react to the amount of carbon produced by the power grid. The site’s dynamic design adapts to consume less power by loading black and white images or skipping them altogether when lots of fossil fuels are in use. Read said they were thinking about the design in ways he never considered.

Here are some tips for shrinking and compressing images to reduce their carbon footprint:

  • Use grayscale and monochrome images

  • Avoid image carousels as 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 let browsers know which image to load.

  • Try techniques to apply subtle blurring to less important areas of an image, which can reduce the size of the overall image. To get started, watch this video by Una Kravets

  • Use scalable vector graphics (SVG) to display vector images that can scale to high-resolution displays when needed

  • Consider more efficient image formats like WebP (about 30% smaller than JPEGs)

  • CSS sprites combine 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 plugin for WordPress, then in 2020 he refactored his plugin to send 20KB less data each time he used it. It’s not a lot, but at the scale of 2 million sites using Mailchimp, it adds up. He estimates that by removing 20 KB of code, he reduces monthly global CO2 production by 59,000 kilograms. It’s almost the same as flying from New York to Amsterdam and coming 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, our operations are net zero,” Weimann said. “That means we source whatever renewable energy we can and buy clean energy elsewhere to offset what we can’t source in real time. The goal is 24/7 renewable energy. .” That said, many 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 still best to reduce your carbon footprint and avoid having to offset in the first place.

Ways to reduce power consumption with less code:

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

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

  • Pay attention to metrics and emissions related to Central Processing Unit (CPU) usage and bandwidth, as CPUs and GPUs consume a lot of power and need to be throttled

  • Optimizing Content Delivery Networks

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

  • Evaluate and re-evaluate your deployment footprint regularly.

Make sustainable color choices

Ever since the Internet was invented in 1983, it has become cumbersome with excessive code, oversized images, useless pages, and so much more. A broad estimate that includes all data centers, networking equipment and connected devices puts the total carbon footprint of the Internet at 2% of global emissions. This is roughly the same contribution as fuel emissions from the aviation industry or emissions from entire countries like Canada or France. Color plays a role because many screens on our smartphones, laptops and televisions illuminate each pixel individually.

Beyond draining our battery and the environment, the accessibility of your color choices can also negatively impact users.

Here are some tips for making energy efficient and accessible color choices:

Choose eco-friendly fonts

Where you source your fonts can make a difference to your carbon footprint. System fonts are native to devices, which means they load quickly and require less power to run. Web fonts are loaded from the Internet, but depending on where they are hosted, they can reduce their negative impact on the environment.

Michael shares ways to reduce power consumption with web fonts:

  • Use directly hosted web fonts as opposed to subscription services

  • If you are using hosted web fonts, you should be aware of the number of weights and styles you are using, as each font file adds weight.

  • You can get as many variations as you probably need by using variable OpenType fonts that allow users to scale the weight and slant of a single font file.

Best Practices for Sustainable Design

Use simple tools and strategies to integrate sustainable design into your work.

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 counts. You can start by taking the book Sustainable web design by Tom Greenwood and share your learnings with others. You can also train with Trailhead modules, books and sustainable design tools. We are all on this journey together, which means small actions on a large scale can make a big difference.


Comments are closed.