<?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>Steffi Lala</title>
	<atom:link href="https://steffilala.fr/feed/" rel="self" type="application/rss+xml" />
	<link>https://steffilala.fr</link>
	<description>Webdesigner freelance à Montpellier</description>
	<lastBuildDate>Sat, 17 Oct 2026 09:51:33 +0000</lastBuildDate>
	<language>fr-FR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1.3</generator>

<image>
	<url>https://steffilala.fr/wp-content/uploads/2025/11/Logo-Steffi-Lala_monogramme_noir.svg</url>
	<title>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 class="wp-block-paragraph">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><a href="https://steffilala.fr/a-propos/" data-type="page" data-id="122">conceptrice web certifiée en numérique responsable</a></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-794e3cfa 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 class="wp-block-paragraph"><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">Comment créer un site web écologique</a></li>
</ol>
</div>
</div>



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



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



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



<p class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph"><em>«&nbsp;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.&nbsp;»</em></p>



<p class="wp-block-paragraph">Donc il y a plusieurs choses importantes.</p>



<p class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">Ces 3 principes ont été posés par l'un des pionniers de l'éco-conception web, Frédéric Bordage, sur son site&nbsp;<a href="https://www.greenit.fr/" target="_blank" rel="noreferrer noopener">greenit.fr</a>.</p>



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



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



<p class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">Résultat, une requête Yahoo est 5 fois plus lourde qu'une requête Google*</p>



<p class="wp-block-paragraph">*<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 class="wp-block-paragraph">La simplicité c'est une démarche qualitative. La frugalité, c'est plutôt quantitatif.</p>



<p class="wp-block-paragraph">Il va s'agir ici de limiter les fonctionnalités et leur qualité au strict minimum.</p>



<p class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">La pertinence, c'est une équation entre l'utilité, la rapidité et l'accessibilité.</p>



<p class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 id="avantages" class="wp-block-heading">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph"><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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">La deuxième raison de créer un <strong>site web éco-responsable</strong>, c'est pour être plus aligné·e.</p>



<p class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">Je vais vous donner ma définition de l'alignement. Pour moi, être aligné·e, c'est simplement&nbsp;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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph"><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&nbsp;en accord avec mes valeurs&nbsp;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 class="wp-block-paragraph"><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 à&nbsp;<strong>l'accessibilité numérique</strong>&nbsp;(le fait de rendre le site accessible pour les personnes en situation de handicap) ou encore&nbsp;<strong>la sécurité des données</strong>&nbsp;et&nbsp;<strong>la vie privée</strong>&nbsp;des utilisateurices.</p>



<p class="wp-block-paragraph">Il existe en France,&nbsp;<a href="https://www.opquast.com/" target="_blank" rel="noreferrer noopener">un organisme de formation</a>&nbsp;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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 id="ideesrecues" class="wp-block-heading">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 class="wp-block-paragraph">Première idée reçue : un site éco-responsable, c'est moche.</p>



<p class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">Vous pourrez d'ailleurs le voir sur mon portfolio avec <a href="https://steffilala.fr/portfolio/" data-type="page" data-id="17">ces exemples de site web éco-responsables</a>.</p>



<p class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">Deuxième idée reçue, c'est qu'un site web écologique va forcément coûter plus cher.</p>



<p class="wp-block-paragraph">Alors, peut-être, mais pas forcément.</p>



<p class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">Et bien là ma réponse est simple : non, ce n'est pas compliqué.</p>



<p class="wp-block-paragraph">En tous cas, pas plus compliqué que de créer un site tout court.</p>



<p class="wp-block-paragraph">Ç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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">Quatrième idée reçue : un site internet écologique ne peut pas avoir les mêmes fonctionnalités.</p>



<p class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">Et pour moi, vraiment, l'éco-conception c'était indissociable du fait de coder ses sites de A à Z.</p>



<p class="wp-block-paragraph">Et pourtant, c'est faux.</p>



<p class="wp-block-paragraph">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 class="wp-block-paragraph">Ceci dit, on peut trouver des&nbsp;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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 id="etapes" class="wp-block-heading">Comment créer un site web écologique ?</h2>



<p class="wp-block-paragraph">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">Les 6 étapes pour éco-concevoir un site</h3>



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



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



<p class="wp-block-paragraph"><strong>Selon moi&nbsp;, c'est le plus important.</strong></p>



<p class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph"><strong>On n'en met pas plus, pas moins.</strong></p>



<p class="wp-block-paragraph">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>



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



<p class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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>



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



<p class="wp-block-paragraph">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 class="wp-block-paragraph">Cette étape sera grandement facilitée si vous avez bien fait les deux premières.</p>



<p class="wp-block-paragraph">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 class="wp-block-paragraph">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>



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



<p class="wp-block-paragraph">Quand on sait exactement comment notre site sera organisé et ce qu'il contiendra, on peut passer au webdesign.</p>



<p class="wp-block-paragraph">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 class="wp-block-paragraph">Lors de cette phase, il est important de faire&nbsp;<strong>des choix éco-responsables</strong>&nbsp;aussi pour le design.</p>



<p class="wp-block-paragraph">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 class="wp-block-paragraph">Je vous précise plus bas 6 règles pour un webdesign eco-responsable.</p>



<p class="wp-block-paragraph">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>



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



<p class="wp-block-paragraph">L'intégration, c'est le moment de construire le site web écologique pour de vrai.</p>



<p class="wp-block-paragraph">Et comme vous le voyez, c'est presque la dernière étape.</p>



<p class="wp-block-paragraph"><strong>Au final, la préparation est le plus important et aussi la plus grosse partie du travail.</strong></p>



<p class="wp-block-paragraph">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 class="wp-block-paragraph">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 :&nbsp;<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&nbsp;<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>



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



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



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



<p class="wp-block-paragraph">Personne de vous demande la perfection, simplement l'authenticité de votre démarche.</p>



<p class="wp-block-paragraph">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>



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


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



<h3 class="wp-block-heading">Bonus : 6 règles à suivre pour un webdesign éco-responsable</h3>



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



<p class="wp-block-paragraph">Un bon <strong>webdesign éco-responsable</strong>, c’est un <strong>contenu structuré</strong> pour guider l’œil.</p>



<p class="wp-block-paragraph">Sur le web, on <strong>scanne</strong> plus qu’on ne lit. Si votre cible ne trouve pas ce qu’elle cherche en 3 secondes, elle s’en va.</p>



<p class="wp-block-paragraph">Pour éviter ça :</p>



<ul class="wp-block-list">
<li><strong>Utilisez des titres hiérarchisés </strong>(H1 &gt; H2 &gt; H3) : les niveaux de titre que vous peouvez voir sur votre outil de création de site web ne doivent pas être utilisés pour styliser votre texte (pour faire joli), ils doivent vraiment indiquer la structure de votre 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>Organisez le contenu en <strong>blocs clairs</strong> (une idée = un bloc)</li>
</ul>



<p class="wp-block-paragraph">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>



<h4 class="wp-block-heading">2. Allèger la mise en page (et votre charge mentale)</h4>



<p class="wp-block-paragraph">Dans un site internet écoresponsable, chaque élément compte.</p>



<p class="wp-block-paragraph">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>. (et quand on connaît <a href="https://steffilala.fr/impact-environnemental-site-internet/" data-type="post" data-id="226">l'impact environnemental d'un site internet</a>, ce n'est pas négligeable !)</p>



<p class="wp-block-paragraph">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èrez un style minimal, sans fioritures</li>



<li><strong>Aèrez 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>Évitez les effets graphiques lourds, surtout si ce n'est pas votre 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 class="wp-block-paragraph">Épuré ne veut pas dire chiant ou froid. C’est de la <strong>sobriété numérique</strong> au service du confort de votre audience. Et ça n'empêche pas d'avoir un site dynamique ou chaleureux !</p>



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



<h4 class="wp-block-heading">3. Utiliser une palette de couleurs simple et accessible</h4>



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



<p class="wp-block-paragraph">Ça signifie donc qu'au-delà de l'harmonie et de la cohérence dans le choix de vos couleurs, les contrastes doivent être suffisant pour assurer une bonne lisibilité. Pour vérifier ça, vous pouvez 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-794e3cfa 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 class="wp-block-paragraph">Et pour en savoir plus sur ce sujet, vous pouvez 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 class="wp-block-paragraph">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 class="wp-block-paragraph">Cela améliore la <strong>performance web</strong> (moins à charger), mais aussi l’<strong>accessibilité web</strong>.</p>



<p class="wp-block-paragraph">Pensez aussi à garder une cohérence sur tout le site. Par exemple, pour les boutons, définissez un bouton principal (couleur, taille, bordure ou non, rond ou carré, ...) et éventuellement un bouton secondaire et utilisez seulement ces deux là sur ton site.</p>



<p class="wp-block-paragraph">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>



<h4 class="wp-block-heading">4. Choisir une typographie lisible et légère</h4>



<p class="wp-block-paragraph">La typographie influence beaucoup l’expérience utilisateur, la lisibilité, <strong>et le poids de votre site</strong>.</p>



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



<li>Utilisez 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>Soyez attentif·ves à la <strong>taille, l’interlignage et le contraste</strong></li>
</ul>



<p class="wp-block-paragraph">Pour vous 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 vous le pouvez, utilisez 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 class="wp-block-paragraph">Là aussi, pour une bonne cohérence, les titres de même niveau doivent avoir la même apparence (<em>taille, couleurs, ...</em>) sur toutes les pages du site. Voici un exemple que vous pouvez copier :</p>



<p class="wp-block-paragraph"><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 class="wp-block-paragraph">L'objectif, c'est que votre 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>



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



<h4 class="wp-block-heading">5. Créer une navigation claire et intuitive</h4>



<p class="wp-block-paragraph">Une <strong>navigation complexe</strong>, c’est plus de clics, plus de rechargements de pages, plus de frustration.</p>



<p class="wp-block-paragraph">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, concentrez-vous sur ce que votre 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, respectez-le. Les liens doivent aussi être pensés dans l'intérêt des visiteur·ses : assurez-vous qu'ils soient utiles à l'endroit où ils sont placés.</li>
</ul>



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



<p class="wp-block-paragraph">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>



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



<p class="wp-block-paragraph">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 class="wp-block-paragraph">Par exemple, une image peut servir à :</p>



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



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



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



<p class="wp-block-paragraph">Quand vous ajoutez des images, privilégiez :</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 votre 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, pensez à 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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">➡️ Si vous souhaitez que je vous accompagne dans cette démarche, jetez un oeil à <strong><a href="https://steffilala.fr/site-web/site-sur-mesure/" data-type="page" data-id="129">mes services de création de sites éco-responsables sur-mesure</a></strong> !</p>



<p class="has-small-font-size wp-block-paragraph">*<em>lien affilié</em>&nbsp;<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>Comment installer WordPress de façon responsable en 3 clics</title>
		<link>https://steffilala.fr/comment-installer-wordpress-infomaniak/</link>
					<comments>https://steffilala.fr/comment-installer-wordpress-infomaniak/#respond</comments>
		
		<dc:creator><![CDATA[Steffi]]></dc:creator>
		<pubDate>Fri, 28 Mar 2025 17:13:06 +0000</pubDate>
				<category><![CDATA[Création de site]]></category>
		<guid isPermaLink="false">https://entreprendre-ethique.fr/?p=31846</guid>

					<description><![CDATA[Article mis à jour le 8 Juillet 2026 Ça y est, votre choix est fait, vous allez créer votre site avec WordPress (super décision) ! Maintenant, il vous faut choisir un hébergement et trouver comment installer WordPress. Ça tombe bien, je vous explique dans cet article comment faire ça super facilement et de façon éthique [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph"><em>Article mis à jour le 8 Juillet 2026</em></p>



<p class="wp-block-paragraph">Ça y est, votre choix est fait, vous allez <a href="https://steffilala.fr/creer-site-wordpress/">créer votre site avec WordPress</a> (<em>super décision</em>) ! Maintenant, il vous faut choisir un hébergement et trouver <strong>comment installer WordPress</strong>. Ça tombe bien, je vous explique dans cet article comment faire ça super facilement et de façon éthique avec <a href="https://www.infomaniak.com/goto/fr/home?utm_term=61731c9b47a85" target="_blank" rel="noreferrer noopener">Infomaniak</a>* !</p>



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



<div style="height:50px" 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-47f80d4c 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-2 wp-block-paragraph" style="color:#360c44"><strong>Sommaire</strong></p>



<ol class="wp-block-list">
<li><a href="/#pourquoi">Pourquoi choisir Infomaniak pour installer WordPress ?</a>
<ul class="wp-block-list">
<li><a href="/#ethique">Infomaniak : un hébergeur web éthique</a></li>



<li><a href="/#prix">Une solution responsable qui ne coûte pas plus cher</a></li>



<li><a href="/#wordpress">Un hébergement particulièrement adapté pour installer WordPress</a></li>
</ul>
</li>



<li><a href="/#tuto">Comment installer WordPress avec Infomaniak</a></li>
</ol>
</div>
</div>



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



<h2 id="pourquoi" class="wp-block-heading">Pourquoi choisir Infomaniak pour installer WordPress ?</h2>



<p class="wp-block-paragraph">Depuis que je crée des <a href="https://steffilala.fr/site-web-ecologique/">sites web éco-responsables</a>, je choisis et recommande <a href="https://www.infomaniak.com/goto/fr/home?utm_term=61731c9b47a85" target="_blank" rel="noreferrer noopener">Infomaniak</a>*.</p>



<p class="wp-block-paragraph">Selon moi, cet hébergeur correspond au meilleur équilibre entre fiabilité, éthique et service.</p>



<p class="wp-block-paragraph">Le choix de votre hébergeur est très important. Il va impacter la disponibilité de votre site, sa vitesse de chargement et son empreinte environnementale. Des critères aussi importants pour vos futur·es visiteur·ses que pour Google.</p>



<p class="wp-block-paragraph">Vous allez passer beaucoup de temps sur la création de votre site, alors autant faire les bons choix tout de suite et en être aussi fier·e que votre maman le jour où vous avez obtenu votre bac.</p>



<p class="wp-block-paragraph">P.S. : vous ne comprenez rien à ces histoires d'hébergement ? Je vous explique tout par ici : <a href="https://steffilala.fr/hebergement-web-ecologique/" data-type="post" data-id="29662">Hébergement web écologique : tout comprendre facilement</a></p>



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



<h3 id="ethique" class="wp-block-heading">Infomaniak : un hébergeur web éthique</h3>



<p class="wp-block-paragraph">La première raison qui m'a poussée vers Infomaniak, c'est son engagement écologique. Un engagement qui passe notamment par :</p>



<ul class="wp-block-list">
<li>L'utilisation exclusive d'énergie renouvelable</li>



<li>La compensation à 200% de leurs émissions de gaz à effet de serre</li>



<li>Une gestion raisonnée, écologique et moderne de leurs data centers</li>



<li>Une politique RSE poussée</li>



<li>Des achats raisonnés</li>



<li>Une gestion des déchets optimisés</li>



<li>Une transparence totale sur leurs impacts</li>
</ul>



<p class="wp-block-paragraph">Ils sont aussi multiplement (<em>ce mot n'existe pas</em>) certifiés et récompensés pour leurs efforts. Et enfin, ils apportent une attention particulière à la protection des données.</p>



<p class="wp-block-paragraph">Vous pouvez retrouver sur leur site l'ensemble de <a href="https://www.infomaniak.com/fr/ecologie" target="_blank" data-type="link" data-id="https://www.infomaniak.com/fr/ecologie" rel="noreferrer noopener">leurs engagements et certificats</a>.</p>



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



<h3 id="prix" class="wp-block-heading">Une solution responsable qui ne coûte pas plus cher</h3>



<p class="wp-block-paragraph">Soyons honnête, on a l'habitude que les choix les plus éthiques soient les plus chers (<em>coucou la SNCF</em>).</p>



<p class="wp-block-paragraph">Mais bonne nouvelle, opter pour un hébergeur éco-responsable ne vous coûtera pas plus cher !</p>



<p class="wp-block-paragraph">Voici un comparatif des prix entre Infomaniak et quelques hébergeurs écologiques populaires :</p>



<ul class="wp-block-list">
<li><strong>Infomaniak</strong> : à partir de 5,75€ / mois</li>



<li><strong>O2switch</strong> : à partir de 5€ / mois</li>



<li><strong>Planet Hoster</strong> : à partir de 5€ / mois</li>



<li><strong>Ex2</strong> : à partir de 8€95 / mois</li>
</ul>



<p class="wp-block-paragraph">Attention, ces prix sont les prix d'entrée pour un hébergement WordPress mais tous ne contiennent pas les mêmes caractéristiques. Aussi, le prix ne peut pas être le seul critère d'évaluation : la performance, le support en cas de problème, la disponibilité ou encore les engagements écologiques sont autant de critères qui doivent être comparés. Ce n'est pas le but de cet article mais retenez qu'Infomaniak est l'un des acteurs les plus engagés et que les tarifs ne sont pas plus élevés qu'ailleurs.</p>



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



<h3 id="wordpress" class="wp-block-heading">Un hébergement particulièrement adapté pour installer WordPress</h3>



<p class="wp-block-paragraph">En optant pour un hébergement Infomaniak pour WordPress, vous bénéficierez de plusieurs avantages :</p>



<ul class="wp-block-list">
<li>Une installation hyper facile et rapide (<em>même si vous n'y connaissez rien à la technique</em>)</li>



<li>L'accès à des thèmes et extensions normalement payantes, dont le populaire thème Divi (<em>qui coûte rien qu'à lui seul 250$</em>)</li>



<li>La migration de votre site offerte et gérée par Infomaniak si votre site est actuellement hébergé ailleurs</li>



<li>Une plateforme intuitive pour faire des trucs qui paraissent compliqués comme mettre à jour la version php de votre site (<em>ça se fait en un clic là aussi !</em>)</li>
</ul>



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



<h2 id="tuto" class="wp-block-heading">Comment installer WordPress avec Infomaniak</h2>



<p class="wp-block-paragraph">Alors maintenant que vous êtes convaincu·es, concrètement, comment installer WordPress avec Infomaniak ?</p>



<p class="wp-block-paragraph">Vous allez voir, ça ne prend que quelques clics !</p>



<p class="wp-block-paragraph"><em>P.S. : pour suivre ce tutoriel, il faut d'abord souscrire à <a href="https://www.infomaniak.com/goto/fr/hosting.web?utm_term=61731c9b47a85" target="_blank" rel="noreferrer noopener">une offre d'hébergement chez Infomaniak</a>.</em></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-794e3cfa wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="275" height="729" src="https://steffilala.fr/wp-content/uploads/2025/03/menu-infomaniak.png" alt="Aperçu du menu Infomaniak" class="wp-image-32070" srcset="https://steffilala.fr/wp-content/uploads/2025/03/menu-infomaniak.png 275w, https://steffilala.fr/wp-content/uploads/2025/03/menu-infomaniak-113x300.png 113w" sizes="auto, (max-width: 275px) 100vw, 275px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p class="wp-block-paragraph"><strong>1- Connectez-vous sur votre manager</strong> : <a href="https://manager.infomaniak.com" target="_blank" rel="noreferrer noopener">manager.infomaniak.com</a></p>



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



<p class="wp-block-paragraph"><strong>2- Rendez vous dans "Web &amp; Domaines" puis "Site web"</strong> (<em>dans le menu à gauche de la page, cf capture d'écran</em>)</p>



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



<p class="wp-block-paragraph"><strong>3- Cliquez sur le site concerné</strong> (<em>ou sur "ajouter un site" si le site n'est pas encore créé</em>)</p>



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



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



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


<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" decoding="async" width="1024" height="512" src="https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-1-1024x512.jpg" alt="Comment installer WordPress avec Infomaniak : aperçu de l'écran d'installation" class="wp-image-32071" srcset="https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-1-1024x512.jpg 1024w, https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-1-300x150.jpg 300w, https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-1-768x384.jpg 768w, https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-1.jpg 1200w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>
</div>


<p class="wp-block-paragraph"><strong>4- Cliquez sur "Ajouter une application"</strong></p>



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



<p class="wp-block-paragraph"><strong>5- Sélectionnez WordPress puis "Suivant" au bas de la page</strong></p>



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



<p class="wp-block-paragraph"><strong>6- Remplir les informations demandées :</strong></p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="512" src="https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-2-1024x512.jpg" alt="Aperçu de la configuration d'un site WordPress avec Infomaniak" class="wp-image-32072" srcset="https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-2-1024x512.jpg 1024w, https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-2-300x150.jpg 300w, https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-2-768x384.jpg 768w, https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-2.jpg 1200w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<ul class="wp-block-list">
<li><strong>Adresse mail de connexion au compte WordPress</strong> : l'email que vous souhaitez utiliser pour gérer votre site WordPress. Vous pourrez le changer plus tard mais assurez-vous que ce soit une adresse que vous pouvez consulter facilement</li>



<li><strong>Identifiants WordPress</strong> : le nom d'utilisateur et le mot de passe que vous souhaitez utiliser pour vous connecter sur votre site WordPress. Attention, l'identifiant est public (<em>vous pouvez aussi changer ça plus tard</em>)</li>



<li><strong>Mot de passe :</strong> votre futur mot de passe de connexion à WordPress</li>
</ul>



<p class="wp-block-paragraph">Puis cochez la case d'acceptation des conditions d'utilisation de WordPress et cliquez sur suivant.</p>



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



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="512" src="https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-3-1024x512.jpg" alt="Configuration d'un site WordPress avec Infomaniak" class="wp-image-32073" srcset="https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-3-1024x512.jpg 1024w, https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-3-300x150.jpg 300w, https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-3-768x384.jpg 768w, https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-3.jpg 1200w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph"><strong>7- Entrez les informations de configuration :</strong></p>



<ul class="wp-block-list">
<li>Nom du site (<em>vous pourrez le modifier par la suite</em>)</li>



<li>Langue</li>



<li>Adresse : vous pouvez utiliser directement votre nom de domaine ou bien opter pour une URL temporaire le temps de construire votre site</li>
</ul>



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



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="512" src="https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-4-1024x512.jpg" alt="Aperçu du choix du thème lors de l'installation de WordPress" class="wp-image-32074" srcset="https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-4-1024x512.jpg 1024w, https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-4-300x150.jpg 300w, https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-4-768x384.jpg 768w, https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-4.jpg 1200w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph"><strong>8- Choisissez votre thème</strong> : par défaut, on vous propose Divi, un thème très populaire qui inclus un constructeur de site très flexible mais plus lourd, ou le thème par défaut de WordPress, idéal si vous voulez construire votre site avec Gutenberg, le constructeur de site historique de WordPress (<em>plus léger mais légèrement moins flexible que Divi</em>)</p>



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



<p class="wp-block-paragraph"><strong>9- Vérifiez les infos :</strong> l'écran suivant vous propose un récapitulatif des informations saisies, vérifiez que tout est correct puis cliquez sur suivant.</p>



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



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="512" src="https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-5-1024x512.jpg" alt="Message de succès après avoir installé WordPress avec Infomaniak" class="wp-image-32075" srcset="https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-5-1024x512.jpg 1024w, https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-5-300x150.jpg 300w, https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-5-768x384.jpg 768w, https://steffilala.fr/wp-content/uploads/2025/03/comment-installer-wordpress-5.jpg 1200w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph"><strong>10- Bravo, vous avez installer WordPress !</strong></p>



<p class="wp-block-paragraph">Infomaniak va installer WordPress sur votre site pour vous. Vous pouvez maintenant vous connectez à votre site WordPress depuis Infomaniak ou directement en ajoutant /wp-admin derrière votre nom de domaine ou l'URL de prévisualisation si vous avez fait ce choix à l'étape 7.</p>



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



<p class="wp-block-paragraph">Et voilà comment installer WordPress sur votre site en 10 petites étapes. Il ne vous reste maintenant plus qu'à créer et personnaliser vos pages, rédiger vos premiers articles et partager le fruit de vos efforts au monde entier 🌈 (<em>oui je sais, "plus qu'à" n'est pas vraiment adapté ici </em>😬)</p>



<p class="wp-block-paragraph">Si vous en avez marre de galérer sur votre site et que vous voulez enfin un résultat pro sans vous ruiner, découvrez mon offre de <a href="https://steffilala.fr/site-web/site-internet-petit-budget/" data-type="page" data-id="31986">site internet petit budget</a>.</p>



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



<p class="wp-block-paragraph">*<em>lien affilié : je touche une commission si vous achetez via ce lien. Ça ne vous coûte pas plus cher et je ne recommande que des produits et services que j'ai testés et approuvés.</em></p>
]]></content:encoded>
					
					<wfw:commentRss>https://steffilala.fr/comment-installer-wordpress-infomaniak/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Créer son site sans coder et sans polluer : quel outil choisir ?</title>
		<link>https://steffilala.fr/creer-site-sans-coder/</link>
					<comments>https://steffilala.fr/creer-site-sans-coder/#respond</comments>
		
		<dc:creator><![CDATA[Steffi]]></dc:creator>
		<pubDate>Fri, 28 Feb 2025 05:30:00 +0000</pubDate>
				<category><![CDATA[Création de site]]></category>
		<guid isPermaLink="false">https://entreprendre-ethique.fr/?p=122</guid>

					<description><![CDATA[Article mis à jour le 28 Juillet 2026 Créer son site sans coder, c'est un peu comme votre ex. Au début, vous pensiez ça inaccessible et puis finalement, avec le temps, le mythe s'effondre. Aujourd'hui, il existe une multitude d'outils qui facilitent la création d'un site internet. Vous avez l'embarras du choix. Mais qu'est-ce que [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph"><em>Article mis à jour le 28 Juillet 2026</em></p>



<p class="wp-block-paragraph"><strong>Créer son site sans coder</strong>, c'est un peu comme votre ex. Au début, vous pensiez ça inaccessible et puis finalement, avec le temps, le mythe s'effondre.</p>



<p class="wp-block-paragraph">Aujourd'hui, il existe une multitude d'outils qui facilitent la <strong>création d'un site internet</strong>. Vous avez l'embarras du choix.</p>



<p class="wp-block-paragraph">Mais qu'est-ce que je fais si je veux créer mon site sans coder (<em>parce que je suis pas développeur·se en fait, et j'ai pas les moyens d'en payer un·e</em>) ET sans polluer ?</p>



<p class="wp-block-paragraph">Spoiler alert : c'est impossible.</p>



<p class="wp-block-paragraph">À partir du moment où vous créez un site web, il aura un impact environnemental. Mais la bonne nouvelle, c'est qu'on peut faire plein de choses pour la limiter. Et notamment, choisir la bonne <strong>plateforme pour créer son site</strong>.</p>



<p class="wp-block-paragraph">Cet article fait donc un comparatif complet des plateformes pour créer son site sans coder selon 3 critères : facilité de prise en main, coût et éco-conception.</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-47f80d4c 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-4 wp-block-paragraph" style="color:#360c44"><strong>Sommaire</strong></p>



<ol class="wp-block-list">
<li><a href="/#outils">Créer son site sans coder : les outils en lice</a></li>



<li><a href="/#criteres">Les critères de la compétition no code</a>
<ul class="wp-block-list">
<li><a href="/#priseenmain">Prise en main</a></li>



<li><a href="/#cout">Coût</a></li>



<li><a href="/#ecoconception">Éco-responsabilité</a></li>



<li><a href="/#recap">Le récap'</a></li>
</ul>
</li>



<li><a href="/#alternatives">Quid des outsiders : outils no code alternatifs</a></li>



<li><a href="/#wordpress">WordPress, le grand gagnant pour créer son site sans coder</a>
<ul class="wp-block-list">
<li><a href="/#pourquoiwordpress">Pourquoi choisir WordPress ?</a></li>



<li><a href="/#builders">Quel builder choisir pour créer son site sans coder ET sans polluer</a></li>
</ul>
</li>
</ol>
</div>
</div>



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



<h2 class="wp-block-heading">Créer son site sans coder : les outils en lice</h2>



<p class="wp-block-paragraph">Des <strong>outils de créations de site</strong>, il en existe pléthore. Je ne vais évidemment pas TOUS les comparer, ce serait trop long et trop chiant pour tout le monde. Je vais ici comparer les outils dont j'entends le plus parler parmi mon audience et ma clientèle, et qui me semble donc les alternatives les plus envisagées par les entrepreneur·ses.</p>



<p class="wp-block-paragraph">Voici les 4 <strong>plateformes no code</strong> que nous allons comparer :</p>



<ul class="wp-block-list">
<li><strong>Wix</strong> : aka la plateforme qui a longtemps eu la pire des réputations</li>



<li><strong>Showit</strong> : la plus niche (<em>plateforme préférée des entrepreneur·ses / mentor américaines de type Amy Porterfield</em>)</li>



<li><strong>Squarespace</strong> : l'outsider qui monte (<em>c'est un pléonasme non ?</em>)</li>



<li><strong>WordPress</strong> : le vieux loubard sur qui on peut toujours compter (<em>et qui est utilisé par presque 40% des sites dans le monde</em>)</li>
</ul>



<p class="wp-block-paragraph">Toutes ces plateformes fonctionnent plus ou moins de la même façon. Elles vous proposent de créer un site sans coder grâce au système de drag and drop (<em>ou glisser-déposer</em>) en français.</p>



<p class="wp-block-paragraph">En gros, vous avez des "blocs" prédéfinis (<em>texte, image, bouton, ...</em>) que vous venez "déposer" sur votre page et ensuite personnaliser. Vous pouvez choisir la couleur, la taille, la police, les bordures, ... de chaque bloc, et ainsi construire petit à petit votre site.</p>



<p class="wp-block-paragraph">Elles proposent aussi toutes des templates pour ne pas partir d'une page blanche et gagner un temps fou. Au lieu de partir de zéro et de devoir tout imaginer, vous choisissez un modèle qui vous semble adapté et vous pouvez ensuite le personnaliser avec votre identité visuelle.</p>



<p class="wp-block-paragraph">Bref, il y a, en apparence, aucune difficulté et aucun code.</p>



<p class="wp-block-paragraph">La vérité c'est qu'il y a quand même toujours une courbe d'apprentissage, plus ou moins longue, pour chaque outil. Il faut le temps de trouver où se trouve chaque réglage, comment je peux faire ceci ou cela. C'est normal et inévitable.</p>



<p class="wp-block-paragraph">Et puis bien évidemment qu'il y a du code. C'est juste que c'est la plateforme qui va l'écrire à votre place en fonction de vos réglages des paramètres.</p>



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



<h2 class="wp-block-heading">Les critères de la compétition no code</h2>



<p class="wp-block-paragraph">J'ai choisi de regarder 3 grands critères pour déterminer le champion :</p>



<ul class="wp-block-list">
<li>La facilité de prise en main</li>



<li>L'éco-responsabilité</li>



<li>Le coût</li>
</ul>



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



<h3 class="wp-block-heading">Comparatif des interfaces des outils pour créer son site sans coder</h3>



<p class="wp-block-paragraph">Le but du jeu étant de déterminer le meilleur outil pour créer son site sans coder, il va sans dire que la facilité de prise en main est primordiale.</p>



<p class="wp-block-paragraph">Mais en réalité, c'est assez compliqué puisque je vous l'ai dit en introduction, ils fonctionnent tous plus ou moins pareil.</p>



<p class="wp-block-paragraph">Les constructeurs de site, c'est un système de glisser-déposer. Je prends un élément dans un menu à gauche et je le glisse sur ma page web, à l'endroit où je veux le mettre.</p>



<p class="wp-block-paragraph">Ensuite, je viens modifier les réglages de cet élément : couleur, police, taille, bordures, ...</p>



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


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" src="https://steffilala.fr/wp-content/uploads/2025/02/creer-site-sans-coder.jpg" alt="Aperçu de Gutenberg, un outil pour créer son site sans coder" class="wp-image-160"/><figcaption class="wp-element-caption"><em>Inception : voici un aperçu de Gutenberg, l'outil no code de WordPress utilisé pour créer cet article</em></figcaption></figure>
</div>


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



<p class="wp-block-paragraph">Dans la majorité du temps, ça fonctionnera comme ça :</p>



<ol class="wp-block-list">
<li>J'ajoute une section à ma page</li>



<li>J'ajoute des colonnes dans ma section (de 1 à 12 si on respecte les <a href="https://steffilala.fr/webdesign-eco-responsable/" data-type="post" data-id="31884">règles du webdesign</a>)</li>



<li>J'ajoute des éléments dans ma ou mes colonne(s)</li>
</ol>



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


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" src="https://steffilala.fr/wp-content/uploads/2025/02/structure-page-web.jpg" alt="Schéma de la structure d'une page d'un site internet" class="wp-image-159"/><figcaption class="wp-element-caption"><em>La structure d'une page de site internet</em></figcaption></figure>
</div>


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



<p class="wp-block-paragraph">Sur ce point, on peut parfois lire que Showit l'emporte car il permet de mettre les éléments exactement où vous voulez sur la page. Vous n'êtes pas obligé·es de respecter les colonnes par exemple. Si vous voulez un élément entre deux colonnes, c'est faisable facilement.</p>



<p class="wp-block-paragraph">Sauf que cet avantage peut aussi être un désavantage pour moi. </p>



<p class="wp-block-paragraph">Déjà, parce que ça peut vite devenir un casse-tête pour le responsive (le rendu de votre site sur mobile ou tablette). Mais aussi et surtout parce que quand on n'est pas webdesigner·euse, trop de liberté va compliquer vos choix.</p>



<p class="wp-block-paragraph">Et puis les règles du webdesign ont été inventées pour de bonnes raisons : accessibilité, fluidité de la navigation, habitudes des internautes, ... <strong>Un bon site web, c'est pas juste un beau site web</strong>.</p>



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



<p class="wp-block-paragraph">Concernant WordPress, il a la réputation d'être plus compliqué à prendre en main.</p>



<p class="wp-block-paragraph">Je comprends, l'interface n'est pas des plus modernes, mais une fois habitué·e, c'est pas plus compliqué qu'ailleurs.</p>



<p class="wp-block-paragraph">Et surtout, la prise en main va beaucoup dépendre du builder que vous utiliserez.</p>



<p class="wp-block-paragraph">Alors c'est quoi ça ?</p>



<p class="wp-block-paragraph">J'en parle plus bas dans cet article mais rapidement, un builder, c'est un constructeur de site. Sur WordPress, on a plusieurs choix. Il en existe un par défaut (Gutenberg) mais on peut aussi en installer d'autres (Elementor ou Divi étant les plus connus).</p>



<p class="wp-block-paragraph"><a href="/#builder">Rendez-vous plus bas pour en savoir plus</a>.</p>



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



<p class="wp-block-paragraph">Un mot rapide aussi sur les <a href="https://steffilala.fr/template-wordpress-comment-choisir/" data-type="post" data-id="31328">templates</a> disponibles et le support, car ça va aussi jouer sur la facilité de prise en main.</p>



<p class="wp-block-paragraph">Globalement, tous les outils pour créer son site sans coder en proposent et je vous conseille de les utiliser pour un rendu bien pro.</p>



<p class="wp-block-paragraph">Pour le support, petit désavantage pour WordPress qui n'en propose pas (car c'est un outil libre, pas une entreprise). Mais il existe sur le web des milliers de forums et des dizaines de groupe d'entraide sur Facebook. Idem, vous aurez une multitude de tutos sur les blogs, Youtube, ... Bref, en cas de souci, on s'en sort toujours.</p>



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



<h3 class="wp-block-heading">Le coût</h3>



<p class="wp-block-paragraph">Impossible de ne pas comparer les coûts. Parce qu'en vrai, je sais que c'est un critère important et qu'il peut parfois être décisif.</p>



<p class="wp-block-paragraph">Comme disait ma mère : l'argent ne pousse pas sur le dos.</p>



<p class="wp-block-paragraph">Alors pour vous aider à faire le bon choix, voici un comparatif des coûts des différents outils pour créer son site sans coder.</p>



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



<h4 class="wp-block-heading">Combien coûte un site Wix ?</h4>



<p class="wp-block-paragraph">Commençons par une plateforme bien connue, qui déchaîne les passions, j'ai nommé : Wix.</p>



<p class="wp-block-paragraph">Wix n'existe pas en version gratuite.</p>



<p class="wp-block-paragraph">Les forfaits vont de 13,20€ à 178,80€ par mois à l'heure où j'écris ces lignes.</p>



<p class="wp-block-paragraph">Le forfait à 13,20€ par mois est TRÈS limité. Vous aurez peu d'espace de stockage (si vous avez des photos à mettre sur votre site, ça monte vite...), pas de suivi statistique et des fonctionnalités restreintes au minimum. En gros, vous pourrez mettre un formulaire de contact et c'est à peu près tout.</p>



<p class="wp-block-paragraph">C'est un peu ça le piège avec Wix, c'est que plus vous aurez besoin d'espace de stockage ou de fonctionnalités, plus ça vous coûtera.</p>



<p class="wp-block-paragraph">Si on prend le forfait qui me semble le minimum requis pour le site vitrine d'un·e indépendant·e ou d'une petite entreprise, on est déjà à 316,80€ par an.</p>



<p class="wp-block-paragraph">Et le truc avec Wix, c'est que vous êtes coincé·es. Votre site est hébergé sur leurs serveurs et vous ne pourrez pas l'exporter. Techniquement, votre site ne vous appartient pas, il appartient à Wix. Donc si Wix augmente ses prix, c'est soit vous payez, soit vous recommencez à 0 ailleurs.</p>



<p class="wp-block-paragraph">❇️ Retrouvez le <a href="https://fr.wix.com/premium-purchase-plan/dynamo" target="_blank" rel="noreferrer noopener">détail des tarifs de Wix</a></p>



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



<h4 class="wp-block-heading">Combien coûte un site fait avec Showit ?</h4>



<p class="wp-block-paragraph">Disons-le d'emblée, Showit est une plateforme onéreuse.</p>



<p class="wp-block-paragraph">Le 1er forfait est à 19$ par mois, et vous n'aurez même pas un blog à ce prix là.</p>



<p class="wp-block-paragraph">Et ici aussi, plus vous voudrez de fonctionnalités ou possibilités, plus il faudra payer.</p>



<p class="wp-block-paragraph">Par exemple, les forfaits limitent le nombre de visites sur votre site !</p>



<p class="wp-block-paragraph">Disons que vous souhaitez un site vitrine et un blog, Showit vous coûtera 288$ par an.</p>



<p class="wp-block-paragraph">Avec ce constructeur de site, vous serez un peu moins coincé·es qu'avec Wix. Par exemple, vous pourrez a priori avoir accès aux fichiers sources de votre site. Mais je ne suis même pas sure que vous puissiez les exporter.</p>



<p class="wp-block-paragraph">Là aussi, le site est hébergé sur les serveurs de Showit, donc vous payez presque 300$ par an, et votre site ne vous appartient pas vraiment. Vous serez 100% dépendant·es de Showit.</p>



<p class="wp-block-paragraph">❇️ Retrouvez le <a href="https://showit.com/pricing" target="_blank" rel="noreferrer noopener">détail des tarifs de Showit</a></p>



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



<h4 class="wp-block-heading">Combien coûte un abonnement Squarespace ?</h4>



<p class="wp-block-paragraph">Pour Squarespace, les forfaits vont de 15€ à 42€ par mois, ce qui en fait un outil moins cher que Wix ou Showit.</p>



<p class="wp-block-paragraph">Sur cette plateforme de création de sites internet, les tarifs évoluent surtout en fonction des outils ecommerce. Donc le forfait à 11€ peut a priori suffire pour un site vitrine.</p>



<p class="wp-block-paragraph">À noter que si vous souhaitez suivre les statistiques de votre site, il faudra basculer sur le forfait à 24€ par mois ou 204€ par an (souvent, les plateformes proposent une réduction si vous payez à l'année).</p>



<p class="wp-block-paragraph">Enfin, tout comme pour Wix et Showit, votre site sera hébergé sur les serveurs de Squarespace et vous resterez donc dépendant·e de la plateforme.</p>



<p class="wp-block-paragraph">❇️ Retrouvez le <a href="https://fr.squarespace.com/tarification?_gl=1*mfm21i*_up*MQ..*_gs*MQ..&amp;gclid=Cj0KCQiAwtu9BhC8ARIsAI9JHamnR_Tz0EwvVjr3xtudo0aSE-EyZG9HlLm2PmxuU6WBi4-F0_RGOREaAvKjEALw_wcB&amp;gclsrc=aw.ds" target="_blank" rel="noreferrer noopener">détail des tarifs Squarepace</a></p>



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



<h4 class="wp-block-heading">WordPress est-il vraiment gratuit ?</h4>



<p class="wp-block-paragraph">Vous avez peut-être déjà entendu dire que WordPress était un CMS (=Système de Management de Contenu) gratuit.</p>



<p class="wp-block-paragraph">Et c'est vrai. Mais ça ne veut pas pour autant dire que ça ne vous coûtera rien.</p>



<p class="wp-block-paragraph">Déjà, il faut distinguer WordPress.org de WordPress.com</p>



<p class="wp-block-paragraph">WordPress.com, c'est une entreprise qui propose un peu la même solution que les outils cités juste avant. Vous aurez un outil de création de site web qui vous coûtera en 4€ par mois et 25 000$ par an (ce n'est pas une faute de frappe) et où là encore, plus vous voulez de fonctionnalités, plus vous payez. Pour un truc qui ne vous appartient pas, qui est sur leurs serveurs, tout ça, tout ça.</p>



<p class="wp-block-paragraph">Mais moi, la plateforme dont je veux vraiment vous parler, c'est worpdress.org. Et ça, c'est gratuit.</p>



<p class="wp-block-paragraph">C'est même open source. Ça veut dire que c'est totalement transparent, libre et accessible à tout le monde. Et tout le monde peut en faire ce qu'iel veut.</p>



<p class="wp-block-paragraph">Donc oui, WordPress est gratuit.</p>



<p class="wp-block-paragraph">Mais il y a un mais.</p>



<p class="wp-block-paragraph">Depuis tout à l'heure, je vous dis qu'avec Wix, Squarespace ou Showit, votre site est sur leurs serveurs et ne vous appartient pas vraiment.</p>



<p class="wp-block-paragraph">Et bien si vous voulez utiliser WordPress.org, vous allez avoir besoin d'un serveur. D'un hébergeur. Et ça, ça se paye. Mais la bonne nouvelle, c'est que là, votre site vous appartient vraiment. Et si vous n'êtes plus satisfait·e de votre hébergeur, vous pouvez récupérer votre site et le mettre ailleurs.</p>



<p class="wp-block-paragraph">(si vous souhaitez comprendre un peu mieux comment ça marche, je vous conseille mon article sur l'<a href="https://template.entreprendre-ethique.fr/hebergement-web-ecologique/" rel="noopener">hébergement web responsable</a>)</p>



<p class="wp-block-paragraph">En moyenne, un hébergement + un nom de domaine (l'adresse de votre site), chez un fournisseur de qualité, ça coûte entre 5€ et 10€ par mois pour un·e freelance ou une petite entreprise.</p>



<p class="wp-block-paragraph">❇️ Personnellement, je vous conseille <a href="https://www.infomaniak.com/goto/fr/my-easy-site?utm_term=61731c9b47a85" target="_blank" rel="noreferrer noopener">ce forfait</a>* à 82€ TTC par an chez Infomaniak, un hébergeur éco-responsable</p>



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



<p class="wp-block-paragraph">Ce qui va aussi beaucoup jouer sur le tarif d'un site créé avec WordPress, ce sont les éventuels coûts supplémentaires. Ça peut-être :</p>



<ul class="wp-block-list">
<li>Le prix de la licence pour les constructeurs de site (on en parle plus bas)</li>



<li>Le prix de certaines extensions</li>



<li>Le prix de certains thèmes</li>
</ul>



<p class="wp-block-paragraph">Notez que ces coûts ne seront pas forcément nécessaires et qu'il est tout à fait possible de créer un site vitrine, et même e-commerce sur WordPress, en payant simplement son hébergement et son nom de domaine.</p>



<p class="wp-block-paragraph">Donc pour moi, WordPress reste la solution la plus avantageuse en termes de coût.</p>



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



<h3 class="wp-block-heading">L'éco-responsabilité</h3>



<p class="wp-block-paragraph">Ce comparatif s'appelle "Créer son site sans coder <strong>ET sans polluer</strong>", donc le critère de l'éco-responsabilité est bien sûr très important.</p>



<p class="wp-block-paragraph">Sur ce point, le constat est sans appel : l'avantage va à WordPress.</p>



<p class="wp-block-paragraph">Voici pourquoi :</p>



<ul class="wp-block-list">
<li>WordPress est le seul outil où vous pouvez choisir votre hébergeur. Ce choix représente de 30% à 100% de l'impact de votre site ! Ce critère devrait donc suffire à orienter votre choix si vous vous souciez de l'éthique de votre site web</li>



<li>Le code généré par WordPress est plus "propre". Je vous l'ai dit, vous pouvez créer votre site sans coder parce que les outils vont coder pour vous. Plus il y a de lignes de code, plus le site est lourd et polluant en gros. Sur ce point encore, WordPress l'emporte (même si ça dépend beaucoup du builder). En plus, ce critère est aussi important pour le SEO.</li>



<li>Avec WordPress, vous êtes sûr·e de garder la main. La durabilité d'un site web est très importante en éco-conception. Le site doit pouvoir suivre la vie de l'entreprise facilement. Pour évoluer ou même être supprimé s’il n'a plus lieu d'exister. Avec Wix, Showit ou Squarespace, vous n'êtes pas en contrôle de tout ça. Si le tarif augmente et que c'est trop pour vous, si une fonctionnalité n'existe pas, vous serez coincé·es...</li>
</ul>



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



<h3 class="wp-block-heading">Le récap'</h3>



<p class="wp-block-paragraph">Pour vous aider à comparer, voici un tableau récap' :</p>



<figure class="wp-block-table is-style-stripes has-small-font-size"><table class="has-background has-border-color has-fixed-layout" style="background-color:#f7f5f3;border-color:#360c44;border-width:1px"><thead><tr><th>Critères</th><th class="has-text-align-center" data-align="center">Wix</th><th class="has-text-align-center" data-align="center">Showit</th><th class="has-text-align-center" data-align="center">Squarespace</th><th class="has-text-align-center" data-align="center">wordpress.org</th></tr></thead><tbody><tr><td>💸 <strong>Coût</strong></td><td class="has-text-align-center" data-align="center">++</td><td class="has-text-align-center" data-align="center">+++</td><td class="has-text-align-center" data-align="center">++</td><td class="has-text-align-center" data-align="center">+</td></tr><tr><td>🧩 <strong>Votre site vous appartient ?</strong></td><td class="has-text-align-center" data-align="center">Non</td><td class="has-text-align-center" data-align="center">Non</td><td class="has-text-align-center" data-align="center">Non</td><td class="has-text-align-center" data-align="center">Oui</td></tr><tr><td>🌸 <strong>Prise en main</strong></td><td class="has-text-align-center" data-align="center">Classique</td><td class="has-text-align-center" data-align="center">Classique</td><td class="has-text-align-center" data-align="center">Classique</td><td class="has-text-align-center" data-align="center">Dépend du builder</td></tr><tr><td>🌈 <strong>Templates</strong></td><td class="has-text-align-center" data-align="center"></td><td class="has-text-align-center" data-align="center"></td><td class="has-text-align-center" data-align="center"></td><td class="has-text-align-center" data-align="center">Incalculable</td></tr><tr><td>💜 <strong>Support</strong></td><td class="has-text-align-center" data-align="center">Plus vous payez, mieux c'est</td><td class="has-text-align-center" data-align="center">Oui mais en anglais</td><td class="has-text-align-center" data-align="center">Oui</td><td class="has-text-align-center" data-align="center">Non (forum ou groupe d'entraide) sauf si votre builder en propose</td></tr><tr><td>🌱 <strong>Éco-responsabilité</strong></td><td class="has-text-align-center" data-align="center">Peu de marge de manoeuvre</td><td class="has-text-align-center" data-align="center">Peu de marge de manoeuvre</td><td class="has-text-align-center" data-align="center">Peu de marge de manoeuvre</td><td class="has-text-align-center" data-align="center">Possible avec les bonnes pratiques</td></tr></tbody></table></figure>



<p class="wp-block-paragraph">Je ne sais pas pour vous, mais pour moi, le choix est vite fait : c'est WordPress 💜</p>



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



<h2 class="wp-block-heading">Quid des outils no code alternatifs</h2>



<p class="wp-block-paragraph">Avant de vous livrer le comparatif final et le meilleur choix selon moi, je voulais vous parler des outils "alternatifs" pour créer son site sans coder.</p>



<p class="wp-block-paragraph">Je vois de plus en plus de personnes utiliser Canva et surtout Notion pour créer leur site internet.</p>



<p class="wp-block-paragraph">Alors qu'est-ce qu'on en pense ?</p>



<p class="wp-block-paragraph">D'un point de vue facilité de prise en main et coût, ces outils peuvent sembler être une excellente alternative. Mais pour un petit temps seulement... </p>



<p class="wp-block-paragraph">Déjà, parce qu'un site créé sur Notion ou Canva, ben ça se voit. Et c'est pas hyper pro. Mais ça dépanne au début donc pourquoi pas.</p>



<p class="wp-block-paragraph">Le truc, c'est que ces outils vont présenter les mêmes limites (voire pire) que Wix, Showit ou Squarespace : dépendance à la plateforme, fonctionnalités limitées, pas de possibilité de choisir son hébergeur...</p>



<p class="wp-block-paragraph">Donc si vous avez besoin d'une solution facile et rapide, pourquoi pas. Mais selon moi, ça doit rester temporaire car ce n'est pas durable. Dans tous les sens du terme.</p>



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



<h2 class="wp-block-heading">Et créer son site avec l'IA : bonne idée ?</h2>



<p class="wp-block-paragraph">L'intelligence artificielle est partout aujourd'hui, et on voit de plus en plus de solutions pour créer son site avec l'IA. Alors qu'est-ce qu'on en pense ?</p>



<p class="wp-block-paragraph">Honnêtement, je pense que c'est une mauvaise idée, surtout si vous êtes sensibles à l'éthique.</p>



<p class="wp-block-paragraph">Au-delà des problèmes globaux lié à l'entrainement et l'utilisation de l'IA, aujourd'hui, les intelligences artificielles ne crée pas du très bon code. Il n'est pas propre, pas optimisé, pas léger, pas accessible. Bref, tout ce qu'il ne faut pas faire en éco-conception web.</p>



<p class="wp-block-paragraph">Mais en plus de cet aspect là, le plus gros problème dans le fait de créer son site avec Claude ou un autre, c'est la dépendance. Vous ne maitrisez / ne comprenez pas le code que Claude écrit. Alors quand il faut modifier quelque chose, c'est toujours plus de prompt et de galère parfois pour se faire comprendre.</p>



<p class="wp-block-paragraph">Sans compter que le modèle économique actuel des IA n'est pas viable. Bientôt, elles vont augmenter leur prix, et votre site créé à l'IA vous coutera sur le long terme bien plus cher que si vous l'aviez déléguer à un·e humain·e.</p>



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



<h2 class="wp-block-heading">WordPress : le meilleur choix pour créer son site sans coder</h2>



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



<h3 class="wp-block-heading">Pourquoi choisir WordPress pour un site no code ?</h3>



<p class="wp-block-paragraph">Vous l'aurez compris, pour moi, le meilleur choix pour créer son site sans coder et sans polluer, c'est WordPress.</p>



<p class="wp-block-paragraph">En termes de coût, ce sera très souvent l'alternative la moins chère, même si vous devez payer des extensions pour certaines fonctionnalités. Et dans la majorité des cas, vous n'en aurez pas besoin.</p>



<p class="wp-block-paragraph">En termes de prise en main, même si ça peut paraître intimidant au début, on s'y fait vite. Et surtout, il existe tellement de tutoriels pour s'en sortir ! Avec les bons outils et les bonnes méthodes, créer un site avec WordPress, c'est facile.</p>



<p class="wp-block-paragraph">Et enfin, pour l'éco-conception web, WordPress est le meilleur choix en no code. C'est le seul avec lequel vous aurez assez la main pour vraiment optimiser les choses.</p>



<p class="wp-block-paragraph">D'ailleurs, si le référencement est important pour vous, WordPress devrait vous intéresser particulièrement. En effet, les bonnes pratiques de l'éco-conception web et les bonnes pratiques de référencement sont très similaires.</p>



<p class="wp-block-paragraph">❇️ Retrouvez sur le site de Green IT les <a href="https://ref.greenit.fr/wp/fiches/" target="_blank" rel="noreferrer noopener">bonnes pratiques pour éco-concevoir avec WordPress</a></p>



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



<h3 class="wp-block-heading">Quel builder choisir pour créer son site sans coder et sans polluer ?</h3>



<p class="wp-block-paragraph">L'un des critères les plus importants pour l'éco-conception avec WordPress, c'est le builder utilisé.</p>



<p class="wp-block-paragraph">Un builder, c'est un constructeur de site, qui va grandement faciliter la création du site sans coder. En gros, c'est ce qui va permettre de donner à WordPress une interface qui ressemble beaucoup aux interfaces de Wix, Squarespace ou Showit par exemple. De plus, les builders proposent pour la plupart de nombreux templates pour ne pas partir de zéro.</p>



<p class="wp-block-paragraph">Voici un rapide comparatif pour vous aider à faire le bon choix.</p>



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



<h4 class="wp-block-heading">Elementor / Divi</h4>



<p class="wp-block-paragraph"><a href="https://elementor.com/" target="_blank" rel="noreferrer noopener">Elementor</a> et <a href="https://www.elegantthemes.com/gallery/divi/" target="_blank" rel="noreferrer noopener">Divi</a> sont les deux builder les plus populaires sur WordPress.</p>



<p class="wp-block-paragraph">Ils permettent de faire énormément de choses très facilement, ce qui explique leur succès.</p>



<p class="wp-block-paragraph">Le problème, c'est qu'ils pèsent lourd dans leur installation et qu'ils génèrent beaucoup de code inutile. Alors il est possible de faire en sorte de "nettoyer" tout ça, mais ça reste quand même une solution moins efficace que les deux dont je vous parle juste après.</p>



<p class="wp-block-paragraph">Concernant le choix entre les deux, c'est difficile de trancher objectivement. Dans la communauté WordPress, il est "mieux vu" d'utiliser Elementor. Je pense que c'est dû au fait que pendant longtemps, Divi était moins efficace et très bugué. Mais ce n'est plus le cas depuis des années.</p>



<p class="wp-block-paragraph">Selon moi, les deux sont équivalents. Ma préférence va à Divi car je le trouve plus facile à utiliser et j'obtiens de meilleures performances techniques sur mes sites. Mais vous trouverez forcément quelqu'un pour vous dire le contraire 🤷🏻‍♀️</p>



<p class="wp-block-paragraph">💸 <strong>Tarifs Elementor</strong> : il existe une version gratuite mais limitée. Sinon c'est de 60€ par mois pour un site à 399€ par an pour 1000 sites.</p>



<p class="wp-block-paragraph">💸 <strong>Tarifs Divi</strong> : 89$ par an ou 249$ pour une licence à vie (pour un nombre de sites illimité)</p>



<p class="wp-block-paragraph"><strong>Bon à savoir</strong> : certains hébergeurs offrent la licence dans leurs offres. Par exemple, Infomaniak offre la licence Divi avec <a href="https://www.infomaniak.com/goto/fr/my-easy-site?utm_term=61731c9b47a85" target="_blank" rel="noreferrer noopener">son offre d'hébergement WordPress</a>*</p>



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



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



<p class="wp-block-paragraph"><a href="https://oxygenbuilder.com/" target="_blank" rel="noreferrer noopener">Oxygen</a> est un outsider qui gagnerait à être connu selon moi.</p>



<p class="wp-block-paragraph">Ce builder est léger et produit un code très propre. Les sites créés avec Oxygen obtiennent d'excellentes performances techniques et c'est donc un très bon choix pour l'éco-conception.</p>



<p class="wp-block-paragraph">En plus, il offre une liberté totale dans la construction du site, on peut vraiment faire tout ce qu'on veut, en respectant les règles du design web.</p>



<p class="wp-block-paragraph">Son inconvénient principal, il est un peu plus technique dans le vocabulaire employé, donc moins accessible aux débutant·es.</p>



<p class="wp-block-paragraph">Par exemple, pour centrer un élément, ce ne sera pas écrit "centré", mais plutôt "align-items" : center. Il utilise du langage CSS (un langage de "code") donc si vous n'en avez jamais entendu parler, ça peut être compliqué.</p>



<p class="wp-block-paragraph">Mais je me devais de le mentionner parce que si vous avez des notions de code ou si la courbe d'apprentissage ne vous fait pas peur, c'est une super alternative.</p>



<p class="wp-block-paragraph">💸 <strong>Tarifs Oxygen</strong> : de 129$ à 179$ pour une licence à vie (nombre de sites illimité)</p>



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



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



<p class="wp-block-paragraph">Gutenberg, c'est le builder par défaut de WordPress.</p>



<p class="wp-block-paragraph">Il a longtemps été très limité. Genre, on ne pouvait pas faire de colonnes ou changer la couleur de la police sans coder.</p>



<p class="wp-block-paragraph">Mais ces dernières années, ça a ÉNORMÉMENT changé. Aujourd'hui, il est tout à fait possible de créer un site digne de ce nom en utilisant Gutenberg et sans coder.</p>



<p class="wp-block-paragraph">Les équipes de WordPress ont clairement la volonté de poursuivre dans cette voie et de devenir une vraie alternative à Divi et Elementor. Et c'est une super nouvelle car Gutenberg est un constructeur léger et même recommandé par le Green IT pour l'éco-conception sur WordPress.</p>



<p class="wp-block-paragraph">Alors pour créer votre site sans coder et sans polluer, donnez une chance à Gutenberg avant de vous ruer sur Elementor !</p>



<p class="wp-block-paragraph">💸 <strong>Tarifs Gutenberg</strong> : gratuit !</p>



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



<p class="wp-block-paragraph">C'est la fin de ce long comparatif. Le résultat est très clair. <strong>Pour créer son site sans coder, le meilleur outil est WordPress, avec le builder natif Gutenberg</strong>. Si vous être un profil un peu plus technique et que vous souhaitez plus de flexibilité, Oxygen sera une bonne alternative également. Mais une chose est sûre : Wix, Squarespace ou Showit sont à bannir.</p>



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



<p class="wp-block-paragraph"><em>*Les liens marqués d'une étoile sont des liens affiliés. Je touche une commission si vous achetez via ce lien. Ça ne vous coûte pas plus cher et je ne recommande que des produits et services testés et approuvés.</em></p>
]]></content:encoded>
					
					<wfw:commentRss>https://steffilala.fr/creer-site-sans-coder/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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">Enfin plutôt une principale : vérifier le <strong>contraste</strong> de vos couleurs !</p>



<p class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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-794e3cfa 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 class="wp-block-paragraph">Alors comment savoir me direz-vous ?</p>



<p class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph"><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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">🌱 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. Vous souhaitez créer un site web éco-responsable et vérifier que vos efforts ont porté leurs fruits ? L'ecoindex vous permet de mesurer l'impact environnemental d'une page web et de voir rapidement [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">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>. Vous souhaitez <a href="https://steffilala.fr/site-web-ecologique/" data-type="post" data-id="31949">créer un site web éco-responsable</a> et vérifier que vos efforts ont porté leurs fruits ? L'ecoindex vous permet de mesurer l'impact environnemental d'une page web et de voir rapidement ce qui peut être encore optimisé. Avec 3 niveaux d'utilisation (du plus facile au plus avancé), c'est selon moi un outil incontournable en éco-conception web. Découvrez comment l'utiliser dans cet article.</p>



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



<p class="wp-block-paragraph"><strong>SOMMAIRE</strong></p>



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



<p class="wp-block-paragraph"><a href="http://utilisation">Comment utiliser l'ecoindex ?</a></p>



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



<p class="wp-block-paragraph"><a href="#amelioration">Comment améliorer l'ecoindex de son site ?</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 class="wp-block-paragraph">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://rweb.greenit.fr/" target="_blank" data-type="link" data-id="https://rweb.greenit.fr/" 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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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>



<p class="wp-block-paragraph">P.S. : Vous ignoriez qu'un site pouvait polluer ? Découvrez par ici <a href="https://steffilala.fr/impact-environnemental-site-internet/" data-type="post" data-id="226">quel est l'impact environnemental d'un site internet</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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">Ç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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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="amelioration">Comment améliorer l'ecoindex de son site ?</h2>



<p class="wp-block-paragraph">Une fois que vous avez votre note, vous vous demanderez peut-être comment faire encore mieux ?</p>



<p class="wp-block-paragraph">Voici donc l'explication de chaque critère et des idées d'actions simples pour optimiser votre site.</p>



<p class="wp-block-paragraph">P.S. : si vous utilisez l'extension Green IT, les recommandations à suivre sont directement dans le résultat, comme vu plus haut.</p>



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



<h3 class="wp-block-heading">Poids de la page</h3>



<p class="wp-block-paragraph">Ce critère est probablement le plus facile à comprendre, c'est tout simplement combien pèse votre page en Mega octets. Pour baisser le poids d'une page, vous pouvez :</p>



<ul class="wp-block-list">
<li><strong>Optimiser la taille de vos images</strong> : pas besoin d'une image de 1000 x 1000 px si elle est en tout petit sur la page. Redimensionnez vos images de façon cohérente par rapport à leur utilisation pour améliorer votre ecoindex</li>



<li><strong>Optimiser le poids de vos images</strong> : pour cela, le redimensionnement aidera, mais vous pouvez aussi les compresser (soit à l'exportation avec des outils comme Illustrator ou Photoshop, soit après exportation avec des outils externes comme <a href="https://tinypng.com/" target="_blank" data-type="link" data-id="https://tinypng.com/" rel="noreferrer noopener">tinypng</a>)</li>



<li><strong>Utiliser le format webP ou svg pour vos images</strong> : plus léger encore que le jpeg. Le svg est particulièrement adapté pour votre logo ou vos icônes par exemple</li>



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



<li><strong>Utiliser un cache et compresser votre code</strong> (à l'aide d'une extension comme WP Fastest Cache par exemple)</li>



<li><strong>Éviter d'ajouter trop d'images</strong> pour le design de votre page web, et <strong>préférer les effets en css</strong></li>
</ul>



<p class="wp-block-paragraph"> (d'aiP.S. : Retrouvez par ici <a href="https://steffilala.fr/webdesign-eco-responsable/" data-type="post" data-id="31884">mes meilleurs conseils pour un webdesign éco-responsable</a></p>



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



<h3 class="wp-block-heading">Complexité de la page</h3>



<p class="wp-block-paragraph">Ce critère est basé sur le nombre d'élément dans le <strong>DOM</strong>. Qu'est-ce que le DOM me direz-vous ? C'est un peu le squelette de votre page, sa structure. Chaque fois que vous ajoutez un élément (section, bloc, image, texte, espacement, formulaire, petite décoration, ...), le DOM grossit.</p>



<p class="wp-block-paragraph">Pour baisser le nombre d'éléments du DOM, vous pouvez :</p>



<ul class="wp-block-list">
<li><strong>Faire du tri</strong> dans votre <strong>contenu</strong> et vos <strong>fonctionnalités</strong></li>



<li>Vous assurez qu'il n'y a pas trop d'info sur une seule page</li>



<li><strong>Éviter les carrousels</strong> ou les modules de <strong>scroll infini</strong> qui ajoute beauuuuucoup d'éléments sur une seule page</li>



<li><strong>Pensez votre page d'abord sur mobile</strong>, ça évite d'ajouter trop de trucs inutiles</li>
</ul>



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



<h3 class="wp-block-heading">Nombre de requêtes</h3>



<p class="wp-block-paragraph">Quand quelqu’un visite votre site, son navigateur (par exemple Google Chrome, Firefox, Safari, ...) “discute” en permanence avec le serveur qui héberge vos pages (d'ailleurs, pensez à choisir un <a href="https://steffilala.fr/hebergement-web-ecologique/" data-type="post" data-id="29662">hébergeur éco-responsable</a>). À chaque fois qu’il doit aller chercher une information ou un fichier (une image, une police, un script, une vidéo, un bouton de partage, un plugin de statistiques…), il envoie une <strong>requête</strong>.</p>



<p class="wp-block-paragraph">On peut imaginer ça comme une série d’allers-retours : plus votre site demande de ressources différentes, plus il multiplie les trajets. Résultat : la page met souvent plus de temps à charger, consomme davantage de ressources et obtient généralement un moins bon score sur l’outil Ecoindex. </p>



<p class="wp-block-paragraph">Pour limiter le nombre de requêtes sur un site WordPress, vous pouvez :</p>



<ul class="wp-block-list">
<li>Réduire le nombre de plugins</li>



<li>Compresser et redimensionner les images avant de les importer (oui, encore ça)</li>



<li>Limiter les polices personnalisées et leurs variantes</li>



<li>Éviter les vidéos ou widgets intégrés inutiles (encore aussi)</li>



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



<p class="wp-block-paragraph">Bref, vous voyez que les bonnes pratiques se ressemblent et peuvent impacter votre score ecoindex, mais surtout, l'impact environnement de votre site.</p>



<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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">Le deuxième truc que je trouve plutôt cool, c'est que l'outil est très complet.</p>



<p class="wp-block-paragraph">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 class="wp-block-paragraph">Il existe aussi un badge ecoindex à afficher sur son site pour faire preuve de transparence et sensibiliser ses visiteurices.</p>



<p class="wp-block-paragraph">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 class="wp-block-paragraph">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 ! Mais attention, les outils restent des outils. N'oubliez pas de prendre en compte le contexte dans votre démarche, et aussi l'impact sociétal, en optant par exemple pour des <a href="https://steffilala.fr/eco-couleurs-web/" data-type="post" data-id="222">éco-couleurs web</a> (ça n'améliorera pas votre ecoindex, mais c'est important pour l'accessibilité !)</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
]]></content:encoded>
					
					<wfw:commentRss>https://steffilala.fr/eco-index/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Comment choisir un thème WordPress ?</title>
		<link>https://steffilala.fr/template-wordpress-comment-choisir/</link>
					<comments>https://steffilala.fr/template-wordpress-comment-choisir/#respond</comments>
		
		<dc:creator><![CDATA[Steffi]]></dc:creator>
		<pubDate>Thu, 05 Oct 2023 04:30:00 +0000</pubDate>
				<category><![CDATA[Création de site]]></category>
		<guid isPermaLink="false">https://entreprendre-ethique.fr/?p=31328</guid>

					<description><![CDATA[Comment choisir un thème WordPress parmi la multitude d'options proposées ? Si vous êtes en phase de réflexion pour la création de votre site et que vous avez envisagé WordPress, vous vous êtes forcément posé cette question... Et je vous comprends ! Gratuit ou payant, répertoire officiel ou site externe, compatible avec Gutenberg ou constructeur [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph"><strong>Comment choisir un thème WordPress</strong> parmi la multitude d'options proposées ? Si vous êtes en phase de réflexion pour la <strong>création de votre site</strong> et que vous avez envisagé WordPress, vous vous êtes forcément posé cette question... Et je vous comprends ! <strong>Gratuit ou payant</strong>, <strong>répertoire officiel</strong> ou site externe, compatible avec <strong>Gutenberg</strong> ou constructeur de site... On peut vite être perdu·e ! Mais pas de panique, je vous explique tout dans cet article !</p>



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



<h2 class="wp-block-heading">Qu’est-ce qu’un thème WordPress ?</h2>



<h3 class="wp-block-heading">Les thèmes du catalogue officiel</h3>



<p class="wp-block-paragraph">Avant toute chose, <strong>qu’est-ce qu’un thème WordPress ?</strong></p>



<p class="wp-block-paragraph">On les appelle aussi <strong>template</strong>, et ce sont tout simplement des modèles, des <strong>structures de sites web</strong> prêts à l’emploi.</p>



<p class="wp-block-paragraph">Il en existe des milliers, ce qui peut rendre le choix difficile. Généralement, on connaît les thèmes WordPress du catalogue officiel (<em>celui qui est présent dans le menu Apparence -> Thèmes de WordPress</em>), mais on peut aussi en acheter sur des plateformes externes comme <a href="https://themeforest.net/" target="_blank" rel="noreferrer noopener">ThemeForest</a> ou <a href="https://creativemarket.com/templates-themes/website-app/wordpress" target="_blank" rel="noreferrer noopener">Creative Market</a>.</p>



<p class="wp-block-paragraph">Ces thèmes WordPress là vont généralement principalement définir l’apparence du header (<em>en-tête du site</em>) et du footer (<em>pied de page du site</em>). Mais selon les thèmes, ça peut agir sur d’autres éléments. C’est là aussi la difficulté : avant de l’installer, difficile de savoir. Généralement, les images de présentation de ces thèmes sont des sites qui ont été modifiés à l’aide de code, et si vous installez le thème sur votre site, vous n’aurez pas du tout le même résultat !</p>



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



<h3 class="wp-block-heading">Les templates WordPress des constructeurs de site</h3>



<p class="wp-block-paragraph">Mais il existe une autre catégorie de templates WordPress : ceux des constructeurs de site. Les plus connus sont Elementor et Divi, et ce sont des thèmes et/ou des extensions qui permettent de bénéficier d’un constructeur de page trèèès facile à prendre en main, qui fonctionne un peu comme Canva.</p>



<p class="wp-block-paragraph">Plus du tout besoin de savoir coder pour personnaliser l’apparence des pages ! (D'ailleurs, j'ai également écrit un article qui compare les outils pour <a href="https://steffilala.fr/creer-site-sans-coder/" data-type="post" data-id="221">créer son site sans coder ni polluer</a>)</p>



<p class="wp-block-paragraph">Et ces constructeurs de site proposent également des templates ! Là aussi, il y a le catalogue officiel, mais d’autres templates sont disponibles à l’achat sur certains sites.</p>



<p class="wp-block-paragraph">Le gros avantage, c’est que pour ce genre de templates WordPress, ce que vous voyez sur l’image de présentation est vraiment ce que vous obtiendrez sur votre site.</p>



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



<h2 class="wp-block-heading">Pourquoi utiliser un template wordpress pour mon site ?</h2>



<p class="wp-block-paragraph">Quand on crée un site sur WordPress, on est obligé·es d’utiliser un thème. C'est pour ça que vous allez forcément vous demandez à un moment : comment choisir un thème WordPress en fait ?</p>



<p class="wp-block-paragraph">On peut opter pour un thème très simple, et coder le site de A à Z. Ça fonctionne, si on sait le faire !</p>



<p class="wp-block-paragraph">Mais si la création de site web n’est pas notre métier, utiliser un bon template présente de noooombreux avantages. Entre autres :</p>



<ul class="wp-block-list">
<li><strong>Gagner du temps</strong> : la structure est faite, il n’y a qu’à remplir et personnaliser.</li>



<li><strong>Avoir un site bien pensé</strong> : la création de sites web, ce n’est pas que de la technique. C’est aussi et surtout, définir une stratégie pour que le site apporte les résultats qu’on en espère. En optant pour un bon template WordPress, vous optez pour un site qui a été pensé de façon stratégique par une personne dont c’est le métier.</li>



<li><strong>Avoir un site esthétique</strong> : c’est souvent pour ça qu’on choisit un thème. Parce qu’on veut un beau site. La majorité des templates WordPress sont créés par des webdesigners et webdesigneuses professionnel·les. C’est donc l’assurance d’avoir un design agréable, cohérent et adapté au web.</li>
</ul>



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



<h2 class="wp-block-heading">Comment choisir un thème WordPress ?</h2>



<p class="wp-block-paragraph">Alors maintenant, <strong>comment choisir un thème WordPress</strong> parmi la muuuultitude de choix possibles ?</p>



<p class="wp-block-paragraph">Voici selon moi les critères les plus importants :</p>



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



<h3 class="wp-block-heading">La plateforme sur laquelle le template a été créé</h3>



<p class="wp-block-paragraph">Critères n°1 pour moi : avec quoi le template a-t-il été créé ?</p>



<p class="wp-block-paragraph">C’est extrêmement important parce que c’est ce que vous allez devoir utiliser pour créer et modifier votre site tout au long de sa vie. Si c’est trop compliqué ou pas adapté, vous risquez de laisser votre site à l’abandon ou presque, parce que chaque fois qu’il faudra y toucher, vous aurez peur d’y passer trop de temps ou de tout casser… Résultat, vous allez procrastiner et votre site ne servira pas votre entreprise comme il le devrait…</p>



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



<h3 class="wp-block-heading">Le niveau de support / explications</h3>



<p class="wp-block-paragraph">Avoir un beau template WordPress, c’est bien. Mais si vous ne savez pas comment l’installer, le modifier et le personnaliser, ça ne sert à rien…</p>



<p class="wp-block-paragraph">Aussi, en fonction de vos compétences, regardez bien la documentation qui est fournie avec le template. Si vous n’avez jamais créé de site ou utilisé le constructeur de site du template, c’est d’autant plus important !</p>



<p class="wp-block-paragraph">Idem pour le support. Qu’est-ce qu’il se passe si jamais vous rencontrez un problème ? Si vous n’arrivez pas à faire quelque chose ? Allez-vous être bloqué·e ? Ou est-ce que quelqu’un sera disponible pour vous aider ?</p>



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



<h3 class="wp-block-heading">Les pages présentes</h3>



<p class="wp-block-paragraph">3e critère que l’on peut regarder, quelles pages sont disponibles dans le template ?</p>



<p class="wp-block-paragraph">Est-ce que c’est un template qui donnera simplement l’apparence de l’en-tête et du pied de page ? Dans ce cas, il n’y aura généralement pas de modèle de page, donc là pas de question à se poser, il faudra tout construire vous-même.</p>



<p class="wp-block-paragraph">Mais pour les templates Divi ou Elementor par exemple, vous aurez différentes pages disponibles selon le modèle. Alors bien sûr, ce sera difficile de trouver le template qui correspond exactement à vos besoins. Mais ne perdons pas de vue l’objectif : ne pas passer 4528 heures sur la création de son site ! Donc au plus les pages présentes correspondront à ce dont vous avez besoin, au plus facile et rapide ce sera ! Par exemple, si vous voulez créer un site avec une partie e-commerce, mais que dans le template qui vous fait de l’oeil il n’y a pas de page boutique, produit ou panier, ça veut dire que vous devrez les construire avec vos petites mimines…</p>



<p class="wp-block-paragraph">🌸 Pour ma part, je propose de la <a href="https://steffilala.fr/site-web/site-internet-petit-budget/" data-type="page" data-id="31986">création de site à partir d'un template</a> pensé pour votre activité ! Vous êtes donc assurée d'avoir les pages et sections dont vous avez besoin pour un site qui vous amène des client·es !</p>



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



<h3 class="wp-block-heading">La structure des pages :</h3>



<p class="wp-block-paragraph">Dans la même idée, il est important de regarder la structure des pages en elles-mêmes. Comment elles sont construites ? Quelles sont les sections, les mises en pages ? Et est-ce que ça correspond à peu près à ce que vous souhaitez ? Est-ce que ce sera facile de l’adapter à votre contenu.</p>



<p class="wp-block-paragraph">Encore une fois, l’un des intérêts d’utiliser un template WordPress, c’est de gagner du temps ! Alors si vous choisissez un truc où il vous faudra à chaque page réinventer la poudre pour que ça s’adapte à votre site, on perd l’intérêt… Et vous risquez franchement de vous arracher les cheveux !</p>



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



<h3 class="wp-block-heading">L’esthétique :</h3>



<p class="wp-block-paragraph">Et enfin dernier critère, l’esthétique.</p>



<p class="wp-block-paragraph">Et je le mets volontairement en dernier parce que pour moi, c’est vraiment le dernier des critères.</p>



<p class="wp-block-paragraph">C’est une erreur que je vois trop souvent quand les personnes choisissent un thème WordPress : tout miser sur l’esthétique.</p>



<p class="wp-block-paragraph">Et je ne blâme personne ! Moi-même, la première fois que j’ai choisi un thème WordPress, j’ai pris celui que je trouvais le plus beau. Je l’ai installé et là, mon site ne ressemblait pas du tout aux images. Ben oui, pour obtenir le même résultat que sur les photos, il fallait coder. Et moi je savais pas coder. Donc j’ai perdu mon temps. Et j’aurais pu perdre mon argent si j’avais payé pour ce thème.</p>



<p class="wp-block-paragraph">N’oubliez pas qu’avant d’être beau, un site doit surtout être utile et pertinent.</p>



<p class="wp-block-paragraph">Combien de fois je vois des sites magnifiques, mais sur lesquels je ne trouve pas l’info que je cherche… Ou bien où il y a plein de bug… Ou encore des sites pas pratiques, trop compliqué… Clairement, ça ne donne pas envie d’aller plus loin.</p>



<p class="wp-block-paragraph">Donc un site beau, mais inutile, c’est contre-productif.</p>



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



<h2 class="wp-block-heading">Bonus : optez pour un template WordPress éco-responsable !</h2>



<p class="wp-block-paragraph">Maintenant imaginez qu’à ces critères, vous en rajoutiez un important pour vous : le fait que le template WordPress soit éco-conçu. Qu’il soit pensé pour minimiser l’impact environnemental de votre site.</p>



<p class="wp-block-paragraph">Très clairement, l’offre sera limitée. Aujourd’hui, pour avoir un site éco-conçu, c’est soit on sait faire soi-même, soit on délègue si on a un budget conséquent.</p>



<p class="wp-block-paragraph">J’ai donc décidé de remédier à ça, en créant une offre d’entre deux : <a href="https://steffilala.fr/site-web/site-internet-petit-budget/" data-type="page" data-id="31986">des sites éco-conçus petit budget</a>, créé à partir des mes templates WordPress éco-responsables.</p>



<p class="wp-block-paragraph">J'ai pensé les templates en fonction du type d'activité (accompagnant·e, entrepreneuses créatives, ...) pour qu'il corresponde parfaitement à vos besoins et que vous puissiez avoir un site rapidement, sans lésiner sur la qualité ni renoncer à l'esthétique.</p>



<p class="wp-block-paragraph">Si vous souhaitez en savoir +, parlons-en lors d'un <a href="https://cal.com/steffilala/appel-decouverte" target="_blank" rel="noreferrer noopener">café-rencontre gratuit</a> en visio de 30 minutes.</p>



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



<p class="wp-block-paragraph">Voilà, vous savez maintenant comment choisir un thème WordPress. Clairement, ce choix est déterminant pour la suite de votre projet de site web, car c’est ça qui déterminera la facilité et la rapidité de la construction de votre site ! Mais aussi sa pertinence et son utilité à la fin. Alors faites-le bon choix (et j'espère vous avoir aider dans cette quête !)</p>



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



<p class="has-text-align-right wp-block-paragraph"><em>Article mis à jour le 7 Octobre 2026</em></p>
]]></content:encoded>
					
					<wfw:commentRss>https://steffilala.fr/template-wordpress-comment-choisir/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Les 8 étapes de création d&#039;un site web</title>
		<link>https://steffilala.fr/etapes-creation-site-web/</link>
					<comments>https://steffilala.fr/etapes-creation-site-web/#respond</comments>
		
		<dc:creator><![CDATA[Steffi]]></dc:creator>
		<pubDate>Thu, 07 Sep 2023 04:30:00 +0000</pubDate>
				<category><![CDATA[Création de site]]></category>
		<guid isPermaLink="false">https://entreprendre-ethique.fr/?p=31302</guid>

					<description><![CDATA[On imagine souvent la création d'un site internet comme une énorme montagne difficile à franchir. On se dit que ça va nous prendre beaucoup de temps, d'énergie, et d'argent. Mais en réalité, le secret c'est d'avoir la bonne méthode. Découper la montagne, y aller pas à pas. Découvrez les étapes de création d'un site web, [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">On imagine souvent la <strong>création d'un site internet</strong> comme une énorme montagne difficile à franchir. On se dit que ça va nous prendre beaucoup de temps, d'énergie, et d'argent. Mais en réalité, le secret c'est d'avoir <strong>la bonne méthode</strong>. Découper la montagne, y aller pas à pas. Découvrez <strong>les étapes de création d'un site web</strong>, pour enfin cocher cette case qui traîne dans votre to-do depuis des mois !</p>



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



<h2 class="wp-block-heading">La préparation : la plus importante des étapes de création d'un site web</h2>



<p class="wp-block-paragraph">Quand on imagine les étapes de création d'un site web, la majorité des personnes se trompent.</p>



<p class="wp-block-paragraph">On imagine que ça ressemble à ça : </p>



<ul class="wp-block-list">
<li>Trouver le meilleur outil pour créer un site</li>



<li>Créer les pages et le contenu</li>



<li>Essayer de rendre tout ça beau et pro</li>
</ul>



<p class="wp-block-paragraph">Sauf que c’est le meilleur moyen d’y passer 10 plombes pour un résultat bof.</p>



<p class="wp-block-paragraph">La création d’un site, ça se prépare :</p>



<ul class="wp-block-list">
<li>Pour <strong>gagner du temps</strong></li>



<li>Pour <strong>un site qui convertit</strong> les visiteurices en potentielle clientèle</li>



<li>Et qui n’a pas l’air d’avoir été fait par votre sœur de 12 ans</li>
</ul>



<p class="wp-block-paragraph">C'est même selon moi l'étape la plus importante !</p>



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



<h3 class="wp-block-heading">Étape 1 : poser les bases</h3>



<p class="wp-block-paragraph">La première chose à déterminer, c'est de savoir si votre entreprise a des bases assez solides pour créer votre site. Parce que moins vous serez au clair sur vos fondations, plus ce sera compliqué.</p>



<p class="wp-block-paragraph">Parfois, créer un site dès le lancement de son activité n'est pas forcément la meilleure des idées. En effet, pour pouvoir suivre les autres étapes de création d'un site web, il faut être un minimum au clair sur ces points :</p>



<ul class="wp-block-list">
<li>Votre entreprise : activité, valeurs, mission...</li>



<li>Votre clientèle cible : qui est-elle ? Quelles sont ses problématiques ? Ses frustrations, ses désirs, ses valeurs, ses attentes, ...</li>



<li>Votre offre : et oui, ça peut paraître bête, mais il faut que vos offres soient déjà définies : contenu, prix, modalités,...</li>
</ul>



<p class="wp-block-paragraph">Attention, ces éléments ne sont pas forcément gravés dans le marbre et peuvent être amenés à évoluer bien sûr. Mais si vous n'êtes pas au clair sur ces sujets, il est peut-être plus judicieux d'y passer du temps avant de penser à votre site.</p>



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



<h3 class="wp-block-heading">Étape 2 : définir le contenu</h3>



<p class="wp-block-paragraph">La deuxième étape, ça va être de définir le contenu de votre site : qu'est-ce qu'on va y trouver ?</p>



<p class="wp-block-paragraph">Généralement, les gens auront tendance à partir de leurs propres besoins. Mais n'oubliez pas que votre site, il doit vous servir vous, certes, mais aussi et surtout votre potentielle clientèle ! N'oubliez donc pas de vous mettre à sa place, et de vous demander de quoi elle aurait besoin.</p>



<p class="wp-block-paragraph">Dans cette étape, on aurait aussi tendance à mettre le plus de choses possibles sur le site, "au cas où". C'est une mauvaise idée, d'autant plus si vous souhaitez vous inscrire dans une démarche d'<strong><a href="https://steffilala.fr/site-web-ecologique/" data-type="post" data-id="31949">éco-conception web</a></strong>.</p>



<p class="wp-block-paragraph">En effet, l'idée, c'est de mettre sur son site uniquement ce qui sera pertinent et utile (<em>vraiment utile</em>) pour les utilisateurices. Cela va permettre d’alléger le site (<em>et donc qu'il soit moins polluant</em>), mais aussi de le rendre plus pertinent et efficace car il ne sera pas inondé d’informations inutiles.</p>



<p class="wp-block-paragraph">Pour chaque chose que vous souhaitez mettre sur votre site, posez-vous bien la question de l'utilité et la pertinence.</p>



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



<h2 class="wp-block-heading">La conception du site</h2>



<h3 class="wp-block-heading">Étape 3 : la navigation</h3>



<p class="wp-block-paragraph">La troisième des étapes de création d'un site web, c'est imaginer la navigation. C'est-à-dire, comment les personnes vont aller d'une page à une autre, comme iels vont accéder à telle ou telle informations ou fonctionnalités.</p>



<p class="wp-block-paragraph">C’est une étape très importante parce qu’elle va déterminer la facilité de navigation sur votre site. Le but est que les choses soient les plus logiques possibles, pour que la personne qui visite le site trouve ce qu’elle cherche facilement et rapidement.</p>



<p class="wp-block-paragraph">La compétence n°1 requise pour cette étape : le bon sens !</p>



<p class="wp-block-paragraph">Si vous le souhaitez, j'ai un article entier dédié à <a href="https://steffilala.fr/arborescence-site-web/" data-type="post" data-id="30572">la création de l'arborescence d'un site web</a>.</p>



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



<h3 class="wp-block-heading">Étape 4 : l'apparence du site (identité + maquette)</h3>



<p class="wp-block-paragraph">On arrive à la moitié des étapes de création d'un site web et vous voyez que pour l'instant, on n'a toujours pas parlé outil ou technique !</p>



<p class="wp-block-paragraph">Maintenant que vous savez ce que vous allez mettre sur votre site et comment le contenu sera organisé, vous avez fait le plus important.</p>



<p class="wp-block-paragraph">Maintenant, si le fond est essentiel, il est vrai que la forme compte également. C'est donc le moment de penser à l'identité visuelle de votre site. Quelles couleurs allez-vous utiliser ? Quelles polices de caractère ? Quel univers visuel ?</p>



<p class="wp-block-paragraph">Pour déterminer cela, il est important de revenir aux valeurs et à la mission de votre entreprise. Il faut que votre identité visuelle soit en cohérence avec ce que vous voulez dégager.</p>



<p class="wp-block-paragraph">Bien sûr, si vous avez déjà une identité pour votre entreprise, elle doit être reprise sur votre site web.</p>



<p class="wp-block-paragraph">Pour éviter de perdre du temps, mon conseil est de mettre en forme vos pages d'abord sur une maquette.</p>



<p class="wp-block-paragraph">C'est plus facile à créer et modifier qu'un site web déjà construit, et ça vous permettra de gagner du temps dans la prochaine étape de création de votre site web : la fabrication.</p>



<p class="wp-block-paragraph">Là aussi, j'ai un article dédié à <a href="https://steffilala.fr/maquette-site-web/" data-type="post" data-id="223">la maquette d'un site web</a>.</p>



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



<h2 class="wp-block-heading">La fabrication : la dernière des étapes de création d'un site web !</h2>



<h3 class="wp-block-heading">Étape 6 : le choix des outils</h3>



<p class="wp-block-paragraph">Le choix des outils est souvent le 1er truc auquel on pense quand on réfléchit aux étapes de création d'un site web. Pourtant, pour savoir quel est le meilleur outil, vous devez connaître exactement ce que vous allez devoir faire avec !</p>



<p class="wp-block-paragraph">C'est pour cela que le choix de l'outil n'arrive que maintenant, une fois qu'on sait exactement à quoi ressemblera le site et ce qu'il contiendra.</p>



<p class="wp-block-paragraph">Ce sont vos besoins qui doivent déterminer l'outil et non l'inverse. Rien de plus frustrant que de se retrouver bloqué·e dans son développement à cause d'un outil, donc autant bien choisir. D'autant plus que si les migrations restent toujours possibles, c'est beaucoup plus simple si on choisit bien dès le départ.</p>



<p class="wp-block-paragraph">Par exemple, il n'est pas possible de migrer un site de Wix vers WordPress, il faudra tout recopier manuellement...</p>



<p class="wp-block-paragraph">Personnellement, ma préférence va à <a href="https://fr.wordpress.org/" target="_blank" rel="noreferrer noopener">WordPress.org</a> car :</p>



<ul class="wp-block-list">
<li>C'est gratuit</li>



<li>C'est ultra flexible</li>



<li>C'est facile de le prendre en main, même quand on n'est pas pro, si on utilise les bons thèmes et extensions</li>



<li>Contrairement à beaucoup d'autres outils, votre site vous appartient à 100%</li>



<li>Il est possible d'agir sur pas mal d'aspects pour réduire l'impact environnemental de votre site</li>
</ul>



<p class="wp-block-paragraph">Si vous souhaitez approfondir cette question, j'ai créé un comparatif des <a href="https://steffilala.fr/creer-site-sans-coder/" data-type="post" data-id="221">outils pour créer son site sans coder et sans polluer</a> !</p>



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



<h3 class="wp-block-heading">Étape 7 : l'intégration</h3>



<p class="wp-block-paragraph">Et ce n'est que maintenant que vous allez enfin pouvoir créer votre site, pour de vrai.</p>



<p class="wp-block-paragraph">C'est ce qu'on appelle l'intégration. Et grâce à toutes les étapes de création d'un site web que vous avez suivi jusqu'à maintenant, ça devrait être plutôt facile et rapide !</p>



<p class="wp-block-paragraph">Plus de tâtonnements, vous savez exactement ce que vous devez construire, vous avez des plans à suivre, et ça facilite grandement la tâche !</p>



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



<h3 class="wp-block-heading">Étape 8 : sécurité et conformité</h3>



<p class="wp-block-paragraph">Enfin, la dernière étape, mais extrêmement importante, c'est celle de vous assurez de la sécurité et de la conformité de votre site !</p>



<p class="wp-block-paragraph">Côté sécurité, quelques bases :</p>



<ul class="wp-block-list">
<li>Installez un certificat SSL sur votre nom de domaine (<em>pour avoir un site en https et le petit cadenas à côté de l'adresse</em>)</li>



<li>Pensez à vous protéger des tentatives de piratages (ce n'est pas un mythe !) et du spam</li>
</ul>



<p class="wp-block-paragraph">Pour la conformité, avoir un site engendre quelques responsabilités. Vous pourrez en apprendre davantage dans ces deux articles :</p>



<ul class="wp-block-list">
<li><a href="https://steffilala.fr/mentions-legales-site-internet/" target="_blank" rel="noreferrer noopener">Les mentions légales sur un site web</a></li>



<li><a href="https://steffilala.fr/rgpd/" target="_blank" rel="noreferrer noopener">RGPD : comprendre et appliquer facilement</a></li>
</ul>



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



<p class="wp-block-paragraph">Et voilà <strong>toutes les étapes de création d'un site web</strong> ! Ça peut toujours vous paraître beaucoup de travail, et ça l'est effectivement. Mais le fait de suivre cette méthode pas à pas vous facilitera grandement la vie, vous permettra de gagner du temps et surtout, vous assurera d'avoir un site pertinent et utile pour votre audience et votre entreprise.</p>



<p class="has-text-align-right wp-block-paragraph"><em>Article mis à jour le 17 Octobre 2026</em></p>
]]></content:encoded>
					
					<wfw:commentRss>https://steffilala.fr/etapes-creation-site-web/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Mentions légales d&#039;un site internet : guide et exemple</title>
		<link>https://steffilala.fr/mentions-legales-site-internet/</link>
					<comments>https://steffilala.fr/mentions-legales-site-internet/#respond</comments>
		
		<dc:creator><![CDATA[Steffi]]></dc:creator>
		<pubDate>Thu, 24 Aug 2023 04:30:00 +0000</pubDate>
				<category><![CDATA[Création de site]]></category>
		<guid isPermaLink="false">https://entreprendre-ethique.fr/?p=31251</guid>

					<description><![CDATA[Que vous soyez pro ou non, vous devez afficher un certain nombre de mentions légales sur votre site internet. Même si ce sujet peut faire peur, il est en réalité assez simple de se mettre en conformité ! Dans cet article, je vous donne toutes les mentions obligatoires pour votre site web, ainsi qu'un générateur [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Que vous soyez pro ou non, vous devez afficher un certain nombre de <strong>mentions légales sur votre site internet</strong>. Même si ce sujet peut faire peur, il est en réalité assez simple de se mettre en conformité ! Dans cet article, je vous donne toutes les <strong>mentions obligatoires pour votre site web</strong>, ainsi qu'un <strong>générateur de mentions légales</strong> pour vous faciliter la tâche.</p>



<p class="wp-block-paragraph"><em>Cet article a été rédigé avec l’aide de Julie et Oriane, docteures en droit et fondatrice de&nbsp;<a href="https://houjo.fr/" target="_blank" rel="noreferrer noopener">Houjo</a>, les kits juridiques en ligne pour entrepreneur·ses.</em></p>



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



<h2 class="wp-block-heading">Pourquoi afficher les mentions légales sur un site internet ?</h2>



<h3 class="wp-block-heading">C'est une obligation juridique</h3>



<p class="wp-block-paragraph">Il y a des documents que vous devez absolument publier sur votre site Internet. C'est une obligation juridique, c'est comme ça, vous n'avez pas le choix. Ou bien vous vous exposez à un risque de sanctions (<em>notamment financières</em>) si vous ne le faites pas.</p>



<p class="wp-block-paragraph">Ce ne sont pas juste des documents pour faire joli. Ce sont des documents qui garantissent que le site est sérieux, qu'il applique bien le cadre réglementaire. Et ces documents, ils sont destinés à protéger les consommateurices, la clientèle, les prospect·es... Bref, toustes celleux qui peuvent visiter votre site web.</p>



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



<h3 class="wp-block-heading">C'est une question d'éthique</h3>



<p class="wp-block-paragraph">Il y a une règle qui se vérifie quand même très souvent, c'est que des sites qui ne publient pas ces documents, ce ne sont quand même pas des sites sérieux. Afficher les mentions légales d'un site internet, c'est aussi afficher que vous, vous êtes une personne sérieuse, au-delà de l'obligation.</p>



<p class="wp-block-paragraph">C'est aussi selon moi une responsabilité envers les personnes qui visitent votre site. Un devoir en quelque sorte. Vous vous devez d'être transparent·e avec votre cible et de faire tout ce que vous pouvez pour protéger ces intérêts.</p>



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



<h2 class="wp-block-heading">Quelles sont les mentions obligatoires sur un site internet ?</h2>



<h3 class="wp-block-heading">Les mentions légales</h3>



<p class="wp-block-paragraph">La première obligation sur votre site, ce sont les mentions légales.</p>



<p class="wp-block-paragraph">Elles doivent comporter :</p>



<ul class="wp-block-list">
<li><strong>Identité de l'entreprise </strong>: votre nom, prénom et adresse. Si vous êtes entrepreneur individuel (y compris, micro-entrepreneur), vos nom et prénom sont accompagnés de la mention entrepreneur individuel ou des initiales EI.</li>



<li><strong>Mail et numéro de téléphone</strong> pour contacter votre entreprise</li>



<li><strong>Numéro d'immatriculation&nbsp;au&nbsp;RCS</strong> si vous êtes concerné·es.</li>



<li><strong>Numéro d'identification à la TVA</strong> si vous êtes concerné·es.</li>



<li><strong>Identité de&nbsp;l'hébergeur</strong> de votre site : nom ou dénomination sociale, adresse et numéro de téléphone</li>



<li>Si vous exercez une&nbsp;activité réglementée&nbsp;et soumise à autorisation : <strong>nom et adresse de l'autorité</strong> qui a délivré l'autorisation.</li>
</ul>



<p class="wp-block-paragraph">Attention, si vous êtes un particulier sans activité commerciale, vous devez quand même afficher ces mentions légales !</p>



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



<h3 class="wp-block-heading">La politique de confidentialité</h3>



<p class="wp-block-paragraph">La politique de confidentialité, ce n'est pas juste un document, c'est toute la la gestion des données personnelles que vous récoltez.</p>



<p class="wp-block-paragraph">Par exemple, si vous avez une newsletter, vous collectez des données personnelles : adresse mail, nom, prénom... Et donc, en tant que collecteurice, vous avez l'obligation de protéger ces données. De faire en sorte qu'elles ne soient pas volées. Ne pas les vendre. Vous devez aussi toujours demander le consentement des personnes avant de récolter ces données.</p>



<p class="wp-block-paragraph">Le meilleur moyen de protéger les données, c'est d'avoir une politique de confidentialité. Vous pouvez retrouver plus de détail sur ce sujet dans <a href="https://steffilala.fr/rgpd/" target="_blank" rel="noreferrer noopener">mon article consacré au RGPD</a>.</p>



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



<h3 class="wp-block-heading">Les conditions générales de vente</h3>



<p class="wp-block-paragraph">Les CGV sont obligatoires si vous vendez directement sur votre site à des particuliers.</p>



<p class="wp-block-paragraph">Les personnes doivent également dans ce cas les accepter avant d'acheter (<em>via une petite case à cocher par exemple</em>).</p>



<p class="wp-block-paragraph">Mais les CVG sont utiles à partir du moment où vous avez une activité commerciale, que ce soit de la vente de produits ou de services.</p>



<p class="wp-block-paragraph">En effet, c'est un document qui va fixer le cadre de la vente ou collaboration, et qui réduit grandement le risque de litiges !</p>



<p class="wp-block-paragraph">Les éléments qui doivent y figurer diffèrent selon que vous vendiez aux particulier·es ou aux professionnel·les. Vous retrouvez la liste sur <a href="https://entreprendre.service-public.fr/vosdroits/F31228" target="_blank" rel="noreferrer noopener">le site officiel du gouvernement</a>.</p>



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



<h3 class="wp-block-heading">Les conditions générales d'utilisation (optionnel)</h3>



<p class="wp-block-paragraph">Les CGU ne sont pas obligatoires mais j'en parle quand même car elles peuvent être utiles, encore une fois pour se protéger.</p>



<p class="wp-block-paragraph">Ces conditions vont en gros définir comment fonctionne le site, les droits et obligations de la personne qui gère le site (vous), et des personnes qui l'utilisent. Cela permet de se prémunir si jamais des personnes voudraient faire un usage frauduleux de votre site.</p>



<p class="wp-block-paragraph">Encore une fois, toutes les informations sur les CGU sont dispo sur <a href="https://www.francenum.gouv.fr/guides-et-conseils/developpement-commercial/site-web/rediger-des-conditions-generales-dutilisation" target="_blank" rel="noreferrer noopener">le site officiel France Num</a>.</p>



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



<h2 class="wp-block-heading">Générateur de mentions légales pour ton site internet</h2>



<p class="wp-block-paragraph">Maintenant qu'on connaît la théorie, vous vous sentez peut-être perdu·es pour mettre en oeuvre les mentions légales de votre site internet...</p>



<p class="wp-block-paragraph">Des outils existent pour vous faciliter la tâche mais attention, ils n'ont aucune valeur juridique et ne remplacent pas l'expertise d'une personne spécialisée en droit, dont c'est le métier.</p>



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



<h3 class="wp-block-heading">Générateur de mentions légales de site internet</h3>



<p class="wp-block-paragraph">Le premier outil est un générateur de mentions légales proposé par lawebeuse.com.</p>



<p class="wp-block-paragraph">Vous devrez remplir les informations concernant votre entreprise puis les mentions légales se généreront automatiquement et vous n'aurez plus qu'à copier-coller sur votre site internet.</p>



<p class="wp-block-paragraph">✅ <strong><a href="https://la-webeuse.com/generateur-mentions-legales/#lwptoc15" target="_blank" rel="noreferrer noopener">Générateur de mentions légales</a></strong></p>



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



<h3 class="wp-block-heading">Générateur de politique de confidentialité</h3>



<p class="wp-block-paragraph">Le deuxième outil est une extension WordPress pour gérer les cookies de votre site et générer votre politique de confidentialité.</p>



<p class="wp-block-paragraph">Vous devrez télécharger puis activer l'extension et suivre ensuite l'assistant proposé. C'est assez simple à prendre en main, et ça permet également d'afficher le bandeau de consentement aux cookies (<em>également obligatoire</em>).</p>



<p class="wp-block-paragraph">✅ Extension <strong>Complianz&nbsp;|&nbsp;GDPR/CCPA Cookie Consent</strong> à télécharger dans le répertoire officiel de WordPress</p>



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



<p class="wp-block-paragraph">Vous connaisez maintenant les mentions obligatoires d'un site internet, ainsi que pourquoi et comment les mettre en place. Retenez que ces mentions légales sont là pour vous protéger et pour protéger les utilisateurices de votre site. C'est donc très important de le mettre en place dès que possible !</p>
]]></content:encoded>
					
					<wfw:commentRss>https://steffilala.fr/mentions-legales-site-internet/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>RGPD &#038; auto-entrepreneur : comprendre et appliquer facilement</title>
		<link>https://steffilala.fr/rgpd/</link>
					<comments>https://steffilala.fr/rgpd/#respond</comments>
		
		<dc:creator><![CDATA[Steffi]]></dc:creator>
		<pubDate>Thu, 20 Jul 2023 04:30:00 +0000</pubDate>
				<category><![CDATA[Entrepreneuriat éthique]]></category>
		<guid isPermaLink="false">https://entreprendre-ethique.fr/?p=31173</guid>

					<description><![CDATA[Haaaa le RGPD... On en a toustes entendu parler, on sait qu'on est concerné·es mais en vrai... C'est pas un peu compliqué tout ça ? Comment gérer le RGPD en tant qu'auto-entrepreneur·se ? Dans cet article, je vais tenter de vous expliquer le plus simplement possible ce qu'est le RGPD et comment l'appliquer et être [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Haaaa le <strong>RGPD</strong>... On en a toustes entendu parler, on sait qu'on est concerné·es mais en vrai... C'est pas un peu compliqué tout ça ? Comment gérer le <strong>RGPD en tant qu'auto-entrepreneur·se</strong> ?</p>



<p class="wp-block-paragraph">Dans cet article, je vais tenter de vous expliquer le plus simplement possible ce qu'est le RGPD et <strong>comment l'appliquer et être en règle dans votre auto-entreprise</strong>.</p>



<p class="wp-block-paragraph">Cet article a été rédigé avec l'aide de Julie et Oriane, docteures en droit et fondatrice de <a href="https://houjo.fr/" target="_blank" rel="noreferrer noopener">Houjo</a>, les kits juridiques en ligne pour entrepreneur·ses.</p>



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



<h2 class="wp-block-heading">Qu'est-ce que le RGPD et qui est concerné ?</h2>



<p class="wp-block-paragraph">Le <strong>Réglement Européen pour la Protection des Données</strong> est un règlement européen qui s'applique à toutes les entreprises, <strong>micro-entreprises incluses</strong>, basées en France et en Europe. Ou même basées à l'étranger, si les entreprises ciblent des clients résidents européens.</p>



<p class="wp-block-paragraph">Voilà, ça, c'est le cadre d'application du RGPD : tout niveau d'entreprise, peu importe sa capacité, sa taille, le nombre de salariés, et en Europe ou à l'étranger, mais toujours dans l'esprit que ça touche les résidents européens, donc les résidents et nationaux français.</p>



<p class="wp-block-paragraph">Ce fameux RGPD, c'est tout simplement <strong>l'ensemble des règles qui protègent les données personnelles des personnes</strong>. Et en tant qu'entreprise, peu importe votre taille, des données personnelles, vous en récoltez forcément.</p>



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



<h2 class="wp-block-heading">Qu'est-ce qu'une donnée personnelle ?</h2>



<p class="wp-block-paragraph">Une donnée personnelle, c'est <strong>une information qui permet d'identifier directement ou indirectement une personne</strong>.</p>



<p class="wp-block-paragraph">Directement, ça veut dire nom, prénom, adresse e-mail, par exemple.</p>



<p class="wp-block-paragraph">Indirectement, ça veut dire plusieurs informations concomitantes qui vous arriveraient en termes de faisceaux d'indices qui permettraient d'identifier une personne.</p>



<p class="wp-block-paragraph">L'enjeu est fondamental. Parce qu'à partir du moment où on a une entreprise, même en tant qu'auto-entrepreneur·se, on est amené·e à collecter ces informations. Le nom, le prénom, l'adresse e-mail, éventuellement le numéro SIREN/ SIRET... Si vous travaillez avec d'autres entreprises, vous êtes amené·es à être responsables du traitement de ces données personnelles. Et donc, à partir du moment où vous êtes responsables de ce traitement, vous avez les trois obligations suivantes.</p>



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



<h2 class="wp-block-heading">Les 3 principes du RGPD</h2>



<p class="wp-block-paragraph">Le RGPD est entré en vigueur en 2018 et je vais tenter de résumer les 800 pages de règlement en trois mots. </p>



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



<h3 class="wp-block-heading">Transparence</h3>



<p class="wp-block-paragraph">Transparence et consentement, ça, c'est le premier bloc.</p>



<p class="wp-block-paragraph">C'est à dire que vous devez, à votre niveau, être tout à fait clair·es et transparent·es vis à vis de vos client·es et des personnes qui visitent votre site web sur ce que vous faites de leurs données personnelles.</p>



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



<h3 class="wp-block-heading">Confidentialité</h3>



<p class="wp-block-paragraph">Le deuxième bloc c'est la confidentialité. Les données qui vont transiter par votre micro-entreprise doivent être protégées et ne peuvent pas être transférées ou transmises n'importe où et n'importe comment.</p>



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



<h3 class="wp-block-heading">Sécurité</h3>



<p class="wp-block-paragraph">Et le troisième point, c'est la sécurité.</p>



<p class="wp-block-paragraph">Sécurité, ça veut dire que toutes les informations qui vont être collectées dans le cadre de votre activité doivent être sécurisées informatiquement, protégées et hébergées de manière sécurisée sur des disques durs externes, un cloud avec des mots de passe solides et robustes, etc...</p>



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



<h2 class="wp-block-heading">Comment appliquer le RGPD dans son auto-entreprise ?</h2>



<p class="wp-block-paragraph">La manière la plus simple et efficace de se protéger, c'est d'avoir une <strong>politique de confidentialité</strong> robuste et solide. C'est à dire qu'elle corresponde bien à ce que vous faites concrètement sur votre site internet et dans le cadre de votre activité.</p>



<p class="wp-block-paragraph">Et surtout, il faut que vous puissiez être transparent·es dans ces données que vous avez collectées. Et que vous puissiez à n'importe quel moment justifier auprès de la CNIL (la Commission Nationale Informatique et Liberté, qui est l'agence qui orchestre l'application du RGPD) :</p>



<ul class="wp-block-list">
<li>quel type de données vous avez collectées</li>
</ul>



<ul class="wp-block-list">
<li>quel type de données vous hébergez</li>
</ul>



<ul class="wp-block-list">
<li>pourquoi</li>
</ul>



<ul class="wp-block-list">
<li>combien de temps</li>
</ul>



<ul class="wp-block-list">
<li>quelle est votre politique en termes de suppression de ces données là, parce que vous ne pouvez pas garder les données de vos client·es ad vitam aeternum.</li>
</ul>



<p class="wp-block-paragraph">Il est important aussi quand vous avez une newsletter, quand vous vous mettez à disposition des ebook, des formations en ligne, des systèmes de paiement par votre site internet ou tout simplement quand vous signez un contrat avec n'importe quel·le client·e, que ce·tte client·e soit informé·e de votre politique de confidentialité.</p>



<p class="wp-block-paragraph">Qu'iel sache exactement, ce que vous faites de ses données, combien de temps vous les hébergez, pourquoi vous les collectez et l'informer également de ses droits, c'est à dire le droit de supprimer, de se désabonner, par exemple de la newsletter, de modifier ses données dans votre registre, etc...</p>



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



<p class="wp-block-paragraph">Pour conclure, maintenant que vous savez clairement ce qu'est le <strong>RGPD</strong>, voici les 3 actions que vous pouvez mettre en place dès maintenant dans votre <strong>auto-entreprise</strong> :</p>



<ul class="wp-block-list">
<li>Vérifier que vous avez une politique de confidentialité sur votre site web qui soit à jour et en conformité</li>



<li>Vérifiez que dans vos contrats il y ait une clause de confidentialité et une clause faisant référence au RGPD.</li>



<li>Et enfin, jeter un coup d'œil sur les types de données que vous avez collectées jusqu'à présent et faire le tri, un petit nettoyage sur ce que vous avez accumulé comme données et qu'est ce qui pourrait potentiellement être supprimé parce que ça a plus de trois ou cinq ans.</li>
</ul>
]]></content:encoded>
					
					<wfw:commentRss>https://steffilala.fr/rgpd/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Site internet vitrine : checklist des éléments indispensables !</title>
		<link>https://steffilala.fr/site-internet-vitrine-checklist/</link>
					<comments>https://steffilala.fr/site-internet-vitrine-checklist/#respond</comments>
		
		<dc:creator><![CDATA[Steffi]]></dc:creator>
		<pubDate>Thu, 22 Jun 2023 04:30:00 +0000</pubDate>
				<category><![CDATA[Création de site]]></category>
		<guid isPermaLink="false">https://entreprendre-ethique.fr/?p=31003</guid>

					<description><![CDATA[Vous avez décidé de créer votre site internet vitrine pour promouvoir votre activité mais vous ne savez pas quoi y mettre ? Dans cet article, je vous donne la checklist ultime de tout ce qu'il faut y mettre ! Pour un site web stratégique, qui vous apporte des demandes de collaboration ! Le site internet [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Vous avez décidé de créer votre site internet vitrine pour promouvoir votre activité mais vous ne savez pas quoi y mettre ? Dans cet article, je vous donne la checklist ultime de tout ce qu'il faut y mettre ! Pour un site web stratégique, qui vous apporte des demandes de collaboration !</p>



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



<h2 class="wp-block-heading">Le site internet vitrine : pourquoi, pour qui ?</h2>



<h3 class="wp-block-heading">Site internet vitrine : définition</h3>



<p class="wp-block-paragraph">Commençons par le commencement, <strong>c'est quoi un site internet vitrine</strong> ?</p>



<p class="wp-block-paragraph">C'est tout simplement, un site où, contrairement à un site e-commerce, on ne vend pas directement. C'est un site qui va, comme son nom l'indique, <strong>servir de vitrine</strong>.</p>



<p class="wp-block-paragraph">C'est un l'équivalent digital de la <strong>plaquette commerciale</strong>. Le but, c'est de <strong>présenter l'entreprise et ses services</strong>, dans un but de visibilité, avec souvent comme objectif de générer de la <strong>prise de contact</strong>.</p>



<p class="wp-block-paragraph">Le site internet vitrine est donc plutôt pour les entreprises qui proposent du <strong>service</strong> : freelances, indépendant·es, profession libérale, personne dans l'accompagnement, restaurants, hôtels, ...</p>



<p class="wp-block-paragraph">Mais ça peut aussi être une très bonne idée pour <strong>les associations</strong> par exemple, pour se faire connaître et pouvoir ainsi avoir plus d'impact.</p>



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



<h3 class="wp-block-heading">À quoi ça sert ?</h3>



<p class="wp-block-paragraph">Un site vitrine, comme dit plus haut, sert surtout à <strong>présenter une entreprise</strong>. C'est un excellent moyen de pouvoir <strong>donner des informations</strong> à votre cible et de pouvoir <strong>promouvoir vos offres</strong>.</p>



<p class="wp-block-paragraph">C'est très utile pour <strong>gagner en visibilité sur le web</strong>, mais aussi pour gagner en temps et en efficacité quand une personne s'intéresse à votre entreprise. </p>



<p class="wp-block-paragraph">C'est un outil <strong>accessible 24h/24 et 7j/7</strong>, qui peut travailler pour vous, quand vous dormez ou que vous êtes en vacances par exemple !</p>



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



<h2 class="wp-block-heading">Que mettre sur son site vitrine ?</h2>



<p class="wp-block-paragraph">Bon très bien, maintenant on sait ce qu'est un site internet vitrine. Mais qu'est-ce qu'on y met ?</p>



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



<h3 class="wp-block-heading">Les services</h3>



<p class="wp-block-paragraph">La première chose à mettre, c'est <strong>votre activité</strong>.</p>



<p class="wp-block-paragraph">C'est-à-dire ce que vous faites, pour qui vous le faites et pourquoi.</p>



<p class="wp-block-paragraph">Il ne s'agit pas seulement de présenter vos services et à quel point ils sont géniaux. Non, le but, c'est surtout de dire en quoi ils vont pouvoir <strong>aider votre cible</strong>. Qu'est-ce que ça va leur apporter ? Quels bénéfices iels vont pouvoir en tirer ?</p>



<p class="wp-block-paragraph">Plus qu'un service, vous présentez <strong>votre solution</strong> à un problème.</p>



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



<h3 class="wp-block-heading">La page À Propos</h3>



<p class="wp-block-paragraph">Deuxième chose que les personnes voudront connaître après vos services : vous !</p>



<p class="wp-block-paragraph">La vente, c'est une question de <strong>confiance</strong>. On collabore avec des personnes en qui on a confiance !</p>



<p class="wp-block-paragraph">C'est aussi une question <strong>d'émotion</strong>. On va choisir une entreprise plutôt qu'une autre parce que l'histoire nous aura touché·es. Ou bien parce qu'on se reconnaîtra dans les valeurs. Ou encore juste parce qu'on trouvera la communication de la marque marrante.</p>



<p class="wp-block-paragraph">Nous sommes des êtres bien moins rationnels que ce qu'on veut bien croire.</p>



<p class="wp-block-paragraph">C'est donc le rôle de la page à propos (ou qui sommes-nous) : <strong>montrer notre expertise</strong> par notre parcours pour donner confiance. <strong>Toucher les gens</strong> par notre histoire ou nos engagements.</p>



<p class="wp-block-paragraph">Le tout bien sûr, en gardant au cœur de notre discours <strong>la problématique de notre cible</strong>, et pourquoi on veut l'aider.</p>



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



<h3 class="wp-block-heading">Un moyen de contact</h3>



<p class="wp-block-paragraph">Maintenant on l'a dit, l'objectif du site internet vitrine, c'est que des personnes nous contactent pour travailler avec nous.</p>



<p class="wp-block-paragraph">Alors oui, pour ça, il faut qu'elles soient convaincues par notre solution, qu'elles aient confiance en nous et qu'elles soient touchées par notre marque.</p>



<p class="wp-block-paragraph">Mais il faut aussi qu'elles aient un moyen de le faire, tout bêtement. Un moyen simple et rapide.</p>



<p class="wp-block-paragraph">Ça peut-être un <strong>lien pour nous envoyer un email</strong>, un <strong>formulaire de contact</strong> ou encore un <strong>lien vers notre calendrier</strong> pour prendre rdv.</p>



<p class="wp-block-paragraph">Ce qui est important, c'est que ce moyen de contact soit présent aux bons endroits sur votre site, au moment où votre cible a envie de vous contacter.</p>



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



<h3 class="wp-block-heading">Les réalisations</h3>



<p class="wp-block-paragraph">Si votre métier s'y prête, vous pouvez aussi ajouter <strong>les projets</strong> sur lesquels vous avez déjà travaillé. Il n'y a pas meilleur moyen pour que votre cible se projète, puisqu'elle va voir, concrètement, à quoi ça ressemble de travailler avec vous.</p>



<p class="wp-block-paragraph">Ça peut prendre la forme d'un <strong>portfolio</strong> pour les graphistes, photographes, décorateurices d'intérieur, ...</p>



<p class="wp-block-paragraph">Mais ça peut aussi être des <strong>études de cas</strong> ou des <strong>résultats </strong>que votre clientèle a obtenu pour les personnes dont l'activité est moins visuelle.</p>



<p class="wp-block-paragraph">Si vous n'avez pas encore eu de clientèle, montrez des <strong>projets fictifs</strong> sur lesquels vous avez bossé ! Les gens veulent juste voir quelque chose de concret, peu importe si c'est un vrai projet ou pas.</p>



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



<h3 class="wp-block-heading">Les témoignages</h3>



<p class="wp-block-paragraph">Et enfin, dernier élément qui me paraît indispensable sur un site vitrine : <strong>les témoignages</strong> !</p>



<p class="wp-block-paragraph">Les témoignages sur un site vitrine, c'est l'équivalent des avis sur un site e-commerce. Et avouez qu'acheter un produit ou réserver un hôtel où il n'y a pas d'avis, ça fait tout de suite un peu peur...</p>



<p class="wp-block-paragraph">Donc affichez les témoignages des personnes avec qui vous avez déjà travaillé sur votre site. Sur votre page d'accueil, sur la page services, sur votre portfolio... Usez et abusez des avis clients !</p>



<p class="wp-block-paragraph">Si vous n'avez pas encore de témoignages, réclamez-les ! Les personnes qui donnent leur avis spontanément sont très rares, alors prenez l'habitude de demander après chaque collaboration.</p>



<p class="wp-block-paragraph">Si vous n'avez pas encore eu votre premier contrat, vous pouvez afficher des retours qu'on vous a faits sur votre contenu gratuit ou bien même, si ça s'y prête, dans votre ancien job.</p>



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



<h3 class="wp-block-heading">Les mentions légales</h3>



<p class="wp-block-paragraph">Et oui, c'est pas le plus fun, mais c'est obligatoire !</p>



<p class="wp-block-paragraph">Sachez qu'à partir du moment où vous avez un site, même un site perso ou un blog pour raconter vos vacances, il y a des mentions obligatoires à afficher. Vous devrez également respecter le fameux RGPD.</p>



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



<p class="wp-block-paragraph">Voilà donc les éléments indispensables à mettre sur votre site internet vitrine. Bien sûr, on peut y mettre bien d'autres choses. Mais ça, c'est le minimum syndical pour un site efficace : c'est à dire un site qui vous apporte des prises de contact, pas un site qui est là juste pour dire d'être là.</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
]]></content:encoded>
					
					<wfw:commentRss>https://steffilala.fr/site-internet-vitrine-checklist/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
