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.
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