Eco-design

Digital impact: choosing eco-design for your Drupal website

Published on 07 July 2023
Photo @bluedrop.fr - a team at work caught up in the fever of eco-design, climate change doesn’t stand a chance!
Digital technology accounts for nearly 4% of global greenhouse gas emissions. Three sources are behind these emissions: devices (computers, smartphones, etc.), data centers, and networks. As website owners or, as in our case, a web agency, we can act on the second source of emissions: data centers. On the one hand, by choosing a sustainable data center, and on the other, through eco-design.

Digital technology accounts for nearly 4% of global greenhouse gas emissions and 2.5% of the national carbon footprint. Even more worrying, according to estimates, the growth of digital technology is such that it could represent 6.7% of French emissions by 2040. There are three main sources of these emissions.

The three sources of digital emissions

Good news! As a website owner, or as in our case as a web agency, we can take action on the second source of emissions: data centers. First, by choosing a sustainable data center and second, through eco-design.

Chilling data centers = a warming planet

Data centers are dedicated spaces for storing our digital data (emails, videos, photos, games, etc.) as well as that of our businesses. Most often, they take the shape of large warehouses made up of networks, storage areas, and computing servers.

What’s the problem? Servers are energy-hungry! They run 24/7. Even worse, servers generate heat. To prevent their degradation, it’s essential to keep them cool at a constant temperature of around 20°C. In addition to electrical consumption, air conditioning and cooling systems are required.

First action lever: choosing the right data center

Aware of these issues, at bluedrop.fr, we have selected a sustainable data center for our website and those of our clients. We found this solution close to home, in Marseille: it's called Interxion!

Interxion's data center in Marseille

And the reason we like it so much is because Interxion uses 100% renewable energy for its cooling.

Reverse cooling, a cool concept

With support from Ademe and the Région Sud, Interxion has developed an innovative eco-friendly cooling solution called Reverse Cooling. The concept is simple: it consists of capturing water from the mines in the city of Gardanes, and then diverting it to the data center to harness its coolness.

In a circular economy approach, this system will eventually allow the heat generated by the data center to be recovered and redistributed to homes and offices in Marseille.

Diagram of reverse cooling

The result: it uses 30 times less energy than a conventional cooling solution!

Second action lever: eco-design!

As a Drupal web agency, we can also act directly during the design phase of our web projects. Our aim is to limit server load, optimize, and streamline our websites.

Eco-what?

Eco-design means creating a product while limiting its environmental impact throughout its life cycle.

For websites, we can take action from the project definition and specifications stage, to UX (user experience design), UI design (interface design), and during development.

Breaking the “always more” culture

Several studies show that 70% of features requested by users are not essential: 45% are never used. While we tend to always want to offer the best quality and maximize possibilities, for the environment we need to break this “more is better” mindset and move toward simplicity. And it’s good for your bottom line, too.

Simplifying site structure

The more time a user spends on a site, the higher their environmental footprint. When designing the user journey, it's important to minimize the number of steps and eliminate unnecessary interactions. The main challenge is achieving this while keeping things simple, concise, and clear.

For example, if a user needs to submit supporting documents online, let them know in advance—by email or during sign-up—which documents to have ready. That way, they can prepare everything ahead of time and complete the online process in one go.

Eco-friendly graphic design

Eco-designing the interface helps reduce both size and loading time. This involves removing superfluous elements and non-essential effects:

  • Favor icons over images;
  • Use SVGs under 100KB to reduce their size;
  • Limit the number of content thumbnails;
  • Avoid sliders and carousels;
  • Limit animations such as infinite scroll (looking at you, Instagram Stories) or autoplay (GIFs or automatic carousels);
  • Create shorter pages;
  • Limit the number of fonts and weights used (one for titles, one for text is plenty);
  • Prefer pre-installed fonts on devices: Arial, Tahoma, Trebuchet MS, Verdana… (there are some nice ones, promise);
  • Limit the number of colors (monochrome or two-tone is great).

Wikipedia, one of the best eco-designed sites

Eco-design in development

During development, the focus is to reduce the number of requests, decrease data volume, and limit data processing. Here too, several best practices should be adopted: 

  • Implement sprites (both Retina and non-Retina compatible);
  • Don’t load unused CSS or JS (no global compilation);
  • Defer loading of heavy elements;
  • Avoid loading external scripts that make too many requests;
  • Limit the number of requests;
  • Compress CSS and JavaScript files;
  • Use a cache system like Varnish;
  • Limit image size and use new image formats;
  • Clean up duplicate code;
  • Compress assets using tar.gz.

Integrating eco-design into processes and involving stakeholders

To make sure all project stakeholders systematically consider sustainable development goals, we offer eco-design validation workshops. This approach is based on the General Reference Framework for Eco-design of Digital Services, the official state framework. 

Objectives:

  • Ensure eco-design criteria are applied
  • Align brand identity and style guide with eco-design principles
  • Minimize the website’s environmental impact

Ecological transition: an everyday commitment

Eco-design is just one part of the ecological transition approach. We also act on our everyday habits, both at home and at the office.

This is a major concern for us, and one we continually reflect on as part of our CSR strategy. To that end, we have drawn up an action plan to go further: creating a responsible purchasing charter, calculating our carbon footprint, systematic donating or recycling of equipment, raising awareness among our partners…

Acting for the environment means choosing to create an eco-designed web platform but also selecting partners who are committed to reducing their overall carbon impact. And if they’re Drupal experts too, even better ;)! Contact us to discuss your projects and learn more about our CSR strategy!

Some useful Drupal modules: 
Minify Source html: to minimize source HTML before data is sent to the browser.
Image Optimize: to optimize images during upload.
Blazy: to enable lazy loading of images.
Memcache API Integration: to provide integration between Drupal and Memcached.
Warmer: to provide all the necessary infrastructure to orchestrate your cache management policy.

Read more articles on Eco-design