Ecodesign and good practices
Eco-design of digital services is key in reducing digital technologies environmental footprint. Eco-designed services require fewer resources and thus help extend devices lifespan.
What is eco-design?
Eco-designing a website means taking into account its environmental impact at each stage of its life cycle: from specs, to functional and graphic design, to final use, including developement and maintenance. It’s a global way of thinking (and working!)
Eco-design aims to question every digital trades, for the better: in addition to its positive impact for the environment, it also improves efficiency of digital services. Many tools and good practices are available to guide you on this virtuous path.
The eco-design approach of a digital service is based on 5 fundamentals:
- Definition of the service’s functional unit: i.e. its main function for the user, as an action (for exemple: “buying a train ticket” or “consulting its bank account weekly”)
- Assessing the environmental impact of every equipment necessary for the service implementation…
- … for every stage of its life cycle (manufacture, use, end of life)…
- … according to several environmental indicators (resources depletion, water consumption, pollutant emissions…)!
- Following a process of constant improvement, prioritizing main levers of improvement first.
Learn more: Ecoconception web, les 115 bonnes pratiques and Sobriété numérique : les clés pour agir
The 115 good practices you will follow
For websites designers and developers, the book Ecoconception web, les 115 bonnes pratiques explains very concretely how to ecodesign websites and online services. These good practices are covering every steps, from design to exploitation through realisation (also, you can find them everywhere on this website!) The goal: decreasing the resource footprint at least by half!
- Book: Ecoconception web, les 115 bonnes pratiques
- Good practices online: Les 115 bonnes pratiques (GitHub)
- Checklist good practices in french (V4): Checklist des bonnes pratiques
- Checklist good practices in english (V3): Ecometer best practices
Some good practices
Here are some good practices to start with!
Reduce page weight
- Optimize images: choose the right format and reduce the size. For logos and illustrations: Use SVG format. For photos: prefer WebP format or optimized jpeg. For icons: pick glyphs or CSS styles.
- Avoid videos or minimize their length. Provide several formats suitable for viewing contexts, or use services offering optimized formats. Disable autoplay.
- Compress files: HTML, CSS, JS…
- Enable browser caching during development to avoid reloading the same data when revisiting
Reduce page complexity
- Limit content and features to the essential. 45% of features are never used: question the reel need.
- Opt for mobile-first approach before designing for desktop. This allows a functional coverage limited to the essential, avoids unnecessary consumption of bandwidth and ensure smooth running on mobile devices.
- Avoid infinite scroll. Prefer user action to display more information.
- Avoid costly JavaScript animations, like carousels. Prefer regular content updates.
Limit requests number
- Use system fonts (Arial, Tahoma, Times New Roman, Verdana…), which don’t need to be downloaded, unlike custom fonts.
- Limit widgets and plugins. For example: switch from social media buttons or Googlemaps widget to an image with a link.
- Group images into a sprite and combine certain CSS stylesheets and JavaScript libraries.
- Prefer static webpages when possible, rather than using a CMS. You can use static site generators or Jamstack architecture.
Toolbox
Browser plugins
Green IT Analysis plugin | EcoIndex in the pocket
EcoIndex and some of the good practices brought together in the same extension! Available on Chrome and Firefox. You can test any webpage environmental footprint and establish history to reproduce user journey. Very practical!
Contribute to source code on GitHub
EcoIndex plugin
EcoIndex plugin allows you to display the existing EcoIndex score of a webpage (from EcoIndex.fr webstite’s database) directly in browser. Available for Firefox, Chrome, Edge and Opera. It’ll display the latest grade for the page you’re on, but also existing grades for other pages of the same website. Lastly it simplifies page analysis:
Contribute to source code on GitHub
Why different results between these 2 plugins?
When performing analysis, these two plugins have different operating modes, therefore results may vary from one tool to the other:
-
GreenIT Analysis plugin operates in your browser, taking user’s context into account (IP adress, installed browser plugins, cache, session cookies…) More details on plugin documentation
-
EcoIndex plugin uses ecoindex.fr API: it opens a blank Chrome browser for each analysis using a predefined scenario. More details on the API operating mode
EcoIndex badge
This badge allows you to easily display the obtained EcoIndex score on your webpage. To do this, simply add 2 lines of html code to your page.
View EcoIndex badge project on GitHub >
EcoIndex command line interface
EcoIndex CLI allows you to launch a webpage analysis in command line. Developed in Python, it’s available for Linux, Mac and Windows. It’ll allow you to launch analysis for a single or several webpages, to generate results in CSV or JSON files, to generate HTML report…
View EcoIndex CLI project on GitHub >
GitHub | It’s up to you!
EcoIndex is a community and open source project: ready to be enhanced through experts and enthusiasts contributions! You can consult this project on GitHub anytime for better understanding and, why not, participate!
GitHub / EcoIndex website / frontend >
GitHub / EcoIndex website / backend >
Beyond eco-design
Eco-design of digital services alone cannot significantly reduce global digital footprint. Other simple measures, against the current of our society unrestrained growth, must be implemented to change the actual trajectory.
- Reducing connected devices number by promoting pooling and substitution, for example: using a centralized device to operate all the modems of one building. We can also open their API to extend their lifespan - API are programming interfaces notably used to exchange data between connected devices and servers of manufacturers or their partners.
- Reducing flat screens number by switching them with other display devices: VR headset, LED video projectors… And above all good books and quality time with family and friends, away from screens ;-)
- Increasing devices lifespan by extending legal warranty period, promoting reuse and fighting against some economic models (particularly mobile phones operators).
Learn more: Global digital environmental footprint