Web eco-design : definition and good practices!

Web eco-design purpose is to reduce the environmental impact of websites and et apps. At a time when digital pollution represents no less than 4 % of global greenhouse gas emissions, development of green computing becomes an environmental, but also societal concern. Digital stakeholders incrementally integrate green IT in their CSR strategy and policy. This commitment to responsible digital concerns every area of activity. The latest example of this is the écocode Challenge organized by the Crédit Agricole, which awarded developer teams able to manage and reduce the carbon footprint of softwares.  But what web eco-design is really about and above all how to exercise it ? Find it out in this article.

What is web eco-design ?

Web eco-design first implies Green IT, a collective group of responsible digital experts. Its purpose is to reduce the carbon footprint from websites and softwares thanks to various good practices involving both development, design, implementation and maintenance of digital solutions.

Eco-designed websites and apps are intended to be more :

• efficient that is to say that they consume less resources to deliver identical performance as a standard website ;

• « frugal » by limiting functional coverage to its bare minimum ;

• clear as it enhances users' experience (UX) by covering every need with a uniform and consistent core of functionalities ;

• relevant to speed up the response to the needs (avoiding multiple browsing) ;

• usable.

Web eco-design is often confused with digital sobriety which it is a part. But the concept of digital sobriety is more wide and incorporates in particular temperance of everyday digital uses with a more responsible renewal of  equipment and terminals (recycling, repackaged purchases, etc.) and an accountability on the reduction of digital impact.

Eco-design of digital services movement launched in 2009 by the Green IT, a collective group of responsible digital stakeholders who mainly work on digital services eco-design, digital sobriety and low-tech. The collective group regularly publishes articles, courses, guides and good practices to eco-design websites and develop a more responsible alternative digital.

How to eco-design a website ?

To eco-design a website or an app consists in reducing the amount of IT means needed   (both physical equipment and network or  bandwidth), while maintaining the same quality and performance level.

This eco-design intervenes at each stage of the site lifecycle from the expression of the need to the implementation and maintenances. To eco-design a website is similar to following methodological approach inspired by ISO 14062 standard. This norm defines practices and concepts related to the incorporation of environmental aspects in the design and development of products or services. 

For the digital services, it is about, from the expression of the need, clearly (and only) defining he functionalities that will be needed.  The general term is functioning unit or provided service. Then, digital solutions have to be designed considering their resource consumption (network, server, etc.) especially through environmental indicators. Eventually, to eco-design an app involves adopting a continuous improvement approach (both in term of performance as well as UX, technical choices etc.). 

Specifically, eco-designing a website of an app is based on a set of responsible choices, green computing and good practices. The Green IT collective group published a book dedicated to the good practices by the way.

Web eco-design good practices

After Green IT, web eco-design good practices are built around 6 key points.

1 - Design

The design of an IT solution is the step that plays the most important rôle in term of environmental impact cut. It is at this stage that the functionalities are defined and can be  audited to keep only the most essential ones.

During this step, the good practices will be equally functional and technical. Among those are :

• the precise quantification of the need ;

• the modelling of an IT charter and of a simple and refined look ;

• the establishment of a Mobile First approach ;

• the choice of suitable technologies, CMS and frameworks.

2 - Incorporation

The incorporation is the step where the models are translated into a programming language (mainly CSS, HTML and JS) to be understandable by the web browsers.

The decisions taken during this step have also consequences on the eco-design of the site. Examples of good incorporation practices are :

• the generation of spritesheets ;

• the systematic addition of a CSS print ;

• the limitation of pictures and the use of other format (webp, glyphs, etc.) ;

• the externalisation of the CSS and of the JS ;

• the validation of all pages by the W3C.

3 – Front-end development

The front-end designates all the directly visible and accessible elements on a website. It is also called interfaces or IHM. Concerning the front-end, the good practices are about :

• the limitation of complex JavaScript codes (particularly the animations) ;

• DOM la simplicity and stability ;

• the use and optimization of cache systems ;

• Coding conventions (loop optimization, local variables use etc.).

4 - Back-end development

A site back-end combines the server and the database management systems. It is therefore the part that controls the performances of the site and that is usually already optimized to limit  latency and overload. But, in eco-design, these optimizations goes farther to reach a maximum level of efficiency. The good practices implies, among other things :

• the use of a templating engine ;

• the optimization of the memory management ;

• the optimization of the SQL request ;

• the limitation of the connections to the BDD ;

• the use of the stored procedures.

5 – Site hosting

At the stage of site implementation and hosting, the most known eco-design good practice consists in choosing a green host. But it isn't the only possible optimization. At this stage,  Green IT suggests  about thirty additional good practices including :

• to minify and combine CSS and JS files ;

• the activation of HSTS (HTTP Strict Transport Security) ;

• the incorporation of caches in the system RAM ;

• the use of asynchronous servers.

6 - Content

The content of a site designates all the downloadable or printable elements (blog posts, videos, etc.) as well as emails.

The good practices will be about content optimization including

• Document compression ;

• the adjustment of the texts, videos and pictures for web ;

• the use of plain text instead of HTML code, particularly for the emails, alerts and confirmation mail.

All these good practices help reduce the web page weights which has been multiplied by nearly 115 in 20 years. Beyond the environmental aspect and the performances, the eco-design becomes a communication issue for companies.