Skip to main content

Sustainability

Our mission at Schneider Electric is to sustain resources and reduce CO2 emissions, including through the way we build our digital solutions. Together we can create a greener planet by making small changes in the way we design and build interfaces.

What does sustainability means for digital products ?​

Building more sustainable digital products means to reduce the amount of carbon footprint necessary to design, maintain, and use this product.

It may be out of sight and out of mind, but the internet requires a huge amount of energy which leads to an enormous carbon footprint for digital products. We all need to take action now to ensure more liveable environments.

Why sustainability is important​

At Schneider Electric, Sustainability and Efficiency are part of our DNA and at the core of everything we do.

We are committed to sustainability through our Schneider Sustainability Impact (SSI) program were we plan to become a net-zero company by 2030.

In 2022, we signed the Planet Tech'Care manifesto committing to reduce our digital solutions' environmental footprint.

Building more sustainable digital products has a lot to do with optimizing for efficiency which in turns lead to more performant and robust solutions.

Quartz' pledge to sustainability​

Good news: by using Quartz, you're already contributing a lot to sustainability! Building your interface using Quartz improves your product's reusability, longevity, quality and scalability.

What Quartz does out-of-the-box:

  • we use a Static-Site Generator (SSG) for this website (link to SSG benefits reg. sustainability)
  • we use Lottie for animations
  • default to dark theme
  • we use SVGs for icons and illustrations
  • we use system fonts + Nunito from Google Font (CDN Content Delivery Network)
  • we distribute Quartz library and assets on a public CDN Content
  • we ship Quartz dev library in multiple optimized forms
  • you can use only one component, and only that component will be downloaded
  • you can optimize the bundling of your app by excluding unused components
  • you can use lazy-loading-enabled version of Quartz from a CDN

What you can do in your project​

General strategy​

Choose your hosting wisely
Quick win
High impact

Green hosting: green web hosting refers to digital product hosts that actively try to carry out sustainable initiatives, which means that hosts give back to the environment through renewable energy or carbon offsets. These are replenished using naturally occurring resources such as the sunlight, wind, or even water.

Local hosting: the local hosting can avoid that the data travel long distances and use a lot of energy on its journey. If you know your users and where they are located we should choose a local hosting provider in the country where users are located in. Talk to your project team and try to choose a local hosting provider that powers their servers with 100% renewable energy. The Green Web Foundation helps you to find a green host near your user.

Access internal ressources on sustainability
Quick win
High impact

At Schneider Electric, we have a Sustainability community of experts. Visit the Teams channel (in French)

Follow courses on Schneider Electric Sustainability School

Build for efficiency​

Analyze features usage and remove those that are not used
High impact
  • Conduct user research and usability testing
  • Track website traffic by using analytics service
Optimize the information architecture
High impact

Structure your site's information architecture to be intuitive for target users. Tree-test it with real users.

Think mobile-first
High impact

Did you know that by choosing to code mobile version first it will generate less energy compared to if you code desktop first? When you code desktop first and you are on a phone the desktop version will load first and hide the content, which means that more energy is used than what's needed.

Learn more about mobile-first design.

Only transit useful data over the network
Quick win
High impact
Implemented in Quartz

Be careful to only send the data that will be used by the client app. It will furthermore accelerate the client app that will take less time to parse and store these data, and reduce the memory footprint of the app.

Optimize the content​

Optimise image size and format
Quick win
High impact
Implemented in Quartz

Images are often your digital products's most energy consuming contributor and large images slow down the website and creates a less fun user experience.

Bitmap images often constitute most of the bytes downloaded, just ahead of the CSS and JavaScript libraries.

Optimize images by decreasing file size. Create a good balance between compression quality and file size.

Here are some tools to help you:

Use the right font
Quick win
Implemented in Quartz

Every font requires an HTTP request and weighs as much as an optimized picture (177 Ko for non-compressed Roboto).

Use system fonts as the first option. Secondly, font services such as google fonts is also a good choice. Nunito comes from google fonts. Avoid using custom fonts. Custom fonts can easily add up weight to your website.

Compress documents
Quick win

A 7.8 MB .doc file will be 30% smaller (5.5 Mb) once compressed (WinZip default compression).

Compress all the documents that may be downloaded from a web page, except when compressing has no obvious benefits (e.g. a PDF perfectly optimized for the internet).

Optimize PDFs
Quick win

PDFs contain enough formatting information to look the same on every device and program that can open them. However, the drawback of this is that PDFs can be large documents.

Ensure that PDFs are correctly optimized for the internet (e.g., sampling rate and compression ratio of images, embedded fonts, and resolution).

Adapt videos to the viewing environment
Quick win
Implemented in Quartz

A 15-second user guide filmed in 1680 x 1050 is 49 MB when not optimized. (3 MB when optimized for 1024 x 720, and 1.2 MB when optimized for 480 x 320).

Optimize them outside of the website during post-production and avoid autoplay. If it's not possible, use services like YouTube or Vimeo.

See this article for in-depth recommendations and example tools.

Adapt sounds to the listening environment
Quick win

Audio files can be large and use up lots of bandwidth.

Choose one of the three formats that work across platforms: MP3, AAC, and Vorbis. They apply fine-tuned compression algorithms that significantly reduce file size.

Reduce the Colors
Quick win
Implemented in Quartz

Colors do not consume the same amount of energy to display on LED-based screens:

Titles saying 'Hello, all is working well'.

Power consumption of the primary colors. From lowest to greatest consumption: black, red, green, blue, and white.

A sustainable website doesn't need to be all dark and one-colored though. The best would be to strive for a good balance between accessibility and low-energy colors.

Today's two main device screens are Liquid Crystal Display (LCD) and Organic Light-Emitting Diode (OLED or AMOLED) displays. OLED displays are increasing in popularity, so we will focus on OLED in the following.

Low consuming colors

  • Darker colors need less energy to illuminate, therefore using a dark mode website on those devices would save energy.
  • What could be surprising is that red is less energy consuming than green and blue.
  • Gradients are great to use as a visual element or background to make the design more fun and alive and can be low in energy consumption if you choose colors wisely.

High consuming colors

  • Lighter colors are the highest energy-consuming colors but they are also accessible colors. White could be good to keep as a text color, but otherwise try to minimize white as much as you can.
  • Blue and green are very aesthetically pleasing colors and widely used, especially our brand's signature green. Unfortunately, they are also high energy consumption colors. If you are going for blue/green, go for a darker blue/green instead!
Compress videos
High impact

Videos take up most page weight to your website, so the first thing you should ask yourself is: "Do I really need to use videos on this web page, or can I replace it with something else?"

If you need to use videos on your website, make sure to remove auto-play.

If you want to use a large animated GIF you can convert it to a video file that is smaller in file size. This article explains how to move from a GIF to a video file.

Optimize icons & illustrations
Quick win
Implemented in Quartz

Use the SVG format instead of PNG. SVGs are much smaller in size and are not likely to slow down your website.

Note: Figma exports unoptimized SVG files. Use specialized plugins like TinyImage Compressor or SVG Export to export highly optimized SVG files (around 40% smaller file size).

Also, resize images upfront, outside the browser. Avoid simply resizing the display of large images using HTML or CSS.

When possible, generate basic shapes in CSS3 rather than using images (e.g. rounded corners).

Optimize the implementation​

Avoid expensive JavaScript/CSS animations
Quick win
Implemented in Quartz

Avoid using animations as much as possible, and only do so when absolutely necessary. Only employ the opacity and transform CSS3 properties as well as the related functions: translate, rotate, scale, and transform.

Minimize the number of CSS files and compress them
Quick win
Implemented in Quartz

If several style sheets are used on all the pages of the site, concatenate them in a single file and group similar CSS declarations together.

Compress JavaScript libraries
Quick win
Implemented in Quartz

If several JavaScript is used on all the pages of the site, concatenate them in a single file.

Minimize javascript files through specialized tools to:

  • remove unnecessary white spaces
  • remove unnecessary line breaks
  • remove unnecessary semi-colons
  • shorten local variable names
Use abbreviated CSS notations
Quick win
Implemented in Quartz

Declare several properties in one shot, with a unique declaration instead of using several separated declarations for each property (e.g. use background instead of background-color+background-image+ background-repeat + background-position).

Provide a CSS for printing
High impact

Reduce the number of printed pages and indirectly the ecological footprint of the website by hiding unnecessary elements to keep only the content with an ink-efficient font (e.g. Century Gothic).

Outsource CSS and JavaScript
Quick win
Implemented in Quartz

Ensure that CSS files and JavaScript code are separate from the page's HTML code, with the exception of any configuration variables for JavaScript objects.

Use conditional comments
Quick win
High impact

If specific resources need to be sent to certain browsers, use conditional comments so that other browsers do not download those resources unnecessarily.

Always optimize your code
High impact

There are numerous other practices to optimize your code for performance and lower energy consumption. This article provides general recommendations that apply to most programming environments.

Last updated on