A checklist of good practice for digital eco-design:
🎨 Logo / Visual identity
- Go for a 100% typographic logo
- Prefer a flat logo (no gradients) and always have a black and white version
- Use an environmentally friendly font: ec (opens in new window)o-font (opens in new window), Cambria, (opens in new window) Times New Roman (opens in new window), Century Gothic (opens in new window), Ryman Eco (opens in new window)
- Manual or automatic optimisation of SVG files to remove all layers and comments, which are not needed for display on a site. This can reduce the file size by between 2% and 25% compared with the original.
⌨️ Using typography
- Use as few fonts as possible (and limit the various weights as much as you can)
- We recommend using system fonts (opens in new window) (for the body content of your pages, for example)
- Systematically use web fonts (opens in new window) (although Google is not the only example), for better page loading, rather than a custom typeface
- Go for the .WOFF or .WOFF2 formats
📸 Images
- Reduce the number of images on the pages: does the image have real added value? Does it convey essential information?
- Reduce their size and compress them (ReSmush (opens in new window), Optimizilla (opens in new window), ImageOptim (opens in new window), TinyPNG (opens in new window), ShortPixel (opens in new window))
- Go for the WebP format (be careful with browser compatibility). Google recommends JPEG 2000, JPEG XR and WebP
- Use .svg as much as possible
- Upload images at the right size (don’t resize them via CSS)
💡 UX / UI design
- Go for assisted input (which is less energy-hungry) rather than autocomplete
- Recycle visuals (reuse the same images from one page to another)
- Minimalist design with only what is necessary
- Only put in place the features that are essential to using the site or app
- Avoid the native plugins for the official social media share buttons
- Avoid animations (and therefore .JS). And if you add them, give the user the option to pause animations, scrolling or flashing, in order to limit the use of unnecessary resources
- Avoid sliders and carousels
- Reuse native components as much as possible
- Offer notifications only when necessary, and let the user control them
- Tell the user, before transfer, the expected file sizes and formats: a type of file, a maximum image size, and so on
- Don’t use autoplay (and avoid videos if they’re not necessary)
- Think about the impact of “decorative” pictograms and icons. If you’re putting them on your site: are they essential? Do they really help understanding?
- Give the user a way to control their content (choose media resolution, disable display, and so on)
- Avoid infinite scroll
- Make visible to the user the environmental impacts of their actions (through a chart, a key figure, and so on)
- Check the expected input formats before form submission and flag input errors (to avoid client/server round trips)
- Let the user enable or disable a third-party service (for example, cookies) to limit the loading of services that are not needed for the site to work.
💻 Web development
- Use PWAs (progressive web apps)
- Avoid CMSs that are often very resource-hungry
- Only send the data needed to display the site
- Choose green hosting (PlanetHoster (opens in new window), Ikoula (opens in new window), Infomaniak (opens in new window))
- Limit the number of HTTP requests
- Limit plugins
- Favour CSS (opens in new window) over images whenever possible (animations, simple icons, and so on)
👨💻 / 👩💻 Personal digital habits
We can all act and make small responsible gestures every day.
- Favour wifi whenever possible, rather than 4G
- Only store essential things in the cloud
- Sort your emails every week
- Close a tab as soon as you’ve finished consulting the page, and so avoid overloading the browser with tabs
- Avoid copying too many people on your emails
- Avoid attachments whenever possible
- Don’t buy digital hardware on impulse: do I really need it? Can my older device be repaired? And avoid over-equipping yourself
- Sort your old digital devices (yes, keeping your last five phones at the back of a cupboard isn’t very eco-friendly)
- Don’t add your signature to every email reply, and prefer plain text over HTML
🔍 A few references
- Eco-index (opens in new window) (calculate your site’s carbon emissions)
- Website carbon (opens in new window) (calculate your site’s carbon emissions)
- Low tech magazine (opens in new window) (a site that runs on solar energy and takes many eco-design recommendations into account)
- Book on the practice of eco-design (opens in new window)
🌳 To wrap up on digital eco-design
That said, all these tips should not damage the user experience or the journeys of your future service. You have to find a good compromise between eco-design and a good understanding of your users. Using dark mode (see our earlier article) can be an alternative, since black screens use less energy.
You don’t have to respect every recommendation. Taking a few of them into account is already a good first step for the planet 🌎
Some additional information on digital pollution and its consequences (opens in new window).
👉 To keep an eye on these good practices, don’t hesitate to download our “eco-design checklist”
