Leave No Trace Part II
How sustainable design practices can digitally reduce our carbon footprint.
By Ryan Hayen
Read the full article on our new website.
Original illustrations by Anna Alfut @alfutka
Since the impact of climate change affects people differently based on their economic status and their geography, we believe the inclusive design movement Microsoft helped champion in the past decade must evolve. Looking forward, it should grow to encompass sustainable design practices and elevate them to the forefront of our industry consciousness.
In our last post, we discussed the shrinking of the digital divide, and how our industry is presented with a troublesome dichotomy as more people come online. How can we support the livelihood and education of digital newcomers while mitigating the carbon emissions generated from increased usage of the tech industry’s apps, websites, and services?
To help, last year Microsoft Green Design Lab published our Green Design Principles, a toolkit that prompts product makers to think bigger before they start and build better by default. Sustainable software design is making its way to the mainstream as seen in tools that estimate the carbon impact of any URL, devices charging their battery based on renewable energy availability, and operating systems reporting on apps’ energy use. In Windows, the Energy Recommendations page in settings suggests configurations to reduce energy consumption and thus the carbon impact of your device. In the Microsoft 365 Emissions Impact Dashboard, IT admins can quantify greenhouse gas emissions associated with their organization’s usage of apps like Teams.
These in-product examples suggest that our industry is starting to bring climate accountability into product. Still, we must go farther. Our principle of ‘Build better by default’ asks individuals to consider the carbon impact of our choices throughout the design and development phases. It also proposes that we enable our customers to take control of the carbon impact from their experiences and devices. These two challenges present an opportunity to differentiate products and create new industry standards. For starters, here are some approaches and tactics to craft sustainable solutions down to the pixel and code level. We categorized them into two categories: optimized, and transparent & adaptable.
Optimized
If you were asked to predict the carbon impact of the digital experience you’re designing, you might respond with a shrug.
It’s an intimidating question because the impact of any one website, application, etc., is tied to the energy it demands, which quickly becomes opaque. To do so holistically, you must consider the energy required by the device to run the experience, the networks to send data back and forth, the servers to respond to requests and store data, and their various energy sources. Finally, the impact is of course compounded by the size of data transfer and how many people are using it!
Many of us are familiar with the “mobile-first” motto of the 2010s that led to the creation of new user experiences and tools for builders. In this movement, our motto can be “carbon-aware and low energy by default.” Though we don’t have everything in our toolkit for total transformation, there are approaches available today that’ll help us get started. But first, what does “carbon-aware and low energy by default” even mean?
“Carbon-aware computing” means shifting the computing tasks of your digital experience to times and regions where renewable energy sources (wind, solar, etc.) are more plentiful, and falling back to dirtier sources when forced (as defined by the Green Software Foundation). Want to integrate this into your experiences? GSF released a software development kit to help you make this a reality! More on carbon-aware computing later.
“Low energy by default” describes an experience that can scale down its energy demand to an absolute minimum while still allowing core information and value to be exchanged.
These scenarios could happen in areas with low/no power or poor connection, or other cues, enabling more resilient and inclusive experiences. Here are some tactics for teams to get started down the path of creating low-energy defaults.
1. Better data hygiene
Are you asking people for pieces of personal info that never serve an actual purpose in the UX or business? What user activity data are you archiving past the point of it being useful for either party? Periodically, teams should delete what’s obsolete to reduce impact.
Through product telemetry you can identify problems people are experiencing that could be causing additional page reloads or data downloads and work to eliminate them. At the same time, setting up excessive amounts of telemetry creates its own carbon impact. Product teams should continually revisit what telemetry is needed to accomplish their goals, as opposed to always collecting as much as possible.
2. Network download benchmarking
You can see the download size of any webpage by checking the ‘network tab’ in your browser’s developer tools (right-click > inspect > network). Use that to create benchmarks for individual or average page weights and download times. But what should you compare your site to? Simply aiming for improvements in your own download time and sizes is a great place to start. Or you could compare against a competitor, in combination with looking at your “core web vitals,” which are concrete performance measurements tied to speed.
A designer could lead a sustainability drive in their company by gathering this info, implementing, measuring improvements, and translating the savings to Co2 amounts using online calculators. The outcome of this work would be an actual reduction in their organization’s carbon impact!
3. Shortening user journeys
Cumbersome interaction models that demand more time have the potential to generate a large carbon impact. Such scenarios often arise from rushed design or engineering decisions, copying what competitors are doing, and code frameworks that place a higher demand on the device’s CPU.
There’s a recent e-commerce trend of “product pre-detail pages.” These pages often appear when you’ve clicked through from a third party. They show a small amount of product info and require a second click to get full details while tossing up a ton of related products. In fear of you leaving, the company has increased its carbon impact. Teams that level up their digital sustainability acumen are poised to intervene in this product decision.
When working on apps bound by legacy back-ends, which are prevalent in industries like finance or travel, it may make sense to ask users to ‘do more’ upfront to reduce the quantity of more expensive computing roundtrips of the data between device, network, and server.
In either case, the point is that sustainable design doesn’t end when Figma designs are delivered. A tight partnership between design and engineering is needed to move from principle to practice.
4. Green hosting
Look into whether your current provider is using or funding renewable energy sources or buying carbon credits. The Green Hosting Directory, run by the Green Web Foundation, is a good place to start. While all providers rely on a mix of energy sources since renewable is not always available, using a host that makes an effort is an easy way to reduce impact.
5. Images
Aim for a more judicious use of large rich images. Ensure that they’re optimized for size and format. The download of one image across all your visitors can have a real impact. The WebP or AVIF file format provides smaller data sizes when compared to JPGs, while PNGs or GIF formats can be great for icons and logos.
In HTML, images can be set to lazy load, which means that the browser will wait to load any off-screen images until they’re scrolled into view. Taking it further, one could imagine a browser feature where people can control if they allow images to be downloaded on a particular site.
Consider what would be the low-impact medium for your message. An MP4 video file can be more efficient than an animated GIF! Despite the notion of an image being worth a thousand words, sometimes great typography and copywriting can carry equal weight, while also providing a better fallback for slower download speeds.
6. Video
The Carbon Trust says the average European impact of an hour of video streaming is 55 g CO2, equal to driving a car about 300 km or one-fifth of a mile. As we know, factors include the delivery network, the efficiency of your viewing device, and the energy source. Industry players point to those factors or compare them to emissions of other common activities to downplay their role and deflate action.
There certainly are bigger global challenges the world must solve when it comes to climate change. It isn’t debatable, however, that video often has a higher carbon cost than other forms of digital media, and meaningful change will require efforts across many different aspects of modern life, big or small.
Video is vital for human communication, and we shouldn’t wish it away. Yet, we’re constantly bombarded by it — whether in the form of an endlessly scrolling social media feed, or an auto-playing ad on a news site.
We should seek ways to curb the energy enthusiasm of video. Could a video playing in a background browser tab only transmit the audio while out of sight? What speedbumps could be put in place to encourage a break after certain amounts of social media consumption? What can technologies like SVG, or WebGL do to step in and help achieve a more immersive experience while also supporting a lower-energy default?
7. Fonts
Fonts are a common culprit for increasing data loads since many non-system fonts must first be downloaded by the machine to be rendered. Are you making the device download an entire font package or a set of weights that are only being applied to a few words?
Reconsider using ‘system-UI’ font styles when possible. It will not require a download but will provide fast performance and will look good on the device using a native font like Segoe, San Francisco, or Roboto.
For more styled fonts, reach first for a variable font. Variable fonts allow you to render a wide variety of finely tuned styles (regular, italics, bold, etc.) using a single font file. They can be smaller than the multiple files required in traditional implementation and offer you greater flexibility.
8. Color
Color usage can also make an impact on the energy efficiency of a person’s device. Darker colors or night modes tend to require less brightness from the device, so it’s good practice to make them available. As OLED (organic light emitting diodes) becomes the standard for displays, ‘true black’ will be used as a color. Pixels set to it will be turned off, requiring no energy to display.
Transparent & adaptable
Currently, carbon-aware computing is defined as a technical backend effort, without any user interaction or awareness. It’s focused on larger batch processes that don’t necessarily impact the user experience in real time. While doing things on behalf of a user or device to reduce the impact is critical, are we missing an opportunity to include consumer choice and action as a part of the definition?
Creating transparency
Refrigerators have energy ratings, and cars report their fuel economy, both of which help people make a purchasing decision. Why don’t digital products and services have an equivalent?
A. Digital experiences should have built-in transparency and control features or processes that impact their carbon contributions. Doing this would empower consumers to fine-tune energy settings to match their lifestyle values.
B. In the browser, where sixty percent of time is spent on a PC, we could calculate a carbon estimate of a browsing session, report on specific sites, and offer an eco-view mode where intensive processes and media are paired down.
The mode could be paired with other tactics such as search index ranking to influence industry behavior and accountability — like the requirement for websites to have SSLs in 2017.
Pushing for adaptability
Think of carbon-aware computing as a sort of ‘responsive design’ for energy availability. Automatically scaling up or down the complexity of content and features based on the amount of renewable energy available at a given time will be met with resistance by end-users and companies. It rubs against the ‘more is more’ routines we’ve strengthened over the past two decades.
I. Adaptability requires that people always understand why and how their experience has shifted, and that they have autonomy over it.
II. Any backlash will fade as the practice becomes standard. In the end, people will feel more empowered over their devices, and companies will maintain a more resilient connection with their customers.
A turning point
Tech’s relationship with climate is at a turning point. With the new era of AI upon us and its insatiable need for data and computing power, the focus on our industry’s planetary impact will sharpen. As we elevate carbon-aware computing to the forefront of the design consciousness, we should avoid displacing all responsibility for action onto individual consumers, as opposed to the system itself. Some might say we should focus exclusively on the system, but if we don’t invite our customers along for the ride, will we be motivated or held accountable for the change needed for a sustainable future?
