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 by Cisco estimates that video traffic accounts for 82% of all consumer Internet traffic today, up from 73% in 2017.

Innovating on the weight of images on the web is an online magazine by called 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 there’s a lot of fossil fuels 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 of 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 has 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 Selling power 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 renewable energy and buy clean energy elsewhere to make up for 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 compensate for 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 personalized creation 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 about the same contribution as the fuel emissions of the aviation industry or the emissions of 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 have a negative impact on 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, sustainable design books and tools. We are all on this journey together, which means small actions on a large scale can make a big difference.

Comments are closed.