<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Éco-conception web - Steffi Lala</title>
	<atom:link href="https://steffilala.fr/category/eco-conception-web/feed/" rel="self" type="application/rss+xml" />
	<link>https://steffilala.fr</link>
	<description>Webdesigner freelance à Montpellier</description>
	<lastBuildDate>Thu, 05 Mar 2026 13:51:30 +0000</lastBuildDate>
	<language>fr-FR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://steffilala.fr/wp-content/uploads/2025/11/Logo-Steffi-Lala_monogramme_noir.svg</url>
	<title>Éco-conception web - Steffi Lala</title>
	<link>https://steffilala.fr</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Site web écologique : le guide complet !</title>
		<link>https://steffilala.fr/site-web-ecologique/</link>
					<comments>https://steffilala.fr/site-web-ecologique/#respond</comments>
		
		<dc:creator><![CDATA[Steffi]]></dc:creator>
		<pubDate>Fri, 06 Feb 2026 17:57:10 +0000</pubDate>
				<category><![CDATA[Éco-conception web]]></category>
		<guid isPermaLink="false">https://steffilala.fr/?p=31949</guid>

					<description><![CDATA[Vous souhaitez créer un site web écologique pour votre entreprise engagée ? Ce guide est là pour vous éclairer ! J'y ai regroupé toute mon expertise de conceptrice web certifiée en numérique responsable pour : SOMMAIRE : C'est quoi un site web écologique ? Définition de l'éco-conception L'éco-conception, c'est une démarche qui n'est pas du [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Vous souhaitez créer un <strong>site web écologique</strong> pour votre entreprise engagée ? Ce guide est là pour vous éclairer ! J'y ai regroupé toute mon expertise de <strong>conceptrice web certifiée en numérique responsable</strong> pour :</p>



<ul class="wp-block-list">
<li>Vous expliquer clairement et simplement la <strong>démarche d'éco-conception web</strong></li>



<li>Vous convaincre que c'est la meilleure décision à prendre pour votre site web pro</li>



<li>Vous montrer étape par étape comment s'y prendre</li>
</ul>



<div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column has-border-color has-contrast-border-color is-layout-flow wp-block-column-is-layout-flow" style="border-width:1px;padding-top:32px;padding-right:32px;padding-bottom:32px;padding-left:32px">
<p><strong>SOMMAIRE :</strong></p>



<ol id="block-68cb10b1-30d5-4d02-b359-772a52fe0852" class="wp-block-list">
<li><a href="#definition">C'est quoi un site web écologique ?</a></li>



<li><a href="#avantages">Pourquoi créer un site web éco-responsable ?</a></li>



<li><a href="#ideesrecues">Stop aux idées reçues sur l'éco-conception web !</a></li>



<li><a href="#etapes">6 étapes pour créer un site web écologique ?</a></li>
</ol>
</div>
</div>



<div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading" id="definition">C'est quoi un site web écologique ?</h2>



<h3 class="wp-block-heading">Définition de l'éco-conception</h3>



<p>L'éco-conception, c'est une démarche qui n'est pas du tout réservée au web. On peut éco-concevoir des objets, des vêtements, des livres, des bâtiments... Bref, tout ce qui se fabrique ou presque peut entrer dans une démarche d'éco-conception.</p>



<p>La définition officielle en France, c'est celle de l'<a href="https://www.ademe.fr/" target="_blank" rel="noreferrer noopener">ADEME</a> :</p>



<p><em>« C’est une démarche préventive et innovante qui permet de <strong>réduire les impacts négatifs</strong> du produit, service ou bâtiment sur l’environnement sur l’ensemble de son cycle de vie (ACV), tout en conservant ses qualités d’usage. »</em></p>



<p>Donc il y a plusieurs choses importantes.</p>



<p>La première c’est qu’on parle de démarche «&nbsp;préventive&nbsp;», donc dans l’idéal, qui intervient au tout début du projet.</p>



<p>Ensuite, on parle de réduire les impacts négatifs sur l’environnement. Quand on parle d’environnement, on ne parle pas simplement de la planète et de la <strong>pollution</strong>, du <strong>climat</strong>, de <strong>l’écologie</strong> etc… On parle aussi de la personne humaine, donc on prend en compte les <strong>enjeux sociétaux</strong>. Par exemple, quand on fabrique des vêtements, l'éco-conception c'est aussi le fait de ne pas avoir recours au travail d'esclaves ou d'enfants. Et dans le cadre d’un site web, ça peut être <strong>l’accessibilité numérique</strong> (= le fait de rendre accessible le site aux personnes handicapées).</p>



<p>Après il y a la notion de cycle de vie, ça veut dire qu’on ne parle pas seulement de la création du produit ou du service, mais aussi de son utilisation par les personnes qui vont l’acheter, et aussi la fin de vie, donc éventuellement le reçyclage, etc…</p>



<p>Et enfin on parle de «&nbsp;conserver les qualités d’usage&nbsp;». Donc l’éco-conception, ça veut pas dire tout retirer pour avoir le moins d’impact possible. Ça va plutôt être : rechercher l’équilibre entre ce dont les gens ont vraiment besoin et l’impact que cela a.</p>



<p>Alors vous voyez qu’eco-concevoir, c’est en fait beaucoup de réflexions et de remises en question. On change complètement la façon de penser «&nbsp;traditionnelle&nbsp;».</p>



<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">Les 3 piliers de l'éco-conception pour un site web écologique</h3>



<p>Ces 3 principes ont été posés par l'un des pionniers de l'éco-conception web, Frédéric Bordage, sur son site <a href="https://www.greenit.fr/" target="_blank" rel="noreferrer noopener">greenit.fr</a>.</p>



<h4 class="wp-block-heading">Simplicité</h4>



<p>La simplicité, c'est peut-être le principe le plus facile à comprendre, mais pour autant pas forcément le plus facile à appliquer</p>



<p>Parce qu'on nous a souvent appris de "mauvaises habitudes", des trucs qu'on applique sans plus trop y penser alors que parfois, on pourrait faire plus simple.</p>



<p>En gros, le but, c'est d'éviter les trucs trop alambiqués, où il faut cliquer 14 fois avant d'arriver au résultat espéré, mais aussi d'en mettre trop, tellement que l'utilisateurice sera perdu·e.</p>



<p>Pour illustrer cela, Frédéric Bordage prend l'exemple de Google et Yahoo. La page de Google est extrêmement simple, alors que sur celle de Yahoo, toutes les fonctionnalités sont regroupées sur la même page.</p>



<p>Résultat, une requête Yahoo est 5 fois plus lourde qu'une requête Google*</p>



<p>*<em>source : Éco-conception web, les 115 bonnes pratiques par Frédéric Bordage aux Éditions Eyrolles</em></p>



<h4 class="wp-block-heading">Frugalité</h4>



<p>La simplicité c'est une démarche qualitative. La frugalité, c'est plutôt quantitatif.</p>



<p>Il va s'agir ici de limiter les fonctionnalités et leur qualité au strict minimum.</p>



<p>Donc pour les fonctionnalités, c'est assez simple à comprendre, on ne met que le nécessaire sur le site. Par exemple, un truc que je vois souvent sur les sites et qui n'est pas forcément nécessaire, c'est la carte Google Maps. Alors oui, c'est souvent utile de dire aux gens où on se situe, mais on n'a pas forcément besoin de mettre la carte, on peut se contenter d'un lien vers cette carte, ou juste de notre adresse. Le simple fait de faire ce choix allégera le site et le rendre un peu plus éco-responsable.</p>



<p>Concernant la qualité, là ça demande un petit switch, par qu'on pense souvent qu'il faut mettre la meilleure qualité possible, par exemple pour une photo. L'éco-conception, c'est plutôt de se demander quelle est la qualité minimum nécessaire. En fait, à partir du moment où la photo n'est pas floue, où on voit clairement ce qu'il faut voir, ça suffit pour l'immense majorité des cas. Pas besoin d'être dans la sur-qualité, parce que cela à un coût en terme de <strong>consommation de ressources</strong>.</p>



<h4 class="wp-block-heading">Pertinence</h4>



<p>La pertinence, c'est une équation entre l'utilité, la rapidité et l'accessibilité.</p>



<p>Si quelque chose est utile, mais qu'on met trop longtemps à y accéder, on va aller le chercher ailleurs. Et donc tout le temps et les ressources déployées à essayer d'y accéder auront été inutiles.</p>



<p>Idem, si quelque chose est utile et rapide, mais qu'on ne peut pas y accéder par manque d'accessibilité (par exemple si on a un déficit visuel), ça devient inutile, et ça existe pour rien.</p>



<p>Donc en éco-conception, on interroge aussi la pertinence, parce que tout ce qui est créé a un impact, mais si cet impact est pertinent, c'est ok. Sinon, mieux vaut s'abstenir.</p>



<div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading" id="avantages">Pourquoi créer un site web écologique ?</h2>



<h3 class="wp-block-heading">Pour réduire l'empreinte environnementale et sociétale du web</h3>



<p>La première raison peut paraître évidente, mais c'est tout simplement pour&nbsp;<strong>diminuer l'impact négatif du numérique</strong>.</p>



<p>C'est un sujet que j'ai à cœur de "populariser", dans le sens de "rendre accessible", parce que c'est un sujet encore trop peu abordé et pourtant...</p>



<p><strong>L’impact écologique du web</strong> en général est plus qu’inquiétant, ça concerne tout le monde et il est temps d’agir.</p>



<p>Je pense avoir déjà donné ces chiffres, mais pour être sure que tout le monde soit bien au fait, je vais le redire : on estime aujourd’hui que le numérique est responsable de 4% des émissions de gaz à effet de serre dans le monde, soit autant que le secteur aérien.</p>



<p>Le petit truc en plus du numérique, c’est que personne n’en parle (ou presque) et que les usages explosent (streaming, IA, ... Vous connaissez ?).</p>



<p>On est donc face à un secteur qui pollue beaucoup, où très peu de personnes en ont conscience et où, a priori, ça ne va faire qu'empirer. Parce qu'autant j'ai l'impression que dans d'autres gros secteurs pollueurs comme l'avion, l'alimentaire ou le transport, on est plus ou moins informé·es, et on essaie plus ou moins d'agir. Autant pour le numérique, on a l'impression que c'est l'inverse. On est de plus en plus à utiliser Internet de façon intensive, sans se douter une seule seconde que c'est problématique...</p>



<p>Pourtant, les conséquences sont bien réelles et graves, je les détaille d'ailleurs dans cet article sur <a href="https://steffilala.fr/impact-environnemental-site-internet/">l'impact environnemental d'un site internet</a>.</p>



<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">Être en phase avec vos valeurs dans votre business</h3>



<p>La deuxième raison de créer un <strong>site web éco-responsable</strong>, c'est pour être plus aligné·e.</p>



<p>Alors, l'alignement, c'est un terme un peu galvaudé, qu'on utilise à tort et à travers et qu'on entend trop, tout le temps, partout.</p>



<p>Oui mais, n'empêche que selon moi, c'est un truc hyper important. Vraiment, une des clés pour une vie plus heureuse.</p>



<p>Je vais vous donner ma définition de l'alignement. Pour moi, être aligné·e, c'est simplement faire des choses qui sont en accord avec ce en quoi on croit. Faire des actions en accord avec nos valeurs. C'est tout.</p>



<p>Pour moi, si dans notre vie, on fait que des trucs avec lesquels on est en accord, des trucs qui font sens et où on peut se dire "j'assume sans problème", alors on se sent bien. C'est comme si la vie devenait plus facile, parce qu'on se pose moins de questions. On est moins en conflit permanent entre ce qu'on croit devoir faire et ce qu'on a vraiment envie de faire. Du coup, tout devient plus fluide.</p>



<p>Et ça peut passer par des petites choses. Admettons que pour vous, l'écologie soit quelque chose d'important. Pour certaines personnes, le fait de se sentir aligné·e va passer par du militantisme, à petite ou grande échelle. C'est des personnes qui auront vraiment besoin et envie de passer à l'action. Et puis pour d'autres, qui ne se sentent pas vraiment l'énergie, la force, le courage ou juste l'envie de faire des actions fortes, ça peut juste être mener leur vie le plus possible en accord avec cette valeur. Et faire des choix éclairés, en fonction aussi et surtout de leurs moyens, au moment où iels font ces choix.</p>



<p>Je pense qu'il n'y a pas une meilleure façon qu'une autre d'être engagé·e. Tout le monde n'est pas destiné à militer haut et fort, et c'est ok.</p>



<p><strong>Créer un site web écologique</strong> peut-être une des petites actions, un choix éclairé qui vous mènera à plus d'alignement. Pour moi c'est le cas. Je sais que je ne changerai pas le monde à moi toute seule, mais je me sens en accord avec mes valeurs et c'est déjà pas mal.</p>



<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">Un site web écologique est un site de qualité et bien référencé</h3>



<p><strong>Créer un site internet éco-responsable</strong>, c'est prendre en compte plusieurs aspects : l'environnement bien sûr, mais pas seulement. On va aussi faire attention à <strong>l'accessibilité numérique</strong> (le fait de rendre le site accessible pour les personnes en situation de handicap) ou encore <strong>la sécurité des données</strong> et <strong>la vie privée</strong> des utilisateurices.</p>



<p>Il existe en France, <a href="https://www.opquast.com/" target="_blank" rel="noreferrer noopener">un organisme de formation</a> très reconnu, qui certifie la <strong>qualité</strong> des sites web et qui met à disposition une checklist de 240 bonnes pratiques pour créer un site de qualité.</p>



<p>Parce qu'aujourd'hui, grâce à Internet, on peut avoir accès à beaucoup de compétences et connaissances. Et donc, n'importe qui ou presque peut apprendre à créer des sites Internet. C'est vraiment selon moi l'une des meilleures choses sur Internet, cette accessibilité de l'information. Mais ça veut aussi dire que des mauvaises pratiques peuvent émerger, parce que des personnes "amatrices" vont créer des sites web. Et je ne dis pas ça en jugeant qui que ce soit, je pense que c'est bien aussi d'apprendre "sur le tas", et que l'expertise requiert forcément de commencer quelque part, du temps et des expériences.</p>



<p>Cependant, les 240 bonnes pratiques pour un site de qualité rejoignent énormément de bonnes pratiques de l'éco-conception web. Et donc, en faisant le choix d'un site web éco-responsable, on fait souvent aussi le choix&nbsp;<strong>d'un site de qualité</strong>.</p>



<p>Et pour la petite cerise sur le gâteau, les <strong>bonnes pratiques</strong> de l'éco-conception rejoignent aussi beaucoup de bonnes pratiques de référencement (le fait de rendre son site Internet visible et trouvable via les moteurs de recherches). Et ça, c'est toujours plutôt une bonne nouvelle.</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading" id="ideesrecues">Stop aux idées reçues sur l'éco-conception web !</h2>



<h3 class="wp-block-heading">Non, un site web écologique n'est pas un site vert et / ou moche</h3>



<p>Première idée reçue : un site éco-responsable, c'est moche.</p>



<p>Bah oui, peut-être qu'on se dit que créer un site écologique, c'est créer un site fade, sans vie...</p>



<p>Et c'est vrai qu'éco-conception rime quand même un minimum avec <strong>sobriété</strong>. Mais la sobriété, elle est plutôt dans la conception que dans le design. C'est plus un état d'esprit qu'une image visuelle.</p>



<p>C'est pas parce qu'on crée un site éco-conçu qu'on doit forcément s'interdire de mettre des couleurs, des illustrations, des photos, une police un peu fun ou même des vidéos.</p>



<p>Le but, c'est pas ça. C'est juste de faire des choix pertinents et de ne pas tomber dans le trop, dans l'inutile. Rendre la lecture et l'expérience agréable pour faire passer des messages importants, c'est pertinent.</p>



<p>Donc si vous avez envie de <strong>créer un site écologique</strong> rose et jaune, c'est possible. C'est pas le fait de mettre une couleur qui va ruiner tous vos efforts par ailleurs. (d'ailleurs, j'en parle dans cet article sur les <a href="https://steffilala.fr/eco-couleurs-web/">éco-couleurs web</a>)</p>



<p>En fait, <strong>faire un site internet écologique</strong>, ça va plutôt vous aider à faire un site efficace, au lieu de faire un site au design magnifique, mais où finalement la réflexion derrière n'est pas très poussée.</p>



<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>


<div class="wp-block-image">
<figure class="alignleft size-full is-resized"><img fetchpriority="high" decoding="async" width="905" height="509" src="https://steffilala.fr/wp-content/uploads/2025/11/site-wordpress-angelies.jpg" alt="angelies.fr : un site web écologique très coloré !" class="wp-image-146" style="aspect-ratio:1.7780129646778675;width:606px;height:auto" srcset="https://steffilala.fr/wp-content/uploads/2025/11/site-wordpress-angelies.jpg 905w, https://steffilala.fr/wp-content/uploads/2025/11/site-wordpress-angelies-300x169.jpg 300w, https://steffilala.fr/wp-content/uploads/2025/11/site-wordpress-angelies-768x432.jpg 768w" sizes="(max-width: 905px) 100vw, 905px" /><figcaption class="wp-element-caption"><em>Exemple d'un site web écologique très coloré !</em></figcaption></figure>
</div>


<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">Créer un site éthique, c'est pas forcément plus cher</h3>



<p>Deuxième idée reçue, c'est qu'un site web écologique va forcément coûter plus cher.</p>



<p>Alors, peut-être, mais pas forcément.</p>



<p>En fait, si vous créez des sites, le fait de basculer vers l'éco-conception ne va pas vous coûter plus cher, en tous cas sur le long terme. Ça va probablement vous demander un petit temps d'adaptation, et donc peut-être une légère perte de productivité temporaire, mais honnêtement, probablement pas beaucoup.</p>



<p>Et après, concernant le choix des prestataires, qui peut être amené à changer si vous décidez de créer des sites écologiques, là encore, ce n'est pas forcément plus cher. Par exemple, pour l'hébergement. Un hébergement éco-responsable n'est pas forcément plus cher qu'un autre hébergement de qualité égale mais sans la dimension éco-responsable.</p>



<p>Ensuite, deuxième hypothèse : vous déléguez la création de votre site. Et bien je vous invite à faire l'effort de chercher, les personnes qui éco-conçoivent des sites ne sont pas forcément plus chères que les autres !</p>



<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">Ni plus compliqué !</h3>



<p>Ensuite la troisième chose que vous pensez peut-être à propos du fait de créer des sites web écologiques, c'est que c'est compliqué.</p>



<p>Et bien là ma réponse est simple : non, ce n'est pas compliqué.</p>



<p>En tous cas, pas plus compliqué que de créer un site tout court.</p>



<p>Ça va être compliqué de trouver d'autres arguments alors vous allez devoir me croire sur parole mais très honnêtement, si vous savez créer un site, vous saurez créer un site éco-responsable.</p>



<p>Alors oui, il y a un chemin et une phase d'apprentissage bien sûr, mais ça ne requiert pas d'autres compétences particulières que celles qui sont déjà nécessaires à la base pour créer des sites.</p>



<p>C'est simplement un changement d'habitude.</p>



<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">Vous n'avez pas à renoncer à quoique ce soit pour que votre site soit responsable</h3>



<p>Quatrième idée reçue : un site internet écologique ne peut pas avoir les mêmes fonctionnalités.</p>



<p>Encore une fois, c'est faux. L'éco-conception, c'est faire le tri dans les fonctionnalités. Mais si une fonctionnalité est vraiment pertinente, quelqu'elle soit, vous pouvez la mettre sur votre site éco-responsable.</p>



<p>Encore une fois, la différence se joue dans la réflexion qu'on a pour se demander si c'est vraiment nécessaire et intéressant de l'ajouter. Mais il n'y a pas de "contraintes techniques". Il y a des façons d'ajouter les fonctionnalités qui seront plus éco-responsables, mais, encore une fois, ça ne se joue vraiment pas au niveau des "capacités techniques" d'avoir la fonctionnalité en soi. Juste au niveau des choix et des façons de faire.</p>



<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">Et oui, on peut éco-concevoir avec WordPress !</h3>



<p>Et enfin la dernière idée reçue, que j'ai moi-même longtemps eu, c'est qu'on ne peut pas faire un site web écologique sous WordPress.</p>



<p>Alors j'ai longtemps cru ça, parce que WordPress, c'est un outil qu'on appelle "no code", c'est-à-dire que même si on ne sait pas coder, on peut faire un site.</p>



<p>Et pour moi, vraiment, l'éco-conception c'était indissociable du fait de coder ses sites de A à Z.</p>



<p>Et pourtant, c'est faux.</p>



<p>Alors du coup, ça me fait un peu mentir dans mon introduction quand je disais que personne ou presque ne s'intéressait à l'éco-conception dans le web. Bien sûr que&nbsp;<a href="https://greenit.fr/" target="_blank" rel="noreferrer noopener">des gens s'y intéressent</a>&nbsp;et font des trucs formidables, mais ce n'est vraiment pas la majorité.</p>



<p>Ceci dit, on peut trouver des thèmes WordPress éco-responsables, on peut mettre en place des bonnes pratiques pour créer des sites web écologiques avec WordPress, même si on ne sait pas coder.</p>



<p>D'ailleurs, je n'ai moi-même qu'une bonne base de connaissances en HTML et CSS (l'équivalent de la maternelle en langage web), et pourtant les sites que je crée sont en moyenne 75 à 85% plus écologiques que le reste du web...</p>



<p>Donc même en no code, créer un site écologique, c'est possible, et surtout, c'est parfois la solution la plus pertinente !</p>



<div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading" id="etapes">Comment créer un site web écologique ?</h2>



<p>Maintenant qu'on sait exactement de quoi on parle et pourquoi c'est important : comment on fait concrètement pour créer son site en respectant la planète et ses habitant·es ?</p>



<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">1- Définir la stratégie</h3>



<p>Par stratégie, j'entends : à qui je m'adresse ? Quel(s) message(s) je veux faire passer ? Par quels moyen ?</p>



<p><strong>Selon moi&nbsp;, c'est le plus important.</strong></p>



<p>Déjà,&nbsp;parce qu'on ne crée pas un site juste comme ça (sauf si on veut s'amuser). Il faut savoir pourquoi et pour qui on le fait avant toute chose, car c'est ce qui va définir tout le reste.</p>



<p>C'est également l'étape où on va pouvoir faire le tri. Parce que dans une démarche d'éco-conception, on ne met pas des outils ou fonctionnalités sur un site parce que c'est l'usage et que tout le monde le fait. Le principe, c'est de faire&nbsp;<strong>un site simple, utile et pertinent</strong>.</p>



<p>C'est donc le moment de s'interroger sur ce qui est vraiment utile pour les utilisateurices, qu'est ce qu'iels vont venir chercher sur le site ? Qu'est ce qu'iels auront envie de faire, et comment leur donner la possibilité de le faire le plus facilement et rapidement ?&nbsp;</p>



<p><strong>On n'en met pas plus, pas moins.</strong></p>



<p>Parce que plus une personne passe de temps sur le site, moins il est écologique. Et oui, ça va à l'encontre de tout ce que le marketing a pu nous apprendre jusqu'à présent.</p>



<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">2- Arborescence et parcours utilisateurice</h3>



<p>Une fois que tous les éléments de la stratégie sont réunis, on peut créer ce que l'on appelle l'arborescence du site. C'est tout simplement la liste des pages du site. En gros, ça ressemble à un arbre généalogique ou un organigramme.</p>



<p>Suite à ça, on va aussi penser le parcours utilisateurice. C'est tout simplement le chemin idéal d'une personne sur notre site, pour voir comment elle passe d'une page à une autre et de rendre cela le plus fluide possible.</p>



<p>On s'interroge alors sur ce que les personnes auront envie de faire sur notre site, et à partir de là, on leur fournit l'expérience la plus optimale possible et on les guide avec les bons appels à l'action, au bon endroit.</p>



<p>Encore une fois, le but est de créer&nbsp;<strong>un site simple, efficace, pertinent et beau</strong>, mais surtout,&nbsp;<strong>qui sert notre objectif</strong>, sinon autant ne rien créer du tout.</p>



<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>


<div class="wp-block-image">
<figure class="alignleft size-full is-resized"><img decoding="async" width="800" height="400" src="https://steffilala.fr/wp-content/uploads/2022/08/arborescence-site-internet.jpeg" alt="exemple d'arborescence d'un site internet" class="wp-image-30025" style="width:605px;height:auto" srcset="https://steffilala.fr/wp-content/uploads/2022/08/arborescence-site-internet.jpeg 800w, https://steffilala.fr/wp-content/uploads/2022/08/arborescence-site-internet-300x150.jpeg 300w, https://steffilala.fr/wp-content/uploads/2022/08/arborescence-site-internet-768x384.jpeg 768w" sizes="(max-width: 800px) 100vw, 800px" /><figcaption class="wp-element-caption"><em>Exemple d'arborescence de site web</em></figcaption></figure>
</div>


<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">3- Préparation du contenu du site</h3>



<p>3e étape : préparer le contenu du site, c'est-à-dire les textes, les visuels, les icônes, ... Bref, tout ce qui viendra alimenter notre site.</p>



<p>Cette étape sera grandement facilitée si vous avez bien fait les deux premières.</p>



<p>Aussi, de mon expérience de créatrice de sites web, c'est beaucoup plus facile de d'abord rédiger les textes, avant de passer au webdesign. En effet, difficile de penser la mise en page de quelque chose qu'on n'a pas encore rédigé !</p>



<p>Autre point important, si ce n'est pas encore fait dans votre entreprise : définissez ou faites créer votre identité visuelle. C'est la base de votre image de marque, votre site doit la respecter pour être cohérent avec l'ensemble de votre communication. Encore une fois, si les choses sont clairement définies, ce sera beaucoup plus simple de passer au design du site.</p>



<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">4- Webdesign</h3>



<p>Quand on sait exactement comment notre site sera organisé et ce qu'il contiendra, on peut passer au webdesign.</p>



<p>Vous pouvez passer par une phase d'exploration graphique (sur des sites comme <a href="https://fr.pinterest.com/" target="_blank" rel="noreferrer noopener">Pinterest</a> ou <a href="https://www.behance.net/" target="_blank" rel="noreferrer noopener">Behance</a>), en vous demandant quelle ambiance vous souhaitez dégager sur votre site. Demandez-vous ce que votre cible a envie de ressentir, et ne vous fiez pas seulement à vos goûts. Aidez-vous également du travail que vous aurez déjà effectué sur votre identité visuelle. Le site en est un prolongement.</p>



<p>Lors de cette phase, il est important de faire&nbsp;<strong>des choix éco-responsables</strong>&nbsp;aussi pour le design.</p>



<p>Par exemple, choisir des couleurs avec un contraste suffisant, des polices lisibles (le must pour un site éco-conçu c'est d'utiliser les polices que l'on appelle "standard" ou "web safe") ou encore de faire des choix de visuels inclusifs.</p>



<p>Je vous précise dans un autre article <a href="https://steffilala.fr/webdesign-eco-responsable/" data-type="link" data-id="https://steffilala.fr/webdesign-eco-responsable/">7 règles pour un webdesign eco-responsable</a>.</p>



<p>Je vous conseille fortement aussi de passer par une maquette, ou au moins un schéma de l'organisation de vos pages avant de vous lancer pour de vrai, vous gagnerez un temps fou !</p>



<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>


<div class="wp-block-image">
<figure class="alignleft size-full"><img decoding="async" width="500" height="262" src="https://steffilala.fr/wp-content/uploads/2025/02/wireframe-site-web.jpeg" alt="exemple de wireframes" class="wp-image-31892" srcset="https://steffilala.fr/wp-content/uploads/2025/02/wireframe-site-web.jpeg 500w, https://steffilala.fr/wp-content/uploads/2025/02/wireframe-site-web-300x157.jpeg 300w" sizes="(max-width: 500px) 100vw, 500px" /><figcaption class="wp-element-caption"><em>Schéma de pages web</em></figcaption></figure>
</div>


<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">5- Intégration du site selon les bonnes pratiques de l'éco-conception</h3>



<p>L'intégration, c'est le moment de construire le site web écologique pour de vrai.</p>



<p>Et comme vous le voyez, c'est presque la dernière étape.</p>



<p><strong>Au final, la préparation est le plus important et aussi la plus grosse partie du travail.</strong></p>



<p>Lors de la phase d'intégration, beaucoup de choix et de "gestes métiers" peuvent impacter l'éco-responsabilité du site. Vous pouvez vous référez au guide en la matière : <a href="https://rweb.greenit.fr/" target="_blank" rel="noreferrer noopener">les 115 bonnes pratiques de l'éco-conception web par le collectif Green IT</a>.</p>



<p>Je peux quand même vous lister les plus simples à mettre en place :</p>



<ul class="wp-block-list">
<li>Choisir un hébergeur éthique (si vous ne comprenez rien à cette partie technique, vous pouvez lire cet article : <a href="https://steffilala.fr/hebergement-web-ecologique/" data-type="post" data-id="29662">Hébergement web écologique : tout comprendre facilement</a>). Personnellement, je vous conseille <a href="https://www.infomaniak.com/goto/fr/home?utm_term=61731c9b47a85" target="_blank" rel="noreferrer noopener"><strong>Infomaniak</strong></a>*. C'est fiable, vraiment engagé et l'interface est assez facile à prendre en main (ce qui n'est pas souvent le cas !)</li>



<li>Redimensionner et compresser vos images avant de les importer sur le site.</li>



<li>Limiter au maximum les animations et carrousels.</li>



<li>Limiter au maximum les extensions.</li>



<li>Choisir un thème léger.</li>



<li>Éviter la vidéo.</li>



<li>S'assurer que les contrastes entre la couleur de fond de votre site et la couleur du texte est suffisant avec un outil comme <a href="https://toolness.github.io/accessible-color-matrix/" target="_blank" rel="noreferrer noopener">Accessible color palette builder</a>.</li>



<li>Préférer <a href="https://fr.matomo.org/" target="_blank" rel="noreferrer noopener">Matomo</a> à Google Analytics pour les statistiques (plus respectueux de la vie privée)</li>



<li>...</li>
</ul>



<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">6- Évaluation de l'impact du site</h3>



<p>Enfin, vous aurez votre faire tous les efforts du monde pour créer un site web écologique, il aura toujours un impact.</p>



<p>Il me semble important dans une démarche d'éco-conception de mesurer l'impact et de communiquer en toute transparence dessus.</p>



<p>Personne de vous demande la perfection, simplement l'authenticité de votre démarche.</p>



<p>Pour ce faire, je vous conseille l'outil <a href="https://steffilala.fr/eco-index/">eco-index</a> du Collectif Green IT (encore) : facile à utiliser et à comprendre, vous pourrez même afficher le score en bas de vos pages pour informer et sensibiliser votre audience !</p>



<p></p>


<div class="wp-block-image">
<figure class="alignleft size-full"><img loading="lazy" decoding="async" width="1000" height="581" src="https://steffilala.fr/wp-content/uploads/2025/02/extension-eco-index.jpg" alt="Aperçu du fonctionnement de l'extension eco index" class="wp-image-31898" srcset="https://steffilala.fr/wp-content/uploads/2025/02/extension-eco-index.jpg 1000w, https://steffilala.fr/wp-content/uploads/2025/02/extension-eco-index-300x174.jpg 300w, https://steffilala.fr/wp-content/uploads/2025/02/extension-eco-index-768x446.jpg 768w" sizes="auto, (max-width: 1000px) 100vw, 1000px" /></figure>
</div>


<div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div>



<p>Vous savez donc maintenant tout ce qu'il y avait à savoir pour créer votre <strong>site web écologique</strong> ! J'ai vraiment essayé de rendre ça le plus accessible possible, même sans grande connaissance technique, alors j'espère y être parvenue.</p>



<p>➡️ Si vous souhaitez que je vous accompagne dans cette démarche, jetez un oeil à <strong><a href="https://steffilala.fr/site-web/" data-type="page" data-id="127">mes services de création de sites WordPress éthiques</a></strong> !</p>



<p class="has-small-font-size">*<em>lien affilié</em> <em>: je touche une commission si vous achetez un service via ce lien, mais le prix ne change pas pour vous. Mon avis sur ce service n'est en aucun cas influencé.</em></p>
]]></content:encoded>
					
					<wfw:commentRss>https://steffilala.fr/site-web-ecologique/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Webdesign éco-responsable : 7 règles simples pour un site beau, pro et léger</title>
		<link>https://steffilala.fr/webdesign-eco-responsable/</link>
					<comments>https://steffilala.fr/webdesign-eco-responsable/#respond</comments>
		
		<dc:creator><![CDATA[Steffi]]></dc:creator>
		<pubDate>Wed, 30 Apr 2025 04:30:00 +0000</pubDate>
				<category><![CDATA[Éco-conception web]]></category>
		<guid isPermaLink="false">https://entreprendre-ethique.fr/?p=31884</guid>

					<description><![CDATA[Tu as envie de créer un site responsable, aligné avec tes valeurs éthiques et écologiques ? Tu es au bon endroit ! Dans une démarche de sobriété numérique, le webdesign éco-responsable joue un rôle central. Parce qu'un site bien pensé et bien présenté c’est : Bref, plus de performance web, moins de pollution et surtout, [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Tu as envie de <strong>créer un site responsable</strong>, aligné avec tes valeurs éthiques et écologiques ? Tu es au bon endroit ! Dans une démarche de <strong>sobriété numérique</strong>, le <strong>webdesign éco-responsable</strong> joue un rôle central.</p>



<p>Parce qu'un site bien pensé et bien présenté c’est :</p>



<ul class="wp-block-list">
<li>Moins de pages à charger</li>



<li>Moins de clics inutiles</li>



<li>Moins de ressources consommées</li>
</ul>



<p>Bref, <strong>plus de performance web</strong>, moins de pollution et surtout, des internautes satisfait·es 😊<br>La bonne nouvelle : pas besoin d’être designer ou développeur·se pour t’y mettre : ces <strong>bonnes pratiques UX UI</strong> sont accessibles à toutes (UX= expérience utilisateurice / UI : design d'interface).</p>



<p>Alors c'est parti, je te donne tout de suite 7 règles de bases en design web éco-responsable !</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<div class="wp-block-columns has-border-color is-layout-flex wp-container-core-columns-is-layout-0d2466c3 wp-block-columns-is-layout-flex" style="border-color:#111111;border-width:1px;border-radius:10px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-color has-link-color wp-elements-8f6f0d9035812847d538b88730e0fa07" style="color:#360c44"><strong>Sommaire</strong></p>



<ol class="wp-block-list">
<li><a href="/#pourquoi">Simplifie l'expérience utilisateurice</a></li>



<li><a href="/#tuto">Structure avec une hiérarchie visuelle claire</a></li>



<li><a href="/#miseenpage">Allège la mise en page</a></li>



<li><a href="/#couleurs">Utilise une palette de couleurs simple et accessible</a></li>



<li><a href="/#typo">Choisis une typographie lisible et légère</a></li>



<li><a href="/#navigation">Crée une navigation simple et intuitive</a></li>



<li><a href="/#images">Utilise les images avec stratégie</a></li>
</ol>
</div>
</div>



<div style="height:100px" aria-hidden="true" id="ux" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">1. Simplifie l’expérience utilisateur (UX) pour aller à l’essentiel</h2>



<p>La première règle d’un <strong>design web durable</strong> : <strong>ne surcharge pas l’expérience</strong>.</p>



<p>Pose-toi cette question simple : <strong>que vient chercher la personne qui arrive sur ton site internet écoresponsable</strong> ?<br>Il faut qu’elle le trouve rapidement, sans cliquer 10 fois ou chercher pendant 20 ans. Les gens ne cherchent jamais très longtemps sur un site. Si iels ne trouvent pas, iels vont ailleurs.</p>



<p>Exemple d’un parcours clair :<br><strong>Accueil → Prestations → Contact</strong></p>



<p>Voilà, pas (<em>forcément</em>) besoin de plus. On a souvent tendance à se prendre trop la tête sur son site. Mais chaque page, chaque clic en trop, c’est une dépense inutile (<strong><em>énergétique, cognitive et environnementale</em></strong>). Et surtout, un effort que ta cible ne voudra peut-être pas fournir.</p>



<p>Alors mon conseil : fais un petit schéma de ton <strong>parcours utilisateur</strong> avant même de penser au design. C’est la base d’une <strong>green UX</strong> efficace.</p>



<p>🧩 Pour faire cela, pense à créer l'<a href="https://steffilala.fr/arborescence-site-web/" data-type="post" data-id="30572">arborescence de ton site</a> !</p>



<div style="height:100px" aria-hidden="true" id="hierarchie" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">2. Structure avec une hiérarchie visuelle claire (UX &amp; UI)</h2>



<p>Un bon <strong>webdesign éco-responsable</strong>, c’est aussi un <strong>contenu structuré</strong> pour guider l’œil.</p>



<p>Sur le web, on <strong>scanne</strong> plus qu’on ne lit. Si ta cible ne trouve pas ce qu’elle cherche en 3 secondes, elle s’en va.</p>



<p>Pour éviter ça :</p>



<ul class="wp-block-list">
<li><strong>Utilise des titres hiérarchisés </strong>(H1 > H2 > H3) : les niveaux de titre que tu peux voir sur ton outil de création de site web ne doivent pas être utilisés pour styliser ton texte (pour faire joli), ils doivent vraiment indiquer la structure de ta page. Un peu comme quand on était à l'école : après le grand 1, c'était le petit 1. Ici c'est pareil : après le H1, c'est le H2, puis le H3. On ne saute pas de niveau (il peut bien sûr y avoir plusieurs H2 (sous-titres) ou H3 (sous sous-titres).</li>



<li>Organise le contenu en <strong>blocs clairs</strong> (une idée = un bloc)</li>
</ul>



<p>Résultat ? Un site plus lisible, plus rapide, plus agréable. Et surtout, des visiteur·ses qui comprennent bien l'information et trouvent ce qu'iels cherchent !</p>



<div style="height:100px" aria-hidden="true" id="miseenpage" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">3. Allège la mise en page (et ta charge mentale)</h2>



<p>Dans un site internet écoresponsable, chaque élément compte.</p>



<p>Trop de colonnes, de cadres, d’icônes = trop d'infos = on ne sait plus quoi regarder, quoi lire.<br>Un <strong>design épuré</strong>, c’est plus de clarté, plus de fluidité, et <strong>moins de ressources à charger</strong>.</p>



<p>Pas besoin de complexité pour être professionnelle (<em>c'est même souvent plutôt l'inverse !</em>) :</p>



<ul class="wp-block-list">
<li>Préfère un style minimal, sans fioritures</li>



<li><strong>Aère avec des marges</strong> généreuses : c'est l'erreur n°1 que je vois sur les sites. Le vide fait peur mais il est pourtant essentiel pour une bonne <strong>ergonomie</strong> !</li>



<li>Évite les effets graphiques lourds, surtout si ce n'est pas ton métier de base. Un graphisme très présent, ça peut être pertinent, mais c'est un vrai travail, ça ne s'improvise pas.</li>
</ul>



<p>Épuré ne veut pas dire chiant ou froid. C’est de la <strong>sobriété numérique</strong> au service du confort de ton audience. Et ça n'empêche pas d'avoir un site dynamique ou chaleureux !</p>



<p>🧩 Pour tester ta mise en page avant de foncer tête baissée dans la création de ton site, pense à faire une <a href="https://steffilala.fr/maquette-site-web/" data-type="post" data-id="141">maquette</a> !</p>



<div style="height:100px" aria-hidden="true" id="couleurs" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">4. Utilise une palette de couleurs simple et accessible</h2>



<p>Quatrième règle ultra-importante : un <strong>webdesign éco-responsable</strong> c'est une palette accessible !</p>



<p>Ça signifie donc qu'au-delà de l'harmonie et de la cohérence dans le choix de tes couleurs, les contrastes doivent être suffisant pour assure une bonne lisibilité. Pour vérifier ça, tu peux utiliser mon <a href="https://toolness.github.io/accessible-color-matrix/" rel="noopener">outil chouchou</a>.</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" src="https://steffilala.fr/wp-content/uploads/2025/02/eco-couleurs-web-exemple.jpg" alt="Image d'un contraste de couleurs suffisant pour un webdesign éco-responsable" class="wp-image-138"/></figure>
</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" src="https://steffilala.fr/wp-content/uploads/2025/02/eco-couleurs-web-exemple-1.jpg" alt="Exemple d'éco-couleurs avec un contraste insuffisant" class="wp-image-137"/></figure>
</div></div>
</div>



<p>Et pour en savoir plus sur ce sujet, tu peux lire mon article dédié aux <a href="https://steffilala.fr/eco-couleurs-web/" data-type="post" data-id="136">éco-couleurs web</a>.</p>



<p>Concernant le nombre de couleurs, là aussi, la simplicité sera toujours une bonne option, pas besoin d'en faire des tonnes :</p>



<ul class="wp-block-list">
<li>Une couleur principale</li>



<li>Une couleur secondaire</li>



<li>Éventuellement un accent</li>
</ul>



<p>Cela améliore la <strong>performance web</strong> (moins à charger), mais aussi l’<strong>accessibilité web</strong>.</p>



<p>Pense aussi à garder une cohérence sur tout le site. Par exemple, pour les boutons, définis un bouton principal (couleur, taille, bordure ou non, rond ou carré, ...) et éventuellement un bouton secondaire et utilise seulement ces deux là sur ton site. </p>



<p>Résultat : <strong>un site inclusif, harmonieux, et durable</strong>.</p>



<div style="height:100px" aria-hidden="true" id="typo" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">5. Choisis une typographie lisible et légère</h2>



<p>La typographie influence beaucoup l’expérience utilisateur, la lisibilité, <strong>et le poids de ta page</strong>.</p>



<ul class="wp-block-list">
<li>Deux polices suffisent souvent (trois max)</li>



<li>Utilise une <strong>police système</strong> ou web safe (<em>déjà installée sur l’appareil</em>), ou une <strong>police variable</strong> optimisée (<em>les formats les plus légers sont le woff et woff2</em>)</li>



<li>La police pour le corps de texte doit être une police sans serif (<em>pour les titres et les phrases d'accentuation, c'est plus libre mais ça doit rester facilement lisible</em>)</li>



<li>Sois attentive à la <strong>taille, l’interlignage et le contraste</strong></li>
</ul>



<p>Pour t'aider sur ce dernier point, voici quelques repères sur la taille et l'interlignage du texte :</p>



<ul class="wp-block-list">
<li>Si tu le peux, utilise une unité variable comme em ou rem à la place des pixels</li>



<li>Pour le corps de texte : 1 ou 1.125 rem minimum (= 16 ou 18 pixels)</li>



<li>Pour l'interlignage (= l'espacement entre les lignes de ton texte) : 1.5 rem minimum</li>
</ul>



<p>Là aussi, pour une bonne cohérence, les titres de même niveau doivent avoir la même apparence (<em>taille, couleurs, ...</em>) sur tout les pages du site. Voici un exemple que tu peux copier :</p>



<p><code>H1</code> : 2.5rem (40px)<br><code>H2</code> : 2rem (32px)<br><code>H3</code> : 1.5rem (24px)<br><code>H4</code> : 1.25rem (20px)</p>



<p>L'objectif, c'est que ton site soit lisible, harmonieux et agréable. Le tout, sans sacrifier l’élégance. Un bon webdesign éco-responsable, c’est aussi celui qu’on oublie tant il est fluide.</p>



<p>🧩 Tu es en train de créer ton site vitrine ? Découvre la <a href="https://steffilala.fr/site-internet-vitrine-checklist/" data-type="post" data-id="31003">checklist des éléments indispensables</a> à y mettre !</p>



<div style="height:100px" aria-hidden="true" id="navigation" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">6. Crée une navigation claire et intuitive</h2>



<p>Une <strong>navigation complexe</strong>, c’est plus de clics, plus de rechargements de pages, plus de frustration.</p>



<p>Pour un <strong>site responsable</strong> et efficace :</p>



<ul class="wp-block-list">
<li>Menu avec 3 à 6 liens max : oui je sais, c'est dur, tout nous semble important mais il faut choisir !</li>



<li>Pied de page simplifié : pas besoin de mettre 8000 infos, concentre toi sur ce que ta cible veut retrouver rapidement.</li>



<li>Liens explicites et utiles : sur le web, il est d'usage de souligner les liens. C'est un point de repère pour les gens, respecte-le. Les liens doivent aussi être pensés dans l'intérêt des visiteur·ses : assure-toi qu'ils soient utiles à l'endroit où ils sont placés.</li>
</ul>



<p>Chaque clic inutile, c’est un micro-geste anti-sobriété. Ça ne change pas la face du monde, mais ça compte.</p>



<p>Un <strong>design web durable</strong>, c’est aussi un site qui respecte le temps et l’attention de ton audience.</p>



<div style="height:100px" aria-hidden="true" id="images" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">7. Utilise les images avec stratégie (pas que pour faire joli)</h2>



<p>Et enfin dernière règle de webdesign éco-responsable : les images alourdissent énormément une page, alors autant qu’elles aient un <strong>vrai rôle</strong>.</p>



<p>Par exemple, une image peut servir à :</p>



<ul class="wp-block-list">
<li>Appuyer ton message</li>



<li>Créer de la connexion</li>



<li>Aider à comprendre</li>
</ul>



<p>Quand tu ajoutes des images, privilégie :</p>



<ul class="wp-block-list">
<li>Des images compressées, adaptées au format web : webp ou jpeg au pire, on évite au max le png. La taille de ton image doit aussi être cohérente avec son utilisation : aucun site n'a besoin d'une image de 3000 x 3000 pixels. Avant même de penser à la compresser, pense à la retailler.</li>



<li>Des icônes simples, non animées</li>



<li>Du texte alternatif pour chaque image : c'est important à la fois pour <strong>l'accessibilité et le SEO</strong></li>
</ul>



<p>Quand on sait que les médias sont ce qui pèse le plus lourd sur le web, cette dernière régle de webdesign éco-responsable n'est pas à prendre à la légère (<em>haha, excellent jeu de mot</em>)</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<p>Créer un <strong>site internet écoresponsable</strong>, ce n’est pas qu’une histoire de technique. Tout commence avec le <strong>webdesign éco-responsable</strong> : des choix simples, mais importants, qui rendent ton site plus lisible, plus léger, plus éthique.</p>



<p>Alors voilà, maintenant tu sais comment proposer une <strong>expérience plus douce, plus fluide, plus respectueuse</strong> de ta cible et de la planète. À toi de jouer !</p>



<p>P.S. : besoin d'aide pour créer ton webdesign éco-responsable ? Découvre <a href="https://steffilala.fr/#services">mes services</a> !</p>
]]></content:encoded>
					
					<wfw:commentRss>https://steffilala.fr/webdesign-eco-responsable/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Éco-couleurs web : faut-il tout concevoir en dark mode ?</title>
		<link>https://steffilala.fr/eco-couleurs-web/</link>
					<comments>https://steffilala.fr/eco-couleurs-web/#respond</comments>
		
		<dc:creator><![CDATA[Steffi]]></dc:creator>
		<pubDate>Fri, 16 Feb 2024 05:30:00 +0000</pubDate>
				<category><![CDATA[Éco-conception web]]></category>
		<guid isPermaLink="false">https://entreprendre-ethique.fr/?p=136</guid>

					<description><![CDATA[Si vous vous êtes déjà intéressé·es de près ou de loin au design éco-responsable, vous avez probablement croisé le concept d’éco-couleurs. En effet, quand on conçoit un design, le choix des couleurs peut se révéler important pour l’impact écologique, surtout si vous devez imprimer. Mais qu’en est-il lorsqu'on cherche à créer un site écologique ? [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Si vous vous êtes déjà intéressé·es de près ou de loin au design éco-responsable, vous avez probablement croisé le concept d’éco-couleurs. En effet, quand on conçoit un design, le <strong>choix des couleurs</strong> peut se révéler important pour l’impact <strong>écologique</strong>, surtout si vous devez imprimer. Mais qu’en est-il lorsqu'on cherche à <a href="https://steffilala.fr/site-web-ecologique/" data-type="post" data-id="31949">créer un site écologique</a> ? Existe-t-il des <strong>éco-couleurs web</strong> ? Réponse dans cet article !</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Éco-couleurs web : déconstruisons un mythe</h2>



<p>Je vais commencer cet article par vous raconter une anecdote. Mon projet de fin d’année de ma licence en design web et numérique consistait à imaginer le site web pour un produit écologique. Avec mon groupe, on imagine donc un site qu’on voudrait le plus éco-responsable possible, notamment en le rendant simple, avec juste le nécessaire dans les infos et fonctionnalités.</p>



<p>On présente notre projet, content·es comme des briques de notre travail, et là, un membre du jury nous balance : “Bon déjà quand on fait un site majoritairement blanc, c’est mal barré pour être éco-responsable.”</p>



<p>Pour sa défense, il n’était pas spécialisé en <a href="https://steffilala.fr/webdesign-eco-responsable/" data-type="post" data-id="31884">design web éco-responsable</a>, alors il avait, comme beaucoup de novices, une croyance bien ancrée sur les éco-couleurs web. Cette croyance : les couleurs claires consomment plus d’énergie que les couleurs foncées sur le web.</p>



<p>Ce n’est pas totalement faux, sauf que :</p>



<ul class="wp-block-list">
<li>C’est de moins en moins vrai sur les nouveaux écrans. Et comme on change de téléphone plus souvent qu’on ne lave son frigo, les personnes avec des vieux écrans sont relativement rares.</li>



<li>L’énergie que consomme un écran, c’est du pipi de chat à l’échelle de l’impact d’un site ou d’une appli (pardon pour cette expression, mais je l’adore 🤷🏻‍♀️). Diminuer le poids de la page, le nombre de requêtes ou encore <a href="https://template.entreprendre-ethique.fr/hebergement-web-ecologique/" target="_blank" rel="noreferrer noopener">choisir un hébergement responsable</a>, c’est beaucoup, beaucoup, beaucoup plus important.</li>
</ul>



<p>Alors parler d’<strong>éco-couleurs web</strong>, pourquoi pas. Mais ça ne veut certainement pas dire qu’il faut tout designer en <strong>dark mode</strong> (je déteste le dark mode).</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Les bonnes pratiques pour des couleurs éco-responsables sur le web</h2>



<p>Bon on l’a compris, choisir des éco-couleurs web pour des questions d’énergie, c’est un peu un coup d’épée dans l’eau. Pour autant, il y a quand même des bonnes pratiques à respecter !</p>



<p>Enfin plutôt une principale : vérifier le <strong>contraste</strong> de vos couleurs !</p>



<p>D’ailleurs cette bonne pratique ne s’applique pas qu’aux éco-couleurs web. En print (= la communication imprimée) aussi, c’est important.</p>



<p>Pour assurer la lisibilité et l’accessibilité de vos supports de communication, sur le web ou non, le contraste entre la couleur de fond de votre design et la couleur de vos textes doit être suffisant. Donc on oublie les tons sur tons pastel. Un design joli c’est cool, mais si personne n’arrive à lire, ça sert à rien.</p>



<p>C’est d’autant plus important sur le web que les couleurs ne rendent pas pareil selon les <strong>écrans</strong>. Il y a des écrans où les couleurs sont plus contrastées que d’autres. Donc ce que vous voyez sur votre écran quand vous créez votre site ou vos posts Instagram ne sera pas exactement la même chose que ce que vos utilisateurices verront sur leur appareil !</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="583" height="278" src="https://steffilala.fr/wp-content/uploads/2025/02/eco-couleurs-web-exemple.jpg" alt="Image d'un contraste de couleurs suffisant pour des eco-couleurs web" class="wp-image-31886" srcset="https://steffilala.fr/wp-content/uploads/2025/02/eco-couleurs-web-exemple.jpg 583w, https://steffilala.fr/wp-content/uploads/2025/02/eco-couleurs-web-exemple-300x143.jpg 300w" sizes="auto, (max-width: 583px) 100vw, 583px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" src="https://steffilala.fr/wp-content/uploads/2025/02/eco-couleurs-web-exemple-1.jpg" alt="Exemple d'éco-couleurs avec un contraste insuffisant" class="wp-image-137"/></figure>
</div>
</div>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p>Alors comment savoir me direz-vous ?</p>



<p>Et bien il existe beaucoup d’outils pour vérifier que le contraste des couleurs répond bien aux normes du WCAG (le référentiel mondial pour des outils numériques accessibles).</p>



<p>Ma préférence personnelle va à <a href="https://contrast-finder.tanaguru.com/" data-type="link" data-id="https://contrast-finder.tanaguru.com/" target="_blank" rel="noreferrer noopener">Tanaguru Contrast Finder</a> car cet outil propose des couleurs alternatives à utiliser si jamais le contraste n’est pas suffisant. J'aime aussi beaucoup <a href="https://toolness.github.io/accessible-color-matrix/" target="_blank" rel="noreferrer noopener">Accessible Color Palette Builder</a> car il permet de voir en un coup d'oeil si notre <strong>palette de couleurs</strong> est bien faite ou si il faut la revoir.</p>



<p>Vous voyez finalement, choisir des éco-couleurs web, ce n’est pas très compliqué. Et ça signifie aussi que créer un site éco-responsable ne veut pas forcément dire renoncer à certaines couleurs ! Il faut juste s’assurer qu’elles fonctionnent bien ensemble. C’est d’ailleurs quelque chose qu’il est préférable de penser dès la création de votre identité visuelle, puisque ce sera important sur tous vos supports de communication, web ou pas !</p>



<p>P.S. : Utiliser des éco-couleurs web, ça n'améliorera pas votre <a href="https://steffilala.fr/eco-index/">eco-index</a> (l'outil de mesure de l'impact d'un site). Mais pour autant, c'est CRUCIAL. Parce que l'éco-conception, c'est prendre en compte l'environnement ET la société. Ça n'a pas de sens de faire l'un sans l'autre. Pour plus de détails, j'ai rédigé un article qui explique très concrètement <a href="https://steffilala.fr/impact-environnemental-site-internet/" data-type="link" data-id="https://steffilala.fr/impact-environnemental-site-internet/">l'impact environnement et sociétal d'un site web</a>.</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Éco-couleur print : qu’en est-il ? Par Lucie Colin, graphiste eco-responsable</h2>



<p><em>Je vous l’ai dit en introduction, les éco-couleurs, c’est un sujet important quand on imprime ses supports. Alors pour vous conseiller sur ce sujet, c’est Lucie Colin, graphiste Éco-responsable, qui vous explique tout ce qu’il faut savoir !</em></p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<p>Le concept des éco-couleurs est essentiellement utilisé dans le cadre d’une communication imprimée. Ici, elles ont un réel intérêt écologique. En effet, l'utilisation d'éco-couleurs sur ta communication papier réduira directement son empreinte environnementale.</p>



<p>Les encres utilisées en impression ont un impact significatif sur l'environnement en raison de leur composition, mais aussi des ressources qu’elles demandent dans le nettoyage des machines et le recyclage des papiers imprimés.</p>



<p>Même si ce n’est pas la seule, avoir recours à des éco-couleurs est une des solutions existantes pour limiter l’impact environnemental de ta communication imprimée. Celles-ci ont la particularité d’être moins gourmandes en ressources et de faciliter le recyclage des matériaux.</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">Les caractéristiques d’une éco-couleur en communication imprimée</h3>



<p>Une éco-couleur a pour caractéristique de limiter la quantité des encres utilisées à l’impression pour recréer sa teinte. En impression, les couleurs sont issues d’une encre ou d’un mélange de plusieurs encres superposées : le cyan, le magenta, le jaune, et le noir. L’objectif d’une éco-couleur est de limiter la quantité d’encre superposée sur le papier.</p>



<p>Par exemple : un violet foncé peut avoir une&nbsp;<strong>charge d’encrage</strong>&nbsp;à Cyan 100%, Magenta 100%, Jaune 0% et Noir 50%. Si on fait le calcul total, on arrive à 250% de taux d’encrage en tout, en additionnant les pourcentages d’encres utilisées pour obtenir cette couleur.</p>



<p>Et bien, une éco-couleur est une couleur qui nécessite au maximum une&nbsp;<strong>charge d’encrage de 100%</strong>&nbsp;en CMJN, comme :</p>



<ul class="wp-block-list">
<li>Un noir pur (C0 ; M0 ; J0 ; N100)</li>



<li>Un vert anis (C15 ; M0 ; J70 ; N0)</li>



<li>Un bleu pastel (C30 ; M3 ; J0 ; N0)</li>
</ul>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>


<div class="wp-block-image">
<figure class="aligncenter size-large is-resized"><img decoding="async" src="https://steffilala.fr/wp-content/uploads/2025/02/Couleurs-eco-concues-1024x488.png" alt="3 rond de couleur noir, vert anis et bleu pastel représentant une palette de couleurs éco-conçue" class="wp-image-139" style="width:360px;height:auto"/></figure>
</div>


<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">Créer une palette de couleurs éco-responsable efficace</h3>



<p>Opter pour une&nbsp;<strong>palette de couleurs éco-responsable</strong> est une très bonne façon de limiter l’impact environnemental de ta communication et renforcer la cohérence de ton image de marque pour plus de crédibilité sur ton marché.</p>



<p>En revanche, tout comme pour les éco-couleurs web, une gamme colorée efficace est une gamme colorée contrastée qui permet une bonne accessibilité de lecture. Ainsi, la <strong>palette de couleurs d’une identité visuelle éco-conçue</strong> n’est pas nécessairement composée uniquement d’éco-couleurs. Elle est surtout construite intelligemment pour prioriser l’utilisation de teintes éco-conçues lors de l’impression.</p>



<p>Afin d’assurer la lisibilité de tes supports de communication, ton identité visuelle peut être composée de teintes éco-conçues avec d'autres couleurs plus vives ou profondes. Une&nbsp;<strong>gamme colorée raisonnée</strong>&nbsp;pourra te permettre de privilégier l’utilisation d’éco-couleurs sur des grandes surfaces imprimées, en assurant une bonne lisibilité générale.</p>



<p>Au-delà des couleurs en elles-mêmes, il est également important de limiter les surfaces imprimées en ayant recours à différentes techniques de traitement graphique : tramage, défonce, motif, texture, photographie monochrome, etc. Et oui, les éco-couleurs ne sont qu’une infime partie du graphisme éco-responsable !</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<p>Vous savez maintenant tout ce qu'il y a à savoir sur les éco-couleurs web et print. Vous pourrez ainsi créer des supports de communication plus respecteux de l'environnement et de la société sur tous les canaux !</p>



<p>🌱 Merci encore à <a href="https://luciecolin.com/" target="_blank" rel="noreferrer noopener">Lucie, graphiste éco-responsable</a> pour ces conseils. Vous pouvez retrouver d'autres conseils sur son blog !</p>
]]></content:encoded>
					
					<wfw:commentRss>https://steffilala.fr/eco-couleurs-web/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Ecoindex : comment l&#039;utiliser pour un site + responsable ?</title>
		<link>https://steffilala.fr/eco-index/</link>
					<comments>https://steffilala.fr/eco-index/#respond</comments>
		
		<dc:creator><![CDATA[Steffi]]></dc:creator>
		<pubDate>Thu, 25 Jan 2024 05:30:00 +0000</pubDate>
				<category><![CDATA[Éco-conception web]]></category>
		<guid isPermaLink="false">https://entreprendre-ethique.fr/?p=183</guid>

					<description><![CDATA[En matière de démarche éco-responsable, il y a une chose aussi fondamentale que mes 8 heures de sommeil par nuit : mesurer ses impacts. Et en matière de site web, il y a un outil qui se démarque selon moi : l'ecoindex. Alors comment l'utiliser et pourquoi je vous le recommande ? Je vous dis [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>En matière de démarche éco-responsable, il y a une chose aussi fondamentale que mes 8 heures de sommeil par nuit : <strong>mesurer ses impacts</strong>. Et en matière de site web, il y a un outil qui se démarque selon moi : <strong>l'ecoindex</strong>. Alors comment l'utiliser et pourquoi je vous le recommande ? Je vous dis tout dans cet article !</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p><strong>SOMMAIRE</strong></p>



<p><a href="/#definition">Qu'est-ce que l'ecoindex ?</a></p>



<p><a href="http://utilisation">Comment utiliser l'ecoindex ?</a></p>



<p><a href="http://avis">Pourquoi utiliser cet outil plus qu'un autre : mon avis</a></p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading" id="definition">Qu'est-ce que l'ecoindex ?</h2>



<p>L'ecoindex est un <strong>outil de mesure de l'impact environnemental d'une page web</strong>. Développé par Frédéric Bordage, pilier de l'éco-conception en France, l'outil se base sur les <a href="https://collectif.greenit.fr/ecoconception-web/115-bonnes-pratiques-eco-conception_web.html" target="_blank" rel="noreferrer noopener">115 bonnes pratiques de l'éco-conception web</a>. C'est donc un outil très complet, qui propose en plus différentes façons d'être utilisé (de "même ma mère peut y arriver" à "bon là faut être un peu geek quand même", cf ci-dessous).</p>



<p>L'outil est gratuit et il peut être utilisé par tout le monde à condition de citer la source. Le résultat vous donnera <strong>une note de A à G</strong> (un peu comme le nutriscore de vos céréales ou l'étiquette énergétique de votre frigo) + <strong>un score sur 100</strong>.</p>



<p>Pour évaluer l'impact de votre page, il va se baser sur 3 groupes de critères : </p>



<ul class="wp-block-list">
<li><strong>Le DOM</strong> : un acronyme un peu technique qui représente à quel point votre page est complexe. En gros : est-ce qu'il y a beaucoup d'éléments sur votre page ? On parle ici des éléments HTML, donc toute la structure de votre page : les sections, les colonnes, les rangées, les paragraphes, ...</li>



<li><strong>Le poids de la page</strong> : ça, généralement, c'est plus facile à comprendre. Est-ce que votre page est lourde ou pas ? Souvent, ce sont surtout les médias qui pèsent (les images par exemple).</li>



<li><strong>Le nombre de requêtes</strong> : ça en gros, c'est le nombre de trucs que votre page va demander aux serveurs pour s'afficher. C'est généralement déterminé par votre thème, vos extensions ou encore les fonctionnalités sur votre page. Par exemple, afficher les avis Google automatiquement, ça demande plus de requêtes aux serveurs que d'écrire du texte.</li>
</ul>



<p>Tous les critères ne sont pas aussi importants et il faut aussi prendre en compte que ça reste un outil de mesure, mais pas du tout une analyse détaillée et personnalisée de l'empreinte de votre site. Il y a beaucoup de paramètres à prendre en compte dans une démarche d'éco-conception, et la note ecoindex de la page n'est qu'un indicateur, à prendre en compte avec ses limites.</p>



<p>Si vous avez envie de creuser encore plus le sujet de comment ça marche, tout est très bien expliqué sur le site <a href="https://www.ecoindex.fr/comment-ca-marche/" target="_blank" rel="noreferrer noopener">ecoindex.fr</a>.</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading" id="utilisation">Comment utiliser l'ecoindex ?</h2>



<p>Je vous le disais plus haut, il y a plusieurs façons d'utiliser l'ecoindex :</p>



<h3 class="wp-block-heading">Le site ecoindex.fr - niveau très facile</h3>



<p>La 1ère façon d'auditer une page web est très simple :</p>



<ol class="wp-block-list">
<li>Se rendre sur le site ecoindex.fr</li>



<li>Entrer l'URL de la page que vous souhaitez évaluer</li>



<li>Le résultat s'affiche en quelques secondes !</li>
</ol>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p>En premier lieu, vous aurez donc <strong>la note de la page</strong> :</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" src="https://steffilala.fr/wp-content/uploads/2025/02/score-eco-index.jpg" alt="Note eco index de la page cetaitmieuxdemain.com" class="wp-image-185"/></figure>
</div>


<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<p>Ensuite, pour que vous vous représentiez un peu plus facilement les impacts, vous aurez <strong>l'équivalent en packs d'eau et en nombres de kilomètres</strong> en voiture que cela représente :</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" src="https://steffilala.fr/wp-content/uploads/2025/02/equivalents-eco-index.jpg" alt="Exemple de l'empreinte environnementale calculée par ecoindex.fr" class="wp-image-186"/></figure>
</div>


<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<p>Et pour finir, le détail du score sur les 3 groupes de critères que prend en compte l'outil (poids de la page, complexité et nombre de requêtes). Vous pourrez ainsi voir facilement où le bat blesse :</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" src="https://steffilala.fr/wp-content/uploads/2025/02/detail-score-eco-index.jpg" alt="Détail du score ecoindex de la page cetaitmieuxdemain.com" class="wp-image-187"/></figure>
</div>


<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<p>La dernière partie de la page donne des recommandations générales pour améliorer l'empreinte de votre page, mais ces recommandations ne sont pas personnalisées en fonction de votre page.</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">Ecoindex : l'extension - niveau assez facile</h3>



<p>La deuxième solution pour mesurer l'impact de vos pages (ou celles de la concurrence 👀) est un chouïa moins facile puisqu'il faut savoir ajouter une extension à votre navigateur.</p>



<p>Ça reste néanmoins très accessible :</p>



<ul class="wp-block-list">
<li><a href="https://support.mozilla.org/fr/kb/trouver-installer-modules-firefox#:~:text=Cliquez%20sur%20le%20bouton%20de,selon%20le%20type%20de%20module." target="_blank" rel="noreferrer noopener">Comment ajouter une extension sur Firefox</a></li>



<li><a href="https://support.google.com/chromebook/answer/2588006?hl=fr#:~:text=Ouvrez%20le%20Chrome%20Web%20Store,cliquez%20sur%20Ajouter%20%C3%A0%20Chrome." target="_blank" rel="noreferrer noopener">Comment ajouter une extension sur Chrome</a></li>
</ul>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p>Une fois que vous avez ajouté l'extension, vous pourrez l'utiliser sur n'importe quelle page que vous visitez. En quelques secondes, vous aurez accès à la note de A à G, au score sur 100 mais aussi à l'historique ! Une fonctionnalité très pratique si vous apportez des changements à votre page et souhaitez voir l'évolution (et surtout, si vos efforts portent leurs fruits !)</p>



<p>Et si vous souhaitez voir le détail du résultat, un lien vous permet d'accéder rapidement à l'analyse sur le site ecoindex.fr que je vous ai présentée juste avant.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" src="https://steffilala.fr/wp-content/uploads/2025/02/extension-eco-index.jpg" alt="Aperçu du fonctionnement de l'extension eco index" class="wp-image-188"/></figure>
</div>


<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">L'extension GreenIT Analysis</h3>



<p>Pour les plus geek d'entre nous, une autre extension existe : <a href="https://github.com/cnumr/GreenIT-Analysis" target="_blank" rel="noreferrer noopener">GreenIT Analysis</a>.</p>



<p>Cette extension est un peu plus complexe à utiliser car il y a pas mal de précautions à prendre pour avoir un résultat fiable. Il faut aussi aller dans le panneau développeur pour l'utiliser.</p>



<p>Mais le gros avantage de GreenIT Analysis, c'est qu'on peut avoir le détail des bonnes pratiques qui sont respectées ou non, et donc savoir exactement où agir.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" src="https://steffilala.fr/wp-content/uploads/2025/02/green-it-analysis.jpg" alt="Aperçu du fonctionnement de l'extension GreenIT Analysis" class="wp-image-189"/></figure>
</div>


<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading" id="avis">Pourquoi utiliser cet outil plus qu'un autre : mon avis</h2>



<p>Alors les outils pour mesurer l'impact environnemental d'un site, il n'y en a pas autant que des coachs insta qui te promettent les 10K, mais il y en a pas mal quand même... Donc comment on choisit ?</p>



<p>La chose la plus importante quoiqu'il en soit, c'est de toujours utiliser le même, peu importe celui que vous choisissez. Car tous n'utilisent pas le même système d'évaluation ni les mêmes critères, donc si vous souhaitez suivre votre évolution ou comparer 2 pages, il faut se baser sur le même outil à chaque fois.</p>



<p>Cependant, voici pourquoi moi, j'ai donné ma préférence à ecoindex :</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">Un outil développé par GreenIT</h3>



<p>Le 1er élément qui me semble important, c'est que cet outil a été mis au point par le collectif GreenIT, un collectif à but non lucratif, dont la seule mission est de rendre le web plus responsable.</p>



<p>C'est un collectif qui est aussi pour moi parmi les pionniers et les plus avancés en terme de numérique responsable.</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">Un outil très complet</h3>



<p>Le deuxième truc que je trouve plutôt cool, c'est que l'outil est très complet.</p>



<p>Il y a un vrai effort de vulgarisation et mise à disposition de moyens d'agir même si on est novice. Mais on peut aussi aller plus loin si on a des compétences plus techniques.</p>



<p>Il existe aussi un badge ecoindex à afficher sur son site pour faire preuve de transparence et sensibiliser ses visiteurices.</p>



<p>Et enfin, dernière nouveauté à noter : la création d'une déclaration environnementale, avec un vrai process à suivre, pour standardiser les méthodes d'analyse. L'objectif est de réguler, voire à terme réglementer, les déclarations et les analyses sur le sujet de l'éco-conception web.</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<p>Je vous ai donc présenté dans cet article l'outil ecoindex : comment ça fonctionne et pourquoi j'ai choisi celui-là plutôt qu'un autre. Pour terminer, je pense que la chose importante à retenir c'est que peu importe l'outil utilisé, l'essentiel est surtout de mesurer ses impacts quand on est dans une démarche d'éco-conception. C'est un processus essentiel et indispensable pour l'efficacité de votre démarche, la transparence et l'amélioration continue !</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<style type="text/css">@import url("https://assets.mlcdn.com/fonts.css?version=1704356");</style>
    <style type="text/css">
    /* LOADER */
    .ml-form-embedSubmitLoad {
      display: inline-block;
      width: 20px;
      height: 20px;
    }

    .g-recaptcha {
    transform: scale(1);
    -webkit-transform: scale(1);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    height: ;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      border: 0;
    }

    .ml-form-embedSubmitLoad:after {
      content: " ";
      display: block;
      width: 11px;
      height: 11px;
      margin: 1px;
      border-radius: 50%;
      border: 4px solid #fff;
    border-color: #ffffff #ffffff #ffffff transparent;
    animation: ml-form-embedSubmitLoad 1.2s linear infinite;
    }
    @keyframes ml-form-embedSubmitLoad {
      0% {
      transform: rotate(0deg);
      }
      100% {
      transform: rotate(360deg);
      }
    }
      #mlb2-11133746.ml-form-embedContainer {
        box-sizing: border-box;
        display: table;
        margin: 0 auto;
        position: static;
        width: 100% !important;
      }
      #mlb2-11133746.ml-form-embedContainer h4,
      #mlb2-11133746.ml-form-embedContainer p,
      #mlb2-11133746.ml-form-embedContainer span,
      #mlb2-11133746.ml-form-embedContainer button {
        text-transform: none !important;
        letter-spacing: normal !important;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper {
        background-color: #f7f5f3;
        
        border-width: 1px;
        border-color: #2e0219;
        border-radius: 4px;
        border-style: solid;
        box-sizing: border-box;
        display: inline-block !important;
        margin: 0;
        padding: 0;
        position: relative;
              }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper.embedPopup,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper.embedDefault { width: 100%; }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper.embedForm { max-width: 100%; width: 100%; }
      #mlb2-11133746.ml-form-embedContainer .ml-form-align-left { text-align: left; }
      #mlb2-11133746.ml-form-embedContainer .ml-form-align-center { text-align: center; }
      #mlb2-11133746.ml-form-embedContainer .ml-form-align-default { display: table-cell !important; vertical-align: middle !important; text-align: center !important; }
      #mlb2-11133746.ml-form-embedContainer .ml-form-align-right { text-align: right; }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedHeader img {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        height: auto;
        margin: 0 auto !important;
        max-width: 100%;
        width: undefinedpx;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
        padding: 20px 20px 0 20px;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody.ml-form-embedBodyHorizontal {
        padding-bottom: 0;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent {
        text-align: left;
        margin: 0 0 20px 0;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 {
        color: #000000;
        font-family: 'Exo', sans-serif;
        font-size: 30px;
        font-weight: 400;
        margin: 0 0 10px 0;
        text-align: left;
        word-break: break-word;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
        color: #000000;
        font-family: 'Exo', sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        margin: 0 0 10px 0;
        text-align: left;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ul,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ul,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol {
        color: #000000;
        font-family: 'Exo', sans-serif;
        font-size: 14px;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol ol,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol ol {
        list-style-type: lower-alpha;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol ol ol,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol ol ol {
        list-style-type: lower-roman;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p a,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p a {
        color: #000000;
        text-decoration: underline;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group {
        text-align: left!important;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group label {
        margin-bottom: 5px;
        color: #333333;
        font-size: 14px;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        font-weight: bold; font-style: normal; text-decoration: none;;
        display: inline-block;
        line-height: 20px;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p:last-child,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p:last-child {
        margin: 0;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody form {
        margin: 0;
        width: 100%;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow {
        margin: 0 0 20px 0;
        width: 100%;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow {
        float: left;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent.horozintalForm {
        margin: 0;
        padding: 0 0 20px 0;
        width: 100%;
        height: auto;
        float: left;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow {
        margin: 0 0 10px 0;
        width: 100%;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-last-item {
        margin: 0;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-formfieldHorizintal {
        margin: 0;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
        background-color: #ffffff !important;
        color: #333333 !important;
        border-color: #cccccc;
        border-radius: 4px !important;
        border-style: solid !important;
        border-width: 1px !important;
        font-family: 'Exo', sans-serif;
        font-size: 14px !important;
        height: auto;
        line-height: 21px !important;
        margin-bottom: 0;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        padding: 10px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-webkit-input-placeholder,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input::-webkit-input-placeholder { color: #333333; }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-moz-placeholder,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input::-moz-placeholder { color: #333333; }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:-ms-input-placeholder,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input:-ms-input-placeholder { color: #333333; }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:-moz-placeholder,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input:-moz-placeholder { color: #333333; }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow textarea, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow textarea {
        background-color: #ffffff !important;
        color: #333333 !important;
        border-color: #cccccc;
        border-radius: 4px !important;
        border-style: solid !important;
        border-width: 1px !important;
        font-family: 'Exo', sans-serif;
        font-size: 14px !important;
        height: auto;
        line-height: 21px !important;
        margin-bottom: 0;
        margin-top: 0;
        padding: 10px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before {
          border-color: #cccccc!important;
          background-color: #ffffff!important;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input.custom-control-input[type="checkbox"]{
        box-sizing: border-box;
        padding: 0;
        position: absolute;
        z-index: -1;
        opacity: 0;
        margin-top: 5px;
        margin-left: -1.5rem;
        overflow: visible;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before {
        border-radius: 4px!important;
      }


      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type=checkbox]:checked~.label-description::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox input[type=checkbox]:checked~.label-description::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-input:checked~.custom-control-label::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-input:checked~.custom-control-label::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox input[type=checkbox]:checked~.label-description::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input:checked~.custom-control-label::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input:checked~.custom-control-label::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input:checked~.custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-input:checked~.custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-input:checked~.custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-input:checked~.custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox input[type=checkbox]:checked~.label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox input[type=checkbox]:checked~.label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type=checkbox]:checked~.label-description::before  {
          border-color: #000000!important;
          background-color: #000000!important;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::after {
           top: 2px;
           box-sizing: border-box;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
           top: 0px!important;
           box-sizing: border-box!important;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
        top: 0px!important;
           box-sizing: border-box!important;
      }

       #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::after {
            top: 0px!important;
            box-sizing: border-box!important;
            position: absolute;
            left: -1.5rem;
            display: block;
            width: 1rem;
            height: 1rem;
            content: "";
       }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before {
        top: 0px!important;
        box-sizing: border-box!important;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-control-label::before {
          position: absolute;
          top: 4px;
          left: -1.5rem;
          display: block;
          width: 16px;
          height: 16px;
          pointer-events: none;
          content: "";
          background-color: #ffffff;
          border: #adb5bd solid 1px;
          border-radius: 50%;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-control-label::after {
          position: absolute;
          top: 2px!important;
          left: -1.5rem;
          display: block;
          width: 1rem;
          height: 1rem;
          content: "";
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before {
          position: absolute;
          top: 4px;
          left: -1.5rem;
          display: block;
          width: 16px;
          height: 16px;
          pointer-events: none;
          content: "";
          background-color: #ffffff;
          border: #adb5bd solid 1px;
          border-radius: 50%;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after {
          position: absolute;
          top: 0px!important;
          left: -1.5rem;
          display: block;
          width: 1rem;
          height: 1rem;
          content: "";
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
          position: absolute;
          top: 0px!important;
          left: -1.5rem;
          display: block;
          width: 1rem;
          height: 1rem;
          content: "";
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-radio .custom-control-label::after {
          background: no-repeat 50%/50% 50%;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-checkbox .custom-control-label::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
          background: no-repeat 50%/50% 50%;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-control, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-control {
        position: relative;
        display: block;
        min-height: 1.5rem;
        padding-left: 1.5rem;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-input, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-input, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-input {
          position: absolute;
          z-index: -1;
          opacity: 0;
          box-sizing: border-box;
          padding: 0;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label {
          color: #000000;
          font-size: 12px!important;
          font-family: 'Open Sans', Arial, Helvetica, sans-serif;
          line-height: 22px;
          margin-bottom: 0;
          position: relative;
          vertical-align: top;
          font-style: normal;
          font-weight: 700;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-select, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-select {
        background-color: #ffffff !important;
        color: #333333 !important;
        border-color: #cccccc;
        border-radius: 4px !important;
        border-style: solid !important;
        border-width: 1px !important;
        font-family: 'Exo', sans-serif;
        font-size: 14px !important;
        line-height: 20px !important;
        margin-bottom: 0;
        margin-top: 0;
        padding: 10px 28px 10px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        height: auto;
        display: inline-block;
        vertical-align: middle;
        background: url('https://assets.mlcdn.com/ml/images/default/dropdown.svg') no-repeat right .75rem center/8px 10px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
      }


      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow {
        height: auto;
        width: 100%;
        float: left;
      }
      .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal { width: 70%; float: left; }
      .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-button-horizontal { width: 30%; float: left; }
      .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-button-horizontal.labelsOn { padding-top: 25px;  }
      .ml-form-formContent.horozintalForm .ml-form-horizontalRow .horizontal-fields { box-sizing: border-box; float: left; padding-right: 10px;  }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input {
        background-color: #ffffff;
        color: #333333;
        border-color: #cccccc;
        border-radius: 4px;
        border-style: solid;
        border-width: 1px;
        font-family: 'Exo', sans-serif;
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 0;
        margin-top: 0;
        padding: 10px 10px;
        width: 100%;
        box-sizing: border-box;
        overflow-y: initial;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button {
        background-color: #9E6B83 !important;
        border-color: #9E6B83;
        border-style: solid;
        border-width: 1px;
        border-radius: 4px;
        box-shadow: none;
        color: #ffffff !important;
        cursor: pointer;
        font-family: 'Exo', sans-serif;
        font-size: 18px !important;
        font-weight: 400;
        line-height: 20px;
        margin: 0 !important;
        padding: 10px !important;
        width: 100%;
        height: auto;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button:hover {
        background-color: #004643 !important;
        border-color: #004643 !important;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type="checkbox"] {
        box-sizing: border-box;
        padding: 0;
        position: absolute;
        z-index: -1;
        opacity: 0;
        margin-top: 5px;
        margin-left: -1.5rem;
        overflow: visible;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description {
        color: #000000;
        display: block;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        font-size: 12px;
        text-align: left;
        margin-bottom: 0;
        position: relative;
        vertical-align: top;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label {
        font-weight: normal;
        margin: 0;
        padding: 0;
        position: relative;
        display: block;
        min-height: 24px;
        padding-left: 24px;

      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label a {
        color: #000000;
        text-decoration: underline;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p {
        color: #000000 !important;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
        font-size: 12px !important;
        font-weight: normal !important;
        line-height: 18px !important;
        padding: 0 !important;
        margin: 0 5px 0 0 !important;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p:last-child {
        margin: 0;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
        margin: 0 0 20px 0;
        float: left;
        width: 100%;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
        background-color: #9E6B83 !important;
        border: none !important;
        border-radius: 4px !important;
        box-shadow: none !important;
        color: #ffffff !important;
        cursor: pointer;
        font-family: 'Exo', sans-serif !important;
        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 21px !important;
        height: auto;
        padding: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.loading {
        display: none;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover {
        background-color: #004643 !important;
      }
      .ml-subscribe-close {
        width: 30px;
        height: 30px;
        background: url('https://assets.mlcdn.com/ml/images/default/modal_close.png') no-repeat;
        background-size: 30px;
        cursor: pointer;
        margin-top: -10px;
        margin-right: -10px;
        position: absolute;
        top: 0;
        right: 0;
      }
      .ml-error input, .ml-error textarea, .ml-error select {
        border-color: red!important;
      }

      .ml-error .custom-checkbox-radio-list {
        border: 1px solid red !important;
        border-radius: 4px;
        padding: 10px;
      }

      .ml-error .label-description,
      .ml-error .label-description p,
      .ml-error .label-description p a,
      .ml-error label:first-child {
        color: #ff0000 !important;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p:first-letter {
        color: #ff0000 !important;
      }
            @media only screen and (max-width: 400px){

        .ml-form-embedWrapper.embedDefault, .ml-form-embedWrapper.embedPopup { width: 100%!important; }
        .ml-form-formContent.horozintalForm { float: left!important; }
        .ml-form-formContent.horozintalForm .ml-form-horizontalRow { height: auto!important; width: 100%!important; float: left!important; }
        .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal { width: 100%!important; }
        .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal > div { padding-right: 0px!important; padding-bottom: 10px; }
        .ml-form-formContent.horozintalForm .ml-button-horizontal { width: 100%!important; }
        .ml-form-formContent.horozintalForm .ml-button-horizontal.labelsOn { padding-top: 0px!important; }

      }
    </style>

    
  
    
    

    
    

    
    

    

      
        
        
      

      
        
        
      

      

            
            
            
            
            
            
      

      

      
        
        
         
        
        
      

        
        
        
        
        
        
      

       

        
        
        
        
        
        
        
       


      
        
        
        
        
  



  
        
        
        
      


      
    
    
    
    
    
    
    
  

  
        
        
        
        
        
      

      
        
        
        
        
        
      

      
        
        
        
        
        
      

       

        
        
        
        
       

       
        
        
        
        
      

      
        
        
        
        
        
        
        
       

    

    


      


      

      
      

      

      





    

      
    <div id="mlb2-11133746" class="ml-form-embedContainer ml-subscribe-form ml-subscribe-form-11133746">
      <div class="ml-form-align-center ">
        <div class="ml-form-embedWrapper embedForm">

          
          

          <div class="ml-form-embedBody ml-form-embedBodyDefault row-form">

            <div class="ml-form-embedContent" style=" ">
              
                <h4>8 outils plus éthiques pour ton entreprise !</h4>
                <p>Télécharge gratuitement ma liste de 8 outils plus éthiques pour ton entreprise&nbsp;!</p>
<p>Pour agir dès maintenant et concrètement pour réduire ton impact négatif sur la planète et ses habitant·es ❤️</p>
              
            </div>

            <form class="ml-block-form" action="https://assets.mailerlite.com/jsonp/775549/forms/110545062318834781/subscribe" data-code="" method="post" target="_blank">
              <div class="ml-form-formContent">
                

                  
                  <div class="ml-form-fieldRow ">
                    <div class="ml-field-group ml-field-name">

                      


                      <!-- input -->
                      <input aria-label="name" type="text" class="form-control" data-inputmask="" name="fields[name]" placeholder="Prénom" autocomplete="given-name">
                      <!-- /input -->

                      <!-- textarea -->
                      
                      <!-- /textarea -->

                      <!-- select -->
                      
                      <!-- /select -->

                      <!-- checkboxes -->
            
            <!-- /checkboxes -->

                      <!-- radio -->
                      
                      <!-- /radio -->

                      <!-- countries -->
                      
                      <!-- /countries -->





                    </div>
                  </div><div class="ml-form-fieldRow ml-last-item">
                    <div class="ml-field-group ml-field-email ml-validate-email ml-validate-required">

                      


                      <!-- input -->
                      <input aria-label="email" aria-required="true" type="email" class="form-control" data-inputmask="" name="fields[email]" placeholder="Email" autocomplete="email">
                      <!-- /input -->

                      <!-- textarea -->
                      
                      <!-- /textarea -->

                      <!-- select -->
                      
                      <!-- /select -->

                      <!-- checkboxes -->
            
            <!-- /checkboxes -->

                      <!-- radio -->
                      
                      <!-- /radio -->

                      <!-- countries -->
                      
                      <!-- /countries -->





                    </div>
                  </div>
                
              </div>

              

              <!-- Privacy policy -->
              
              <!-- /Privacy policy -->

              

              

              <div class="ml-form-checkboxRow ml-validate-required">
                
                  <label class="checkbox">
                    <input type="checkbox">
                    <div class="label-description">
                      <p>En cochant cette case, tu acceptes de recevoir des emails de la part de steffilala.fr/. Tu seras également inscrit·e automatiquement à la newsletter bi-mensuelle, de laquelle tu peux te désinscrire facilement à tout moment.</p>
                    </div>
                  </label>
                
              </div>






              
              <input type="hidden" name="ml-submit" value="1">

              <div class="ml-form-embedSubmit">
                
                  <button type="submit" class="primary">Je veux la liste !</button>
                
                <button disabled="disabled" style="display: none;" type="button" class="loading">
                  <div class="ml-form-embedSubmitLoad"></div>
                  <span class="sr-only">Loading...</span>
                </button>
              </div>

              
              <input type="hidden" name="anticsrf" value="true">
            </form>
          </div>

          <div class="ml-form-successBody row-success" style="display: none">

            <div class="ml-form-successContent">
              
                <h4>Youpi !</h4>
                <p>Rendez-vous dans ta boite mail pour découvrir la liste ! Pense à checker tes spams si tu ne reçois rien, et ajoute-moi à tes contacts si j'y suis 😉</p>
              
            </div>

          </div>
        </div>
      </div>
    </div>

  

  
  
  <script>
    function ml_webform_success_11133746() {
      var $ = ml_jQuery || jQuery;
      $('.ml-subscribe-form-11133746 .row-success').show();
      $('.ml-subscribe-form-11133746 .row-form').hide();
    }
      </script>
  
  
      <script src="https://groot.mailerlite.com/js/w/webforms.min.js?v2d8fb22bb5b3677f161552cd9e774127" type="text/javascript"></script>
        <script>
            fetch("https://assets.mailerlite.com/jsonp/775549/forms/110545062318834781/takel")
        </script>
]]></content:encoded>
					
					<wfw:commentRss>https://steffilala.fr/eco-index/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Quel est l&#039;impact environnemental d&#039;un site Internet ?</title>
		<link>https://steffilala.fr/impact-environnemental-site-internet/</link>
					<comments>https://steffilala.fr/impact-environnemental-site-internet/#respond</comments>
		
		<dc:creator><![CDATA[Steffi]]></dc:creator>
		<pubDate>Thu, 12 May 2022 04:30:00 +0000</pubDate>
				<category><![CDATA[Éco-conception web]]></category>
		<guid isPermaLink="false">https://entreprendre-ethique.fr/?p=207</guid>

					<description><![CDATA[Aujourd’hui j’avais envie de parler de l’impact environnemental d’un site Internet. Parce que c’est un sujet que j’aborde régulièrement : je parle souvent d’éco conception web, de communication plus éthique, de réduire la pollution numérique, etc... Je donne aussi souvent des astuces pour rendre son site plus éco-responsable. Mais en vrai, je pense que je [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Aujourd’hui j’avais envie de parler de l’impact environnemental d’un site Internet.</p>



<p>Parce que c’est un sujet que j’aborde régulièrement : je parle souvent d’éco conception web, de communication plus éthique, de réduire la pollution numérique, etc... Je donne aussi souvent des astuces pour rendre son site plus éco-responsable. Mais en vrai, je pense que je n’ai jamais décrit en long, en large et en travers l'impact réel d'un site.</p>



<p>(je l’ai fait sur certains podcasts où j'étais invitée mais pas ici)</p>



<p>Je vais donc vous expliquer dans cet article, en quoi votre site impacte l’environnement et la société.</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<iframe frameborder="0" loading="lazy" id="ausha-PDYJ" height="220" style="border: none; width:100%; height:220px" src="https://player.ausha.co/index.html?showId=BqNN6f1aMYYJ&color=%23eaaa90&podcastId=oR45aI39ZPDb&v=3&playerId=ausha-PDYJ"></iframe><script src="https://player.ausha.co/ausha-player.js"></script>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">1. L’impact environnemental du web</h2>



<p>Avant de vous expliquer quel est l'impact environnemental d'un site internet, il me semble important et même primordial d’expliquer en quoi le web en général impacte l’environnement.</p>



<p>Je vais essayer de simplifier parce que là, le but c’est pas de rentrer dans les détails techniques mais juste de comprendre un peu la dynamique globale et de se faire une idée de comment ça marche.</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">1.1 La fabrication du réseau Internet</h3>



<p>En gros, Internet, c’est des centres informatiques qui stockent des données et des terminaux qui permettent à des utilisateurices de consulter ces données.</p>



<p>Des informations sont stockées quelque part, et nous, utilisateurices, on utilise des terminaux comme des ordinateurs ou des téléphones pour y accéder, grâce à un réseau.</p>



<p>Donc le premier impact du web en fait, c’est la fabrication de tout ce réseau.</p>



<p>Alors évidemment il y a la fabrication des terminaux (téléphones, tablettes, ordinateurs, etc...).</p>



<p>Il y a aussi la fabrication des serveurs qui stockent toutes les données d’Internet (j’en ai déjà parlé en détail dans <a href="https://template.entreprendre-ethique.fr/hebergement-web-ecologique/" target="_blank" rel="noreferrer noopener">cet article sur l’hébergement web écologique</a>, donc si vous comprenez pas trop cette notion de serveurs, vous pouvez aller lire ça).</p>



<p>Et puis il y a aussi la fabrication de tout le réseau. Par exemple, les antennes 4G au 5G, tous les câbles sous-marins qui permettent de faire voyager les données (et non, Internet n'est pas 100% sans fil), les box, ...</p>



<p>Et donc la fabrication de tout ce réseau, forcément, comme toute fabrication industrielle à très grosse échelle, elle entraîne des problèmes d’épuisement de ressources et de dégradation de la biodiversité. Parce qu'on utilise des ressources comme des métaux précieux qui sont rares et limités, et des procédés qui polluent l'air, l'eau et les sols.</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">1.2 L'impact de l'utilisation d'Internet</h3>



<p>Alors une fois qu’on a fabriqué le réseau, bien évidemment on l’utilise.</p>



<p>Et donc là les impacts, ça va être surtout au niveau de la consommation d’électricité. Parce qu’il va falloir de l’électricité pour alimenter et refroidir les serveurs (idem, j’en ai déjà parlé <a href="https://template.entreprendre-ethique.fr/hebergement-web-ecologique/" target="_blank" rel="noreferrer noopener">cet article</a>). Et puis il y a électricité qui va servir à l’utilisation de tous nos terminaux (téléphones, tablettes, ordinateurs, ...)</p>



<p>Aujourd’hui on est tou·te·s hyper connecté·es, donc vous imaginez bien si on réunit tout ça, la consommation d’électricité que ça peut représenter.</p>



<p>Et puis y a aussi la consommation d’électricité qui fait tourner le réseau Internet, en dehors des serveurs. Donc encore une fois les antennes 4G ou 5G, les câbles sous-marins, ... Enfin voilà, tout ce qu’on ne voit pas mais qui pourtant existe bien.</p>



<p>En gros les utilisateurices, donc nous, on est responsables de 50 % de la consommation d’électricité d’Internet. Et le réseau en lui-même, donc faire marcher le réseau, c’est les 50 autres pour cent.</p>



<p>Alors pourquoi la consommation d’électricité c’est problématique ? Et bien parce qu'aujourd'hui, l'immense majorité de l'électricité produite n'est pas issue de ressources propres et renouvelables, mais plutôt de pétrole, de gaz ou du nucléaire. Et donc c'est encore une fois quelque chose qui utilise des ressources limitées et qui pollue et menace la biodiversité.</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">1.3 La pollution numérique due à la fin de vie des équipements</h3>



<p>Et puis le troisième impact qu’à le web sur l'environnement, c’est la fin de vie de tous ces appareils et de tout ce réseau. Parce que bien évidemment, tout ce qu’on fabrique pour faire marcher Internet n’a pas une durée de vie illimitée. À un moment, ça ne fonctionne plus.</p>



<p>Et là se pose le problème de recyclage, de qu’est-ce qu’on fait de tous ces déchets ?</p>



<p>Et bien évidemment, c’est un sujet qui n’est pas du tout aujourd’hui traité avec efficacité. Il y a beaucoup de déchets plastiques ou métaux dangereux dont on ne sait que faire...</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p>Donc on voit bien que le réseau Internet et l’utilisation d’Internet ont de très gros impacts sur l’environnement, à tous les niveaux du cycle de vie. Cette explication était évidemment très schématisée et très simplifiée, mais on pourrait passer des heures à parler de chaque sujet tellement il y a de choses à dire...</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">2. L’impact sociétal du web</h2>



<p>Le deuxième gros sujet que j’avais envie de traiter autour de l’impact du web en général, c’est qu'au-delà de l’impact environnemental, au sens de écologique, il y a aussi pour moi un fort impact sociétal. C’est-à-dire qu’Internet impacte la société, au sens de "les gens qui vivent dans la société".</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">2.1 L'impact sociétal d'internet lors de la fabrication</h3>



<p>Le premier impact dont on entend parfois parler, mais pas autant que l’impact écologique, et qui pourtant est pour moi aussi dramatique, ben c’est que la fabrication de bon nombre des terminaux qu’on utilise pour Internet a recours au travail forcé, voir à l’esclavage.</p>



<p>Donc on sait que par exemple, pour fabriquer les téléphones, les écrans, etc... ça nécessite des métaux qui non seulement sont précieux et très limités, mais qui en plus sont difficiles d’accès. Et donc on sait que des enfants sont envoyés dans les mines pour récupérer ces métaux...</p>



<p>Vous avez aussi probablement entendu parler du scandale de la minorité Ouïghours, donc des très nombreuses entreprises qui exploitent le peuple Ouïghours. Il existe une liste de la honte qui répertorie les marques qui travaillent (enfin, qui utilisent le travail forcé des Ouïghours) et dans cette liste, on trouve quasiment tous les fabricants d’ordinateurs, téléphones, tablettes, etc...</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">2.2 L'impact sociétal d'internet lors de l'utilisation</h3>



<p>Et ensuite pour moi, l’impact sociétal du web, il est aussi dans son utilisation.</p>



<p>Parce qu'en fait, le web est tellement omniprésent dans la vie de tout le monde, que les représentations qui sont sur le web sont pour moi extrêmement importantes.</p>



<p>C’est quelque chose dont on n'a pas forcément conscience, mais ça participe clairement à "fabriquer" la société dans laquelle on évolue.</p>



<p>Je vais prendre l’exemple de la famille. La famille est très souvent représentée de la même façon : un papa, une maman, des gens blancs et minces, un garçon, une fille. Le truc classique.</p>



<p>Sauf qu'en fait, il existe des familles comme ça, oui, mais ce n'est pas du tout représentatif de la composition de la société. Sauf qu’on se rend pas compte qu'à force d'utiliser toujours une seule représentation, ben c’est pas du tout inclusif. Et si on entre pas dans les cases de ce qui est toujours montré, on peut soit se sentir exclu·e, pas valide, bizarre, seul·e et donc, très mal dans sa peau. Soit ce sont les autres qui peuvent nous exclure voire nous rejeter.</p>



<p>Aujourd'hui, des gens meurent parce qu'iels sont noirs, trans ou homo... Donc moi je pense qu’Internet a un très gros impact sociétal sur le thème de l’inclusivité et qu’on peut s’en servir justement pour aboutir à une société beaucoup plus inclusive et bienveillante.</p>



<p>Et du coup ça m’amène à la dernière problématique que je voulais aborder : l’accessibilité sur le web. L’accessibilité, c’est le fait de rendre le web accessible aux personnes en situation de handicap.</p>



<p>Aujourd’hui, l’immense majorité du Web n’est pas accessible aux personnes handicapées. Et selon moi c’est vraiment un gros enjeu sociétal parce que encore une fois ça ne participe pas du tout à une société inclusive et un monde juste. Ça empêche toute une partie de la population d'accéder à l'information. Et l'accès à l'information, encore une fois c'est un sujet qui me semble primordial. Pour s'éduquer, s'informer, s'émanciper et devenir autonome et libre. Donc ce n'est pas juste que certaines personnes n'aient pas accès aux mêmes informations que tout le monde.</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">3. L'impact environnemental d'un site internet</h2>



<p>Alors maintenant que je vous ai parlé de l’impact du web en général, vous allez me dire : "OK, mais moi mon site internet, il a quoi à voir dans l’histoire ?"</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">3.1 L'impact environnemental d'un site internet sur les terminaux</h3>



<p>L’impact des sites internet dans tout ce gros environnement qu'est le web, ça va d’abord être que les gens, pour utiliser notre site internet, utilisent forcément un terminal. Donc un téléphone, une tablette, un ordinateur, peu importe...</p>



<p>Et donc de façon indirecte, notre site internet va utiliser la ressource du terminal que la personne utilise et a donc un impact sur la durée de vie et la consommation en électricité de ce terminal.</p>



<p>Un exemple concret : si le site est mal fait et que les gens mettent trop longtemps à trouver ce qu’iels veulent, c’est autant de ressources utilisées pour rien (sans compter que les gens ne seront pas satisfait·es, mais ça, c’est une autre histoire). Les gens vont utiliser plus d'électricité si iels restent 10 minutes sur le site plutôt que 5 minutes.</p>



<p>Pareil, si le site est trop lourd, ça utilisera trop de ressources et ça “abimera” plus vite le terminal.</p>



<p>Qui n’a jamais dû changer de téléphone parce qu’il était devenu trop lent ? C’est pas tant que le téléphone est devenu lent, mais plutôt que les sites et applications demandent toujours plus de ressources et donc à un moment, les terminaux ne suivent plus.</p>



<p>Ça fait partie de ce qu’on appelle l’obsolescence programmée. Ça arrange bien les fabricants quand on change de téléphone, donc ils n’ont aucun intérêt à ce que vous gardiez votre téléphone 10 ans...</p>



<p>Or, l’enjeu, c’est d’utiliser nos terminaux le plus longtemps possible pour éviter d’en fabriquer de nouveaux et d’avoir trop de déchets qu’on ne sait pas gérer. Donc avoir un site éco-conçu, c’est refuser de prendre part à ce système quelque part.</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">3.2 L'impact environnemental d'un site sur les serveurs</h3>



<p>Deuxième impact environnemental d'un site internet : tout ce qui est sur notre site est stocké sur les serveurs.</p>



<p>Donc pareil, si on stocke des choses inutiles, ça veut dire qu’on va devoir fabriquer d’autres serveurs “pour rien”. C’est autant de place utilisée, d’électricité consommée, pour stocker des choses qui pourraient soit prendre moins de place (quand on optimise ses photos par exemple), soit carrément ne pas être là (un plug in Google Maps).</p>



<p>Et c'est là que <a href="https://steffilala.fr/eco-conception-web-guide/" target="_blank" rel="noreferrer noopener">l'éco-conception web</a> prend tout son sens : faire en sorte que les sites soient moins lourds, pour utiliser moins de ressources, moins de place sur les serveurs, moins d'électricité... Bref, optimiser les choses pour un impact moins négatif.</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">3.3 L'impact environnemental d'un site sur la société</h3>



<p>Et enfin selon moi le dernier impact environnemental d'un site internet, ça concerne notre responsabilité concernant l'inclusivité.</p>



<p>Je pense qu'en tant que personnes qui communiquent publiquement, qui apportent de l'information au monde, on se doit d'avoir conscience que ce qu'on fait participe au système, et qu'on a une responsabilité.</p>



<p>D'ailleurs Léa Aniang en parlait très bien dans cette interview : <a href="https://smartlink.ausha.co/entreprendre-ethique/11-avoir-une-communication-plus-inclusive-dans-son-entreprise-lea-engagee-pour-l-inclusivite" target="_blank" rel="noreferrer noopener">avoir une communication plus inclusive dans son entreprise</a>.</p>



<p>Donc notre site internet, en étant plus inclusif et accessible, peut carrément participer à cette société plus bienveillante et inclusive. Et surtout, si on ne le fait pas, on perpétue le système en place. Donc après, à nous de voir avec notre conscience 😉</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p>Voilà, c'est la fin de cet article qui avait pour but de vous expliquer quel est l'impact environnemental d'un site internet.</p>



<p>J'ai conscience que les sujets abordés sont un peu lourds et pas joyeux, mais c'est malheureusement la réalité.</p>



<p>Je pense que pour ne pas se plomber le moral, il faut se concentrer sur le fait que des solutions existent, que déjà avoir conscience du problème, c'est un grand pas. Ensuite, passer à l'action, à notre niveau, selon nos moyens et possibilités.</p>



<p>Et surtout, ne jamais se dire que tout est de notre faute. On est le fruit d'une société et se déconstruire c'est difficile, alors restons bienveillant·es envers nous-mêmes !</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p><em>Article publié le 12 Mai 2022<br>Mis à jour le 19 Janvier 2024</em></p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<style type="text/css">@import url("https://assets.mlcdn.com/fonts.css?version=1704356");</style>
    <style type="text/css">
    /* LOADER */
    .ml-form-embedSubmitLoad {
      display: inline-block;
      width: 20px;
      height: 20px;
    }

    .g-recaptcha {
    transform: scale(1);
    -webkit-transform: scale(1);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    height: ;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      border: 0;
    }

    .ml-form-embedSubmitLoad:after {
      content: " ";
      display: block;
      width: 11px;
      height: 11px;
      margin: 1px;
      border-radius: 50%;
      border: 4px solid #fff;
    border-color: #ffffff #ffffff #ffffff transparent;
    animation: ml-form-embedSubmitLoad 1.2s linear infinite;
    }
    @keyframes ml-form-embedSubmitLoad {
      0% {
      transform: rotate(0deg);
      }
      100% {
      transform: rotate(360deg);
      }
    }
      #mlb2-11133746.ml-form-embedContainer {
        box-sizing: border-box;
        display: table;
        margin: 0 auto;
        position: static;
        width: 100% !important;
      }
      #mlb2-11133746.ml-form-embedContainer h4,
      #mlb2-11133746.ml-form-embedContainer p,
      #mlb2-11133746.ml-form-embedContainer span,
      #mlb2-11133746.ml-form-embedContainer button {
        text-transform: none !important;
        letter-spacing: normal !important;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper {
        background-color: #f7f5f3;
        
        border-width: 1px;
        border-color: #2e0219;
        border-radius: 4px;
        border-style: solid;
        box-sizing: border-box;
        display: inline-block !important;
        margin: 0;
        padding: 0;
        position: relative;
              }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper.embedPopup,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper.embedDefault { width: 100%; }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper.embedForm { max-width: 100%; width: 100%; }
      #mlb2-11133746.ml-form-embedContainer .ml-form-align-left { text-align: left; }
      #mlb2-11133746.ml-form-embedContainer .ml-form-align-center { text-align: center; }
      #mlb2-11133746.ml-form-embedContainer .ml-form-align-default { display: table-cell !important; vertical-align: middle !important; text-align: center !important; }
      #mlb2-11133746.ml-form-embedContainer .ml-form-align-right { text-align: right; }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedHeader img {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        height: auto;
        margin: 0 auto !important;
        max-width: 100%;
        width: undefinedpx;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
        padding: 20px 20px 0 20px;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody.ml-form-embedBodyHorizontal {
        padding-bottom: 0;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent {
        text-align: left;
        margin: 0 0 20px 0;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 {
        color: #000000;
        font-family: 'Exo', sans-serif;
        font-size: 30px;
        font-weight: 400;
        margin: 0 0 10px 0;
        text-align: left;
        word-break: break-word;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
        color: #000000;
        font-family: 'Exo', sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        margin: 0 0 10px 0;
        text-align: left;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ul,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ul,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol {
        color: #000000;
        font-family: 'Exo', sans-serif;
        font-size: 14px;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol ol,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol ol {
        list-style-type: lower-alpha;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol ol ol,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol ol ol {
        list-style-type: lower-roman;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p a,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p a {
        color: #000000;
        text-decoration: underline;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group {
        text-align: left!important;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group label {
        margin-bottom: 5px;
        color: #333333;
        font-size: 14px;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        font-weight: bold; font-style: normal; text-decoration: none;;
        display: inline-block;
        line-height: 20px;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p:last-child,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p:last-child {
        margin: 0;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody form {
        margin: 0;
        width: 100%;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow {
        margin: 0 0 20px 0;
        width: 100%;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow {
        float: left;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent.horozintalForm {
        margin: 0;
        padding: 0 0 20px 0;
        width: 100%;
        height: auto;
        float: left;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow {
        margin: 0 0 10px 0;
        width: 100%;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-last-item {
        margin: 0;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-formfieldHorizintal {
        margin: 0;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
        background-color: #ffffff !important;
        color: #333333 !important;
        border-color: #cccccc;
        border-radius: 4px !important;
        border-style: solid !important;
        border-width: 1px !important;
        font-family: 'Exo', sans-serif;
        font-size: 14px !important;
        height: auto;
        line-height: 21px !important;
        margin-bottom: 0;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        padding: 10px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-webkit-input-placeholder,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input::-webkit-input-placeholder { color: #333333; }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-moz-placeholder,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input::-moz-placeholder { color: #333333; }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:-ms-input-placeholder,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input:-ms-input-placeholder { color: #333333; }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:-moz-placeholder,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input:-moz-placeholder { color: #333333; }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow textarea, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow textarea {
        background-color: #ffffff !important;
        color: #333333 !important;
        border-color: #cccccc;
        border-radius: 4px !important;
        border-style: solid !important;
        border-width: 1px !important;
        font-family: 'Exo', sans-serif;
        font-size: 14px !important;
        height: auto;
        line-height: 21px !important;
        margin-bottom: 0;
        margin-top: 0;
        padding: 10px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before {
          border-color: #cccccc!important;
          background-color: #ffffff!important;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input.custom-control-input[type="checkbox"]{
        box-sizing: border-box;
        padding: 0;
        position: absolute;
        z-index: -1;
        opacity: 0;
        margin-top: 5px;
        margin-left: -1.5rem;
        overflow: visible;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before {
        border-radius: 4px!important;
      }


      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type=checkbox]:checked~.label-description::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox input[type=checkbox]:checked~.label-description::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-input:checked~.custom-control-label::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-input:checked~.custom-control-label::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox input[type=checkbox]:checked~.label-description::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input:checked~.custom-control-label::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input:checked~.custom-control-label::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input:checked~.custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-input:checked~.custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-input:checked~.custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-input:checked~.custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox input[type=checkbox]:checked~.label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox input[type=checkbox]:checked~.label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type=checkbox]:checked~.label-description::before  {
          border-color: #000000!important;
          background-color: #000000!important;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::after {
           top: 2px;
           box-sizing: border-box;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
           top: 0px!important;
           box-sizing: border-box!important;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
        top: 0px!important;
           box-sizing: border-box!important;
      }

       #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::after {
            top: 0px!important;
            box-sizing: border-box!important;
            position: absolute;
            left: -1.5rem;
            display: block;
            width: 1rem;
            height: 1rem;
            content: "";
       }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before {
        top: 0px!important;
        box-sizing: border-box!important;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-control-label::before {
          position: absolute;
          top: 4px;
          left: -1.5rem;
          display: block;
          width: 16px;
          height: 16px;
          pointer-events: none;
          content: "";
          background-color: #ffffff;
          border: #adb5bd solid 1px;
          border-radius: 50%;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-control-label::after {
          position: absolute;
          top: 2px!important;
          left: -1.5rem;
          display: block;
          width: 1rem;
          height: 1rem;
          content: "";
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before {
          position: absolute;
          top: 4px;
          left: -1.5rem;
          display: block;
          width: 16px;
          height: 16px;
          pointer-events: none;
          content: "";
          background-color: #ffffff;
          border: #adb5bd solid 1px;
          border-radius: 50%;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after {
          position: absolute;
          top: 0px!important;
          left: -1.5rem;
          display: block;
          width: 1rem;
          height: 1rem;
          content: "";
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
          position: absolute;
          top: 0px!important;
          left: -1.5rem;
          display: block;
          width: 1rem;
          height: 1rem;
          content: "";
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-radio .custom-control-label::after {
          background: no-repeat 50%/50% 50%;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-checkbox .custom-control-label::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
          background: no-repeat 50%/50% 50%;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-control, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-control {
        position: relative;
        display: block;
        min-height: 1.5rem;
        padding-left: 1.5rem;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-input, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-input, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-input {
          position: absolute;
          z-index: -1;
          opacity: 0;
          box-sizing: border-box;
          padding: 0;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label {
          color: #000000;
          font-size: 12px!important;
          font-family: 'Open Sans', Arial, Helvetica, sans-serif;
          line-height: 22px;
          margin-bottom: 0;
          position: relative;
          vertical-align: top;
          font-style: normal;
          font-weight: 700;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-select, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-select {
        background-color: #ffffff !important;
        color: #333333 !important;
        border-color: #cccccc;
        border-radius: 4px !important;
        border-style: solid !important;
        border-width: 1px !important;
        font-family: 'Exo', sans-serif;
        font-size: 14px !important;
        line-height: 20px !important;
        margin-bottom: 0;
        margin-top: 0;
        padding: 10px 28px 10px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        height: auto;
        display: inline-block;
        vertical-align: middle;
        background: url('https://assets.mlcdn.com/ml/images/default/dropdown.svg') no-repeat right .75rem center/8px 10px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
      }


      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow {
        height: auto;
        width: 100%;
        float: left;
      }
      .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal { width: 70%; float: left; }
      .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-button-horizontal { width: 30%; float: left; }
      .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-button-horizontal.labelsOn { padding-top: 25px;  }
      .ml-form-formContent.horozintalForm .ml-form-horizontalRow .horizontal-fields { box-sizing: border-box; float: left; padding-right: 10px;  }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input {
        background-color: #ffffff;
        color: #333333;
        border-color: #cccccc;
        border-radius: 4px;
        border-style: solid;
        border-width: 1px;
        font-family: 'Exo', sans-serif;
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 0;
        margin-top: 0;
        padding: 10px 10px;
        width: 100%;
        box-sizing: border-box;
        overflow-y: initial;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button {
        background-color: #9E6B83 !important;
        border-color: #9E6B83;
        border-style: solid;
        border-width: 1px;
        border-radius: 4px;
        box-shadow: none;
        color: #ffffff !important;
        cursor: pointer;
        font-family: 'Exo', sans-serif;
        font-size: 18px !important;
        font-weight: 400;
        line-height: 20px;
        margin: 0 !important;
        padding: 10px !important;
        width: 100%;
        height: auto;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button:hover {
        background-color: #004643 !important;
        border-color: #004643 !important;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type="checkbox"] {
        box-sizing: border-box;
        padding: 0;
        position: absolute;
        z-index: -1;
        opacity: 0;
        margin-top: 5px;
        margin-left: -1.5rem;
        overflow: visible;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description {
        color: #000000;
        display: block;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        font-size: 12px;
        text-align: left;
        margin-bottom: 0;
        position: relative;
        vertical-align: top;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label {
        font-weight: normal;
        margin: 0;
        padding: 0;
        position: relative;
        display: block;
        min-height: 24px;
        padding-left: 24px;

      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label a {
        color: #000000;
        text-decoration: underline;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p {
        color: #000000 !important;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
        font-size: 12px !important;
        font-weight: normal !important;
        line-height: 18px !important;
        padding: 0 !important;
        margin: 0 5px 0 0 !important;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p:last-child {
        margin: 0;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
        margin: 0 0 20px 0;
        float: left;
        width: 100%;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
        background-color: #9E6B83 !important;
        border: none !important;
        border-radius: 4px !important;
        box-shadow: none !important;
        color: #ffffff !important;
        cursor: pointer;
        font-family: 'Exo', sans-serif !important;
        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 21px !important;
        height: auto;
        padding: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.loading {
        display: none;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover {
        background-color: #004643 !important;
      }
      .ml-subscribe-close {
        width: 30px;
        height: 30px;
        background: url('https://assets.mlcdn.com/ml/images/default/modal_close.png') no-repeat;
        background-size: 30px;
        cursor: pointer;
        margin-top: -10px;
        margin-right: -10px;
        position: absolute;
        top: 0;
        right: 0;
      }
      .ml-error input, .ml-error textarea, .ml-error select {
        border-color: red!important;
      }

      .ml-error .custom-checkbox-radio-list {
        border: 1px solid red !important;
        border-radius: 4px;
        padding: 10px;
      }

      .ml-error .label-description,
      .ml-error .label-description p,
      .ml-error .label-description p a,
      .ml-error label:first-child {
        color: #ff0000 !important;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p:first-letter {
        color: #ff0000 !important;
      }
            @media only screen and (max-width: 400px){

        .ml-form-embedWrapper.embedDefault, .ml-form-embedWrapper.embedPopup { width: 100%!important; }
        .ml-form-formContent.horozintalForm { float: left!important; }
        .ml-form-formContent.horozintalForm .ml-form-horizontalRow { height: auto!important; width: 100%!important; float: left!important; }
        .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal { width: 100%!important; }
        .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal > div { padding-right: 0px!important; padding-bottom: 10px; }
        .ml-form-formContent.horozintalForm .ml-button-horizontal { width: 100%!important; }
        .ml-form-formContent.horozintalForm .ml-button-horizontal.labelsOn { padding-top: 0px!important; }

      }
    </style>

    
  
    
    

    
    

    
    

    

      
        
        
      

      
        
        
      

      

            
            
            
            
            
            
      

      

      
        
        
         
        
        
      

        
        
        
        
        
        
      

       

        
        
        
        
        
        
        
       


      
        
        
        
        
  



  
        
        
        
      


      
    
    
    
    
    
    
    
  

  
        
        
        
        
        
      

      
        
        
        
        
        
      

      
        
        
        
        
        
      

       

        
        
        
        
       

       
        
        
        
        
      

      
        
        
        
        
        
        
        
       

    

    


      


      

      
      

      

      





    

      
    <div id="mlb2-11133746" class="ml-form-embedContainer ml-subscribe-form ml-subscribe-form-11133746">
      <div class="ml-form-align-center ">
        <div class="ml-form-embedWrapper embedForm">

          
          

          <div class="ml-form-embedBody ml-form-embedBodyDefault row-form">

            <div class="ml-form-embedContent" style=" ">
              
                <h4>8 outils plus éthiques pour ton entreprise !</h4>
                <p>Télécharge gratuitement ma liste de 8 outils plus éthiques pour ton entreprise&nbsp;!</p>
<p>Pour agir dès maintenant et concrètement pour réduire ton impact négatif sur la planète et ses habitant·es ❤️</p>
              
            </div>

            <form class="ml-block-form" action="https://assets.mailerlite.com/jsonp/775549/forms/110545062318834781/subscribe" data-code="" method="post" target="_blank">
              <div class="ml-form-formContent">
                

                  
                  <div class="ml-form-fieldRow ">
                    <div class="ml-field-group ml-field-name">

                      


                      <!-- input -->
                      <input aria-label="name" type="text" class="form-control" data-inputmask="" name="fields[name]" placeholder="Prénom" autocomplete="given-name">
                      <!-- /input -->

                      <!-- textarea -->
                      
                      <!-- /textarea -->

                      <!-- select -->
                      
                      <!-- /select -->

                      <!-- checkboxes -->
            
            <!-- /checkboxes -->

                      <!-- radio -->
                      
                      <!-- /radio -->

                      <!-- countries -->
                      
                      <!-- /countries -->





                    </div>
                  </div><div class="ml-form-fieldRow ml-last-item">
                    <div class="ml-field-group ml-field-email ml-validate-email ml-validate-required">

                      


                      <!-- input -->
                      <input aria-label="email" aria-required="true" type="email" class="form-control" data-inputmask="" name="fields[email]" placeholder="Email" autocomplete="email">
                      <!-- /input -->

                      <!-- textarea -->
                      
                      <!-- /textarea -->

                      <!-- select -->
                      
                      <!-- /select -->

                      <!-- checkboxes -->
            
            <!-- /checkboxes -->

                      <!-- radio -->
                      
                      <!-- /radio -->

                      <!-- countries -->
                      
                      <!-- /countries -->





                    </div>
                  </div>
                
              </div>

              

              <!-- Privacy policy -->
              
              <!-- /Privacy policy -->

              

              

              <div class="ml-form-checkboxRow ml-validate-required">
                
                  <label class="checkbox">
                    <input type="checkbox">
                    <div class="label-description">
                      <p>En cochant cette case, tu acceptes de recevoir des emails de la part de steffilala.fr/. Tu seras également inscrit·e automatiquement à la newsletter bi-mensuelle, de laquelle tu peux te désinscrire facilement à tout moment.</p>
                    </div>
                  </label>
                
              </div>






              
              <input type="hidden" name="ml-submit" value="1">

              <div class="ml-form-embedSubmit">
                
                  <button type="submit" class="primary">Je veux la liste !</button>
                
                <button disabled="disabled" style="display: none;" type="button" class="loading">
                  <div class="ml-form-embedSubmitLoad"></div>
                  <span class="sr-only">Loading...</span>
                </button>
              </div>

              
              <input type="hidden" name="anticsrf" value="true">
            </form>
          </div>

          <div class="ml-form-successBody row-success" style="display: none">

            <div class="ml-form-successContent">
              
                <h4>Youpi !</h4>
                <p>Rendez-vous dans ta boite mail pour découvrir la liste ! Pense à checker tes spams si tu ne reçois rien, et ajoute-moi à tes contacts si j'y suis 😉</p>
              
            </div>

          </div>
        </div>
      </div>
    </div>

  

  
  
  <script>
    function ml_webform_success_11133746() {
      var $ = ml_jQuery || jQuery;
      $('.ml-subscribe-form-11133746 .row-success').show();
      $('.ml-subscribe-form-11133746 .row-form').hide();
    }
      </script>
  
  
      <script src="https://groot.mailerlite.com/js/w/webforms.min.js?v2d8fb22bb5b3677f161552cd9e774127" type="text/javascript"></script>
        <script>
            fetch("https://assets.mailerlite.com/jsonp/775549/forms/110545062318834781/takel")
        </script>
]]></content:encoded>
					
					<wfw:commentRss>https://steffilala.fr/impact-environnemental-site-internet/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Hébergement web écologique : tout comprendre facilement</title>
		<link>https://steffilala.fr/hebergement-web-ecologique/</link>
					<comments>https://steffilala.fr/hebergement-web-ecologique/#respond</comments>
		
		<dc:creator><![CDATA[Steffi]]></dc:creator>
		<pubDate>Thu, 10 Mar 2022 05:30:00 +0000</pubDate>
				<category><![CDATA[Éco-conception web]]></category>
		<category><![CDATA[podcast]]></category>
		<guid isPermaLink="false">https://entreprendre-ethique.fr/?p=29662</guid>

					<description><![CDATA[Si vous êtes entrepreneur·ses, vous avez très certainement un site internet (ou bien vous projetez d'en avoir un prochainement). Et qui dit site internet, dit hébergement web. C'est indissociable, même si vous ne comprenez pas bien ce que c'est et que vous n'avez pas l'impression de vous être occupé·e de ça un jour, je vous [&#8230;]]]></description>
										<content:encoded><![CDATA[
<iframe frameborder="0" loading="lazy" id="ausha-NABP" height="220" style="border: none; width:100%; height:220px" src="https://player.ausha.co/index.html?showId=BqNN6f1aMYYJ&color=%23eaaa90&podcastId=bjWwACAYWdzP&v=3&playerId=ausha-NABP"></iframe><script src="https://player.ausha.co/ausha-player.js"></script>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p>Si vous êtes entrepreneur·ses, vous avez très certainement un site internet (ou bien vous projetez d'en avoir un prochainement). Et qui dit site internet, dit hébergement web.</p>



<p>C'est indissociable, même si vous ne comprenez pas bien ce que c'est et que vous n'avez pas l'impression de vous être occupé·e de ça un jour, je vous garantie que votre site est quelque part, chez un hébergeur.</p>



<p>Dans cet article, je vais vous expliquer le plus clairement possible ce que c'est et surtout, pourquoi c'est important d'opter pour un hébergement web écologique.</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<p>🌸 OFFRE EXCLUSIVE : jusqu'au 31 Mai 2025, bénéficiez de -70% pour toute souscription d'une durée de 12 mois pour un <a href="https://www.infomaniak.com/goto/fr/hosting.web?utm_term=61731c9b47a85" target="_blank" rel="noreferrer noopener">hébergement Web</a>* ou un <a href="https://www.infomaniak.com/goto/fr/my-easy-site?utm_term=61731c9b47a85" target="_blank" rel="noreferrer noopener">hébergement WordPress</a>* Infomaniak avec le code WEB70-JP7</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Un hébergeur web, c'est quoi ?</h2>



<p>En gros, votre hébergeur, c'est l'entreprise qui va stocker pour vous tous les fichiers de votre site internet.</p>



<p>En fait, un site internet, ce n'est rien d'autre qu'un ensemble de fichiers. Vous avez des fichiers qui sont rédigés dans un langage spécifique au web, par exemple HTML, CSS, Javascript... C'est ce qu'on appelle aussi "le code". Coder un site, c'est créer un fichier dans un langage web en gros. Ces fichiers sont ensuite lus par les navigateurs (Google Chrome, Mozilla, Safari, ...) qui les "traduisent" en site pour nous.</p>



<p>Ces fichiers sont rédigés par des développeur·ses web ou bien sont fournis directement par les CMS (=Content Managing System. Ex : WordPress, Wix, ShowIt, ...) pour permettre aux personnes qui ne maîtrisent pas ces langages de quand même créer des sites. On appelle ces outils, des outils no code.</p>



<p>Et ensuite, il y a aussi d'autres fichiers sur un site Internet comme les photos, les vidéos ou encore les audios.</p>



<p>Et tous ces fichiers, il faut bien les stocker quelque part. Car contrairement à ce qu'on pourrait croire quand on entend des appellations comme "le cloud" (le nuage en anglais), le web n'est pas DU TOUT immatériel.</p>



<p>Les fichiers de tous les sites web du monde sont stockés sur des serveurs. Et les serveurs sont gérés par les hébergeurs web.</p>



<p>Parce que si vous créez votre site et que vous laissez tous les fichiers sur votre ordinateur, personne d'autre que vous ne pourra y avoir accès. Pour que votre site soit accessible à distance, de n'importe où ou presque dans le monde, il faut qu'il soit hébergé sur un serveur.</p>



<p>L'hébergeur, c'est le propriétaire de la maison de votre site en gros. Vous, vous louez la maison, et l'hébergeur fait en sorte que tout le monde puisse la visiter à distance.</p>



<p>(Si vous n'avez pas souscrit à une offre chez un hébergeur web, c'est que la plateforme que vous avez utilisée pour créer votre site l'a fait pour vous)</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Pourquoi choisir un hébergement web écologique ?</h2>



<p>Vous le savez sûrement si vous me suivez un peu, mais le web pollue. Beaucoup.</p>



<p>4% des émissions de gaz à effet de serre dans le monde, 7% de la consommation électrique mondiale, des tonnes de déchets qu'on ne sait pas recycler. Bref, le web pollue.</p>



<p>Et c'est d'autant plus inquiétant que c'est un secteur dans lequel les consciences sont très peu éveillées. En même temps, on nous a rabâché que pour tuer moins d'arbres et diminuer le papier, le numérique c'était génial. Oui, bon, en vrai, c'est plus complexe.</p>



<p>Et dernier point inquiétant, les usages du numérique explosent, se développent et pas forcément dans le bon sens quand on voit par exemple que <strong><a href="https://steffilala.fr/video-instagram-inconvenients/" target="_blank" rel="noreferrer noopener">la vidéo sur Instagram</a></strong> et ailleurs est de plus en plus mise en avant, alors que c'est le format le plus polluant.</p>



<p>Donc on a tou·te·s notre part à jouer : les grosses entreprises et l'État en premier, bien sûr. Mais nous aussi, petites entreprises, on peut et on doit agir. </p>



<p>Et l'hébergement web écologique, c'est une très bonne façon d'agir à notre échelle.</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Comment l'hébergement web pollue ?</h2>



<p>Le choix de votre hébergeur web est l'un des plus impactant en terme d'éco-responsabilité de votre site.</p>



<p>Les serveurs qui stockent tous les fichiers dont on a parlé plus haut, c'est comme votre ordinateur, au bout d'un moment, quand c'est allumé trop longtemps, ça chauffe. Sauf qu'un serveur, on ne peut pas l'éteindre, sinon, on n'aurait plus accès aux sites. Donc il faut les refroidir.</p>



<p>C'est pour cela que les serveurs des hébergeurs web sont très énergivores : il faut de l'électricité pour les alimenter mais aussi et surtout, pour les refroidir. On leur met la clim en gros. Et forcément, la majorité de cette énergie n'est pas produite de façon propre.</p>



<p>Ensuite, il y a la problématique de l'espace occupé. Parce qu'en 2018, on comptait a minima, 62 millions de serveurs (source : Éco-Conception Web : les 115 bonnes pratiques par Frédéric Bordage). Ça représente donc des millions de mètres carrés, forcément pris parfois au détriment de la nature. </p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">L'hébergement web écologique</h2>



<p>J'aimerais avant tout préciser que par écologique, je n'entends pas "bon pour la planète". Il s'agit ici d'avoir un impact moins négatif que la moyenne, de faire des meilleurs choix, mais je ne prétends absolument pas qu'un hébergeur web puisse avoir un impact positif pour l'environnement.</p>



<p>Les hébergeurs web écologiques vont donc faire plusieurs choses pour réduire leur impact. Par exemple : </p>



<ul class="wp-block-list">
<li>Utiliser de l'énergie renouvelable</li>



<li>Utiliser des matériaux plus durables, plus performants, qui peuvent être réutilisés plus facilement dans la fabrication de leurs serveurs. </li>



<li>Utiliser des serveurs qui résistent mieux à la chaleur ou qui chauffent moins</li>



<li>Implanter localement leurs data centers : si les données d'un site web sont proches géographiquement du pays d'utilisation, c'est moins polluant que si c'est à l'autre bout du monde. En d'autres termes, si vous visez la France avec votre site, choisissez à minima un hébergement situé en Europe.</li>



<li>Réduire l'impact écologique de leur entreprise au global, dans les activités classiques d'une entreprise : management, comptabilité, vie du siège social et des autres sites... (réduction des déchets, des déplacements, de la consommation en eau et électricité, ...)</li>
</ul>



<p>Il existe des certifications qui peuvent vous guider dans votre choix. Je vous conseille <a href="https://lebondigital.com/7-hebergements-web-ecologiques-certifies/#:~:text=La%20norme%20ISO%2050001%20certifie,des%20avantages%20%C3%A9conomiques%20et%20%C3%A9cologiques." target="_blank" rel="noreferrer noopener">cet article du Bon Digital</a> sur le sujet si vous souhaitez en savoir plus.</p>



<p>Voici quelques hébergeurs web écologique de confiance :</p>



<ul class="wp-block-list">
<li><a href="https://www.infomaniak.com/goto/fr/home?utm_term=61731c9b47a85" target="_blank" rel="noreferrer noopener">Infomaniak</a> (<em>lien affilié</em>): selon moi, le plus performant et le plus fiable. Entreprendre Éthique est hébergé chez Infomaniak, et je vous recommande les yeux fermés.</li>



<li><a href="https://www.ikoula.com/fr" target="_blank" rel="noreferrer noopener">Ikoula</a></li>



<li><a href="https://www.ionos.fr/" target="_blank" rel="noreferrer noopener">Ionos</a> </li>
</ul>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<p>🌸 OFFRE EXCLUSIVE : jusqu'au 31 Mai 2025, bénéficiez de -70% pour toute souscription d'une durée de 12 mois pour un <a href="https://www.infomaniak.com/goto/fr/hosting.web?utm_term=61731c9b47a85" target="_blank" rel="noreferrer noopener">hébergement Web</a>* ou un <a href="https://www.infomaniak.com/goto/fr/my-easy-site?utm_term=61731c9b47a85" target="_blank" rel="noreferrer noopener">hébergement WordPress</a>* Infomaniak avec le code WEB70-JP7</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p class="has-text-align-center">Vous avez maintenant toutes les clés en main pour mieux comprendre l'importance de faire le choix d'un hébergement web écologique. Encore une fois, c'est l'une des décisions qui aura le plus de poids dans l'impact de votre site web, donc je vous conseille de bien y réfléchir.</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<style type="text/css">@import url("https://assets.mlcdn.com/fonts.css?version=1704356");</style>
    <style type="text/css">
    /* LOADER */
    .ml-form-embedSubmitLoad {
      display: inline-block;
      width: 20px;
      height: 20px;
    }

    .g-recaptcha {
    transform: scale(1);
    -webkit-transform: scale(1);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    height: ;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      border: 0;
    }

    .ml-form-embedSubmitLoad:after {
      content: " ";
      display: block;
      width: 11px;
      height: 11px;
      margin: 1px;
      border-radius: 50%;
      border: 4px solid #fff;
    border-color: #ffffff #ffffff #ffffff transparent;
    animation: ml-form-embedSubmitLoad 1.2s linear infinite;
    }
    @keyframes ml-form-embedSubmitLoad {
      0% {
      transform: rotate(0deg);
      }
      100% {
      transform: rotate(360deg);
      }
    }
      #mlb2-11133746.ml-form-embedContainer {
        box-sizing: border-box;
        display: table;
        margin: 0 auto;
        position: static;
        width: 100% !important;
      }
      #mlb2-11133746.ml-form-embedContainer h4,
      #mlb2-11133746.ml-form-embedContainer p,
      #mlb2-11133746.ml-form-embedContainer span,
      #mlb2-11133746.ml-form-embedContainer button {
        text-transform: none !important;
        letter-spacing: normal !important;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper {
        background-color: #f7f5f3;
        
        border-width: 1px;
        border-color: #2e0219;
        border-radius: 4px;
        border-style: solid;
        box-sizing: border-box;
        display: inline-block !important;
        margin: 0;
        padding: 0;
        position: relative;
              }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper.embedPopup,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper.embedDefault { width: 100%; }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper.embedForm { max-width: 100%; width: 100%; }
      #mlb2-11133746.ml-form-embedContainer .ml-form-align-left { text-align: left; }
      #mlb2-11133746.ml-form-embedContainer .ml-form-align-center { text-align: center; }
      #mlb2-11133746.ml-form-embedContainer .ml-form-align-default { display: table-cell !important; vertical-align: middle !important; text-align: center !important; }
      #mlb2-11133746.ml-form-embedContainer .ml-form-align-right { text-align: right; }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedHeader img {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        height: auto;
        margin: 0 auto !important;
        max-width: 100%;
        width: undefinedpx;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
        padding: 20px 20px 0 20px;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody.ml-form-embedBodyHorizontal {
        padding-bottom: 0;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent {
        text-align: left;
        margin: 0 0 20px 0;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 {
        color: #000000;
        font-family: 'Exo', sans-serif;
        font-size: 30px;
        font-weight: 400;
        margin: 0 0 10px 0;
        text-align: left;
        word-break: break-word;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
        color: #000000;
        font-family: 'Exo', sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        margin: 0 0 10px 0;
        text-align: left;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ul,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ul,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol {
        color: #000000;
        font-family: 'Exo', sans-serif;
        font-size: 14px;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol ol,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol ol {
        list-style-type: lower-alpha;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol ol ol,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol ol ol {
        list-style-type: lower-roman;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p a,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p a {
        color: #000000;
        text-decoration: underline;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group {
        text-align: left!important;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group label {
        margin-bottom: 5px;
        color: #333333;
        font-size: 14px;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        font-weight: bold; font-style: normal; text-decoration: none;;
        display: inline-block;
        line-height: 20px;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p:last-child,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p:last-child {
        margin: 0;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody form {
        margin: 0;
        width: 100%;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow {
        margin: 0 0 20px 0;
        width: 100%;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow {
        float: left;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent.horozintalForm {
        margin: 0;
        padding: 0 0 20px 0;
        width: 100%;
        height: auto;
        float: left;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow {
        margin: 0 0 10px 0;
        width: 100%;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-last-item {
        margin: 0;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-formfieldHorizintal {
        margin: 0;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
        background-color: #ffffff !important;
        color: #333333 !important;
        border-color: #cccccc;
        border-radius: 4px !important;
        border-style: solid !important;
        border-width: 1px !important;
        font-family: 'Exo', sans-serif;
        font-size: 14px !important;
        height: auto;
        line-height: 21px !important;
        margin-bottom: 0;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        padding: 10px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-webkit-input-placeholder,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input::-webkit-input-placeholder { color: #333333; }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-moz-placeholder,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input::-moz-placeholder { color: #333333; }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:-ms-input-placeholder,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input:-ms-input-placeholder { color: #333333; }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:-moz-placeholder,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input:-moz-placeholder { color: #333333; }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow textarea, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow textarea {
        background-color: #ffffff !important;
        color: #333333 !important;
        border-color: #cccccc;
        border-radius: 4px !important;
        border-style: solid !important;
        border-width: 1px !important;
        font-family: 'Exo', sans-serif;
        font-size: 14px !important;
        height: auto;
        line-height: 21px !important;
        margin-bottom: 0;
        margin-top: 0;
        padding: 10px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before {
          border-color: #cccccc!important;
          background-color: #ffffff!important;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input.custom-control-input[type="checkbox"]{
        box-sizing: border-box;
        padding: 0;
        position: absolute;
        z-index: -1;
        opacity: 0;
        margin-top: 5px;
        margin-left: -1.5rem;
        overflow: visible;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before {
        border-radius: 4px!important;
      }


      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type=checkbox]:checked~.label-description::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox input[type=checkbox]:checked~.label-description::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-input:checked~.custom-control-label::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-input:checked~.custom-control-label::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox input[type=checkbox]:checked~.label-description::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input:checked~.custom-control-label::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input:checked~.custom-control-label::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input:checked~.custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-input:checked~.custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-input:checked~.custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-input:checked~.custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox input[type=checkbox]:checked~.label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox input[type=checkbox]:checked~.label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type=checkbox]:checked~.label-description::before  {
          border-color: #000000!important;
          background-color: #000000!important;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::after {
           top: 2px;
           box-sizing: border-box;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
           top: 0px!important;
           box-sizing: border-box!important;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
        top: 0px!important;
           box-sizing: border-box!important;
      }

       #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::after {
            top: 0px!important;
            box-sizing: border-box!important;
            position: absolute;
            left: -1.5rem;
            display: block;
            width: 1rem;
            height: 1rem;
            content: "";
       }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before {
        top: 0px!important;
        box-sizing: border-box!important;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-control-label::before {
          position: absolute;
          top: 4px;
          left: -1.5rem;
          display: block;
          width: 16px;
          height: 16px;
          pointer-events: none;
          content: "";
          background-color: #ffffff;
          border: #adb5bd solid 1px;
          border-radius: 50%;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-control-label::after {
          position: absolute;
          top: 2px!important;
          left: -1.5rem;
          display: block;
          width: 1rem;
          height: 1rem;
          content: "";
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before {
          position: absolute;
          top: 4px;
          left: -1.5rem;
          display: block;
          width: 16px;
          height: 16px;
          pointer-events: none;
          content: "";
          background-color: #ffffff;
          border: #adb5bd solid 1px;
          border-radius: 50%;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after {
          position: absolute;
          top: 0px!important;
          left: -1.5rem;
          display: block;
          width: 1rem;
          height: 1rem;
          content: "";
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
          position: absolute;
          top: 0px!important;
          left: -1.5rem;
          display: block;
          width: 1rem;
          height: 1rem;
          content: "";
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-radio .custom-control-label::after {
          background: no-repeat 50%/50% 50%;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-checkbox .custom-control-label::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::after, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
          background: no-repeat 50%/50% 50%;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-control, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-control {
        position: relative;
        display: block;
        min-height: 1.5rem;
        padding-left: 1.5rem;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-input, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-input, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-input {
          position: absolute;
          z-index: -1;
          opacity: 0;
          box-sizing: border-box;
          padding: 0;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label {
          color: #000000;
          font-size: 12px!important;
          font-family: 'Open Sans', Arial, Helvetica, sans-serif;
          line-height: 22px;
          margin-bottom: 0;
          position: relative;
          vertical-align: top;
          font-style: normal;
          font-weight: 700;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-select, #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-select {
        background-color: #ffffff !important;
        color: #333333 !important;
        border-color: #cccccc;
        border-radius: 4px !important;
        border-style: solid !important;
        border-width: 1px !important;
        font-family: 'Exo', sans-serif;
        font-size: 14px !important;
        line-height: 20px !important;
        margin-bottom: 0;
        margin-top: 0;
        padding: 10px 28px 10px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        height: auto;
        display: inline-block;
        vertical-align: middle;
        background: url('https://assets.mlcdn.com/ml/images/default/dropdown.svg') no-repeat right .75rem center/8px 10px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
      }


      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow {
        height: auto;
        width: 100%;
        float: left;
      }
      .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal { width: 70%; float: left; }
      .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-button-horizontal { width: 30%; float: left; }
      .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-button-horizontal.labelsOn { padding-top: 25px;  }
      .ml-form-formContent.horozintalForm .ml-form-horizontalRow .horizontal-fields { box-sizing: border-box; float: left; padding-right: 10px;  }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input {
        background-color: #ffffff;
        color: #333333;
        border-color: #cccccc;
        border-radius: 4px;
        border-style: solid;
        border-width: 1px;
        font-family: 'Exo', sans-serif;
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 0;
        margin-top: 0;
        padding: 10px 10px;
        width: 100%;
        box-sizing: border-box;
        overflow-y: initial;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button {
        background-color: #9E6B83 !important;
        border-color: #9E6B83;
        border-style: solid;
        border-width: 1px;
        border-radius: 4px;
        box-shadow: none;
        color: #ffffff !important;
        cursor: pointer;
        font-family: 'Exo', sans-serif;
        font-size: 18px !important;
        font-weight: 400;
        line-height: 20px;
        margin: 0 !important;
        padding: 10px !important;
        width: 100%;
        height: auto;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button:hover {
        background-color: #004643 !important;
        border-color: #004643 !important;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type="checkbox"] {
        box-sizing: border-box;
        padding: 0;
        position: absolute;
        z-index: -1;
        opacity: 0;
        margin-top: 5px;
        margin-left: -1.5rem;
        overflow: visible;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description {
        color: #000000;
        display: block;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        font-size: 12px;
        text-align: left;
        margin-bottom: 0;
        position: relative;
        vertical-align: top;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label {
        font-weight: normal;
        margin: 0;
        padding: 0;
        position: relative;
        display: block;
        min-height: 24px;
        padding-left: 24px;

      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label a {
        color: #000000;
        text-decoration: underline;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p {
        color: #000000 !important;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
        font-size: 12px !important;
        font-weight: normal !important;
        line-height: 18px !important;
        padding: 0 !important;
        margin: 0 5px 0 0 !important;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p:last-child {
        margin: 0;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
        margin: 0 0 20px 0;
        float: left;
        width: 100%;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
        background-color: #9E6B83 !important;
        border: none !important;
        border-radius: 4px !important;
        box-shadow: none !important;
        color: #ffffff !important;
        cursor: pointer;
        font-family: 'Exo', sans-serif !important;
        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 21px !important;
        height: auto;
        padding: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.loading {
        display: none;
      }
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover {
        background-color: #004643 !important;
      }
      .ml-subscribe-close {
        width: 30px;
        height: 30px;
        background: url('https://assets.mlcdn.com/ml/images/default/modal_close.png') no-repeat;
        background-size: 30px;
        cursor: pointer;
        margin-top: -10px;
        margin-right: -10px;
        position: absolute;
        top: 0;
        right: 0;
      }
      .ml-error input, .ml-error textarea, .ml-error select {
        border-color: red!important;
      }

      .ml-error .custom-checkbox-radio-list {
        border: 1px solid red !important;
        border-radius: 4px;
        padding: 10px;
      }

      .ml-error .label-description,
      .ml-error .label-description p,
      .ml-error .label-description p a,
      .ml-error label:first-child {
        color: #ff0000 !important;
      }

      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p,
      #mlb2-11133746.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p:first-letter {
        color: #ff0000 !important;
      }
            @media only screen and (max-width: 400px){

        .ml-form-embedWrapper.embedDefault, .ml-form-embedWrapper.embedPopup { width: 100%!important; }
        .ml-form-formContent.horozintalForm { float: left!important; }
        .ml-form-formContent.horozintalForm .ml-form-horizontalRow { height: auto!important; width: 100%!important; float: left!important; }
        .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal { width: 100%!important; }
        .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal > div { padding-right: 0px!important; padding-bottom: 10px; }
        .ml-form-formContent.horozintalForm .ml-button-horizontal { width: 100%!important; }
        .ml-form-formContent.horozintalForm .ml-button-horizontal.labelsOn { padding-top: 0px!important; }

      }
    </style>

    
  
    
    

    
    

    
    

    

      
        
        
      

      
        
        
      

      

            
            
            
            
            
            
      

      

      
        
        
         
        
        
      

        
        
        
        
        
        
      

       

        
        
        
        
        
        
        
       


      
        
        
        
        
  



  
        
        
        
      


      
    
    
    
    
    
    
    
  

  
        
        
        
        
        
      

      
        
        
        
        
        
      

      
        
        
        
        
        
      

       

        
        
        
        
       

       
        
        
        
        
      

      
        
        
        
        
        
        
        
       

    

    


      


      

      
      

      

      





    

      
    <div id="mlb2-11133746" class="ml-form-embedContainer ml-subscribe-form ml-subscribe-form-11133746">
      <div class="ml-form-align-center ">
        <div class="ml-form-embedWrapper embedForm">

          
          

          <div class="ml-form-embedBody ml-form-embedBodyDefault row-form">

            <div class="ml-form-embedContent" style=" ">
              
                <h4>8 outils plus éthiques pour ton entreprise !</h4>
                <p>Télécharge gratuitement ma liste de 8 outils plus éthiques pour ton entreprise&nbsp;!</p>
<p>Pour agir dès maintenant et concrètement pour réduire ton impact négatif sur la planète et ses habitant·es ❤️</p>
              
            </div>

            <form class="ml-block-form" action="https://assets.mailerlite.com/jsonp/775549/forms/110545062318834781/subscribe" data-code="" method="post" target="_blank">
              <div class="ml-form-formContent">
                

                  
                  <div class="ml-form-fieldRow ">
                    <div class="ml-field-group ml-field-name">

                      


                      <!-- input -->
                      <input aria-label="name" type="text" class="form-control" data-inputmask="" name="fields[name]" placeholder="Prénom" autocomplete="given-name">
                      <!-- /input -->

                      <!-- textarea -->
                      
                      <!-- /textarea -->

                      <!-- select -->
                      
                      <!-- /select -->

                      <!-- checkboxes -->
            
            <!-- /checkboxes -->

                      <!-- radio -->
                      
                      <!-- /radio -->

                      <!-- countries -->
                      
                      <!-- /countries -->





                    </div>
                  </div><div class="ml-form-fieldRow ml-last-item">
                    <div class="ml-field-group ml-field-email ml-validate-email ml-validate-required">

                      


                      <!-- input -->
                      <input aria-label="email" aria-required="true" type="email" class="form-control" data-inputmask="" name="fields[email]" placeholder="Email" autocomplete="email">
                      <!-- /input -->

                      <!-- textarea -->
                      
                      <!-- /textarea -->

                      <!-- select -->
                      
                      <!-- /select -->

                      <!-- checkboxes -->
            
            <!-- /checkboxes -->

                      <!-- radio -->
                      
                      <!-- /radio -->

                      <!-- countries -->
                      
                      <!-- /countries -->





                    </div>
                  </div>
                
              </div>

              

              <!-- Privacy policy -->
              
              <!-- /Privacy policy -->

              

              

              <div class="ml-form-checkboxRow ml-validate-required">
                
                  <label class="checkbox">
                    <input type="checkbox">
                    <div class="label-description">
                      <p>En cochant cette case, tu acceptes de recevoir des emails de la part de steffilala.fr/. Tu seras également inscrit·e automatiquement à la newsletter bi-mensuelle, de laquelle tu peux te désinscrire facilement à tout moment.</p>
                    </div>
                  </label>
                
              </div>






              
              <input type="hidden" name="ml-submit" value="1">

              <div class="ml-form-embedSubmit">
                
                  <button type="submit" class="primary">Je veux la liste !</button>
                
                <button disabled="disabled" style="display: none;" type="button" class="loading">
                  <div class="ml-form-embedSubmitLoad"></div>
                  <span class="sr-only">Loading...</span>
                </button>
              </div>

              
              <input type="hidden" name="anticsrf" value="true">
            </form>
          </div>

          <div class="ml-form-successBody row-success" style="display: none">

            <div class="ml-form-successContent">
              
                <h4>Youpi !</h4>
                <p>Rendez-vous dans ta boite mail pour découvrir la liste ! Pense à checker tes spams si tu ne reçois rien, et ajoute-moi à tes contacts si j'y suis 😉</p>
              
            </div>

          </div>
        </div>
      </div>
    </div>

  

  
  
  <script>
    function ml_webform_success_11133746() {
      var $ = ml_jQuery || jQuery;
      $('.ml-subscribe-form-11133746 .row-success').show();
      $('.ml-subscribe-form-11133746 .row-form').hide();
    }
      </script>
  
  
      <script src="https://groot.mailerlite.com/js/w/webforms.min.js?v2d8fb22bb5b3677f161552cd9e774127" type="text/javascript"></script>
        <script>
            fetch("https://assets.mailerlite.com/jsonp/775549/forms/110545062318834781/takel")
        </script>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
]]></content:encoded>
					
					<wfw:commentRss>https://steffilala.fr/hebergement-web-ecologique/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
