Margoo : comment aligner un site avec ses engagements éco-responsables (-76% d’impact carbone) sans sacrifier la performance (+11,5 pts) et sans refonte totale ?

Margoo : comment aligner un site avec ses engagements éco-responsables (-76% d’impact carbone) sans sacrifier la performance (+11,5 pts) et sans refonte totale ?

Juin 2025 | UPGRADE DE SITE | Amélioration progressive, sans tout refaire

Margoo : comment aligner un site avec ses engagements éco-responsables (-76% d’impact carbone) sans sacrifier la performance (+11,5 pts) et sans refonte totale ?

Margoo — réseau de prestataires de mariage éco-responsable

Upgrader un site existant pour en faire un vrai levier stratégique (sans tout refaire)

01

Prise de contact

Quand Margoo m’a contactée, l’objectif n’était pas de repartir de zéro.

Leur site existait déjà, leur communauté aussi. Mais il y avait un certain décalage : entre leurs engagements éco-responsables…et ce que leur site racontait vraiment, entre le trafic…et les résultats concrets.

02

Constat

On a donc fait un choix :

  • ne pas tout casser
  • ne pas faire une “énième refonte”

03

Proposition

Transformer l’existant, intelligemment. Avec une double approche :

  • comprendre en profondeur ce qui bloque les visiteurs et freine leur développement (FOCUS)
  • puis améliorer le site progressivement sur 3 mois (UPGRADE)

04

Résultat

Un site plus sobre, plus accessible, plus éco-responsable, plus cohérent…et surtout, un site qui travaille vraiment pour eux.

En bref

Client : Margoo (réseau de prestataires du mariage éco-responsable)

Secteur : Mariage / Événementiel engagé

Ce qui a été fait :

  • FOCUS stratégique : audit complet suivi du plan d’action adéquate,
  • UPGRADE de site : optimisation progressive,
  • option guide de style web éco-responsable et accessible

Contexte et besoin

L’équipe de Margoo, réseau engagé du mariage éco-responsable, avait déjà un site bien en place… mais qui ne reflétait pas pleinement ses valeurs ni son potentiel stratégique.

Elle ressentait :

  • un décalage entre ses engagements écologiques forts et l’impact réel de son site (performance, empreinte carbone, accessibilité)
  • une sensation de “bricolage” avec un site qui avait évolué sans réelle vision globale
  • des difficultés à faire du site un vrai levier (et pas juste une vitrine) malgré une belle visibilité

Objectifs du projet

L’objectif principal était de :

pictogrammes de Petits Pas Design représentant un badge avec un check à l'intérieur

Aligner le site avec les engagements éthiques et éco-responsables de Margoo (sans greenwashing ni compromis)

pictogrammes de Petits Pas Design représentant une planète au creux d'une main

Réduire l’empreinte carbone du site tout en améliorant ses performances globales

“Nous avons fait appel à Coralie pour optimiser et remanier notre site pour qu'il soit plus écoresponsable et accessible. Son accompagnement est allé au-delà de nos attentes, Coralie a été extrêmement disponible pour nous accompagner étapes par étapes et nous sommes très contents du résultat.”

Claire Tranier, Co-dirigeante de Margoo et fondatrice de Faire-part Green

pictogrammes de Petits Pas Design représentant des flèches en cercle qui indique un mouvement

Rendre le site plus accessible (lisibilité, navigation, compréhension) pour toucher un public plus large

pictogrammes de Petits Pas Design représentant un smartphone et une feuille à l'intérieur pour représenter l'éco-conception

Transformer le site en un véritable levier stratégique capable de soutenir leur crédibilité et générer des résultats concrets

Mon approche

Pour y répondre, j’ai choisi de ne pas repartir de zéro, mais d’optimiser l’existant avec méthode et intelligence :

Extraits de l'audit du site de Margoo

Audit ciblé

Analyse complète du site comme un système global (stratégie, UX, performance, accessibilité, éco-conception) pour identifier les vrais points de friction.

Extraits de l'atelier tri des fonctionnalités et contenus pour bien préparer la refonte de son site web

Cadrage et priorisation

Construction d’une feuille de route claire sur 3 mois, avec des actions classées selon leur impact réel (et non au feeling).

Image représentant le site Margoo

Amélioration progressive

Optimisation continue du site (UX, technique, contenu) sans refonte brutale, pour améliorer les résultats étape par étape.

Exemple du guide de style web de Margoo

Alignement graphique responsable

Refonte subtile de la charte existante pour la rendre plus accessible, cohérente et éco-conçue sans casser l’identité existante.

Résultats obtenus

Le projet a permis à Margoo de :

pictogrammes de Petits Pas Design représentant un aimant

Performance

Améliorer significativement ses performances : de 81,5 à 92/100 en moyenne (+11,5)

pictogrammes de Petits Pas Design représentant une loupe

SEO

Atteindre un score SEO technique parfait (100/100)

pictogrammes de Petits Pas Design représentant un smartphone et une feuille à l'intérieur pour représenter l'éco-conception

Accessibilité

Renforcer l’accessibilité du site : de 88 à 94/100 grâce à une adaptation intelligente de la charte graphique et des contenus

pictogrammes de Petits Pas Design représentant une plume

Éco-responsabilité

Réduire drastiquement son empreinte carbone : de 0,71g à 0,17g CO2 par page vue (soit -76%) et passer d’une note D à C

pictogrammes de Petits Pas Design représentant un cerveau

UX/UI

Clarifier et structurer son site pour en faire un outil plus lisible, plus crédible et plus aligné avec ses engagements

Les scores présentés ci-dessus représentent une moyenne globale pour l'ensemble des pages du site. Ils ont été calculé avant la refonte puis après la mise en ligne du site (septembre 2025). La performance, le SEO et l'accessibilité ont été calculé avec Page Speed Insights et l'aspect écologique avec Eco-Index et Website Carbon. Si tu veux connaître ma méthode de calcul tu peux lire mes articles ou demande un diagnostic gratuit en cliquant sur le bouton vert en bas à droite de l'écran.

Mais surtout un site transformé en profondeur… sans refonte brutale.

Un outil désormais piloté, optimisé et évolutif dans le temps.

Exemple des pages du guide de style web de Margoo
Exemple du revamp de la charte graphique de Margoo, avant et après

Guide de style web

Éthique, éco-responsable et accessible.

Un coup d'oeil sur la page d'accueil

Performante, éco-responsable et accessible.

01

Accessibilité

Margoo avait déjà sa propre identité de marque : logo, couleurs, typographies, mais rien n'était clairement structuré et définit (j'ai par exemple comptabilisé sur leur site +11 typographies différentes alors qu'iels ne pensaient en avoir que 2). Je suis donc parti de leur charte graphique existante pour l'améliorer, l'adapter, la moderniser, la rendre plus accessible et éco-responsable.

Pour ça, j'ai légèrement ajusté certains codes graphiques afin de les aligner non-seulement à leurs valeurs éco-responsables, mais aussi à leurs valeurs humaines en les rendant plus accessibles aux personnes en situation de handicap. L'enjeu dans ces cas-là est surtout d'avoir des typographies assez lisibles et web et de s'assurer du bon contraste de couleurs entre chaque texte et son arrière plan. Tout a donc été testé pour répondre à ces normes d'accessibilité web.

Livrable : Guide de style web et accessible (avant/après visible plus haut)

02

Mise en page

Ce n'est pas parce qu'un site est éthique et éco-responsable qu'il doit être vide et fade. Il est tout a fait possible de jouer avec la mise en page et d'y apporter de la couleur

Ici, ce fut un réel travail d'équipe. Je leur ai fait des propositions de mise en page et structuration pour améliorer certaines pages de leur site, puis iels ont ajusté ensuite certains éléments pour que ça colle parfaitement à leur ADN.

Livrable : Maquettes graphiques et intégration de nouveaux blocs

03

Traitement des images et référencement naturel (SEO)

Les images ont toutes été optimisé pour le site par l'équipe Margoo. Un des gros chantier d'améliorations que l'on avait définit ensemble était celui-là. En effet, Margoo comptait presque 1000 images dans sa médiathèque, pas toute utilisées, pas toutes utiles, pas toutes optimisées (cadrage des images dans leur taille (dimensions) réelle d'affichage sur le sit, export de chaque image au bon format, notamment en utilisant le format d'images le plus léger pour le web (WebP), compression des ces dernières). Il a donc fallut "nettoyer" leur médiathèque au complet. Ce qu'iels ont fait avec brio, puisqu'iels en sont sorti avec environ 500 images, toutes optimisées.

De plus la balise alt de chaque image a été renseigné afin de faciliter la lecture des images du site aux personnes non-voyantes, utilisant des lecteurs d'écrans ou encore en cas de mauvaises connexion internet (et oui, y en a qui habite en zone rurale). Un combo gagnant, puisque cette balise alt, une fois renseignée, favorise aussi le référencement naturel du site.

Astuce éco-responsable

La balise alt de chaque image a été renseigné afin de faciliter la lecture des images du site aux personnes non-voyantes, utilisant des lecteurs d'écrans ou encore en cas de mauvaises connexion internet (et oui, y en a qui habite en zone rurale). Un combo gagnant, puisque cette balise alt, une fois renseignée, favorise aussi le référencement naturel du site.

TÉMOIGNAGES

Iels m'ont fait confiance

EXTRAIT

“Nous avons fait appel à Coralie pour optimiser et remanier notre site pour qu'il soit plus écoresponsable et accessible. Son accompagnement est allé au-delà de nos attentes, Coralie a été extrêmement disponible pour nous accompagner étapes par étapes et nous sommes très contents du résultat.”

Claire Tranier
Co-dirigeante, Margoo

"Tes accompagnements ont une très grande valeur Coralie, avec la team Margoo on a été impressionnés par le niveau de détail des sessions de travail sur Canva, des synthèses et des conseils que tu nous as donné, c’est encore mieux que ce que l’on attendait en faisant appel à tes services ! 

Coralie est très pédagogue, experte de son domaine et c’est un vrai plaisir d’échanger d’elle."

Léa Le Hégarat, Claire Tranier, Mathieu Germain
Co-dirigeant·e·s, Margoo

Et si ton site arrêtait d’être une simple vitrine ?

Aujourd’hui, ton site peut devenir bien plus : un outil aligné avec tes valeurs, utile pour ton business… et pensé pour durer. Comme Margoo, tu peux l’améliorer sans tout refaire. De manière stratégique, progressive, et surtout efficace.

Tu veux comprendre ce qui bloque ? (FOCUS)
Ou passer à l’action et optimiser ton site en continu ? (UPGRADE)

On en discute ?

Si tu as aimé l'histoire de Margoo, tu devrais également adorer découvrir celui-ci...

Image représentant le site Rejouons Solidaire

Rejouons Solidaire

comment leur site invisible et peu crédible est devenu top 10 Google en 3 mois et génère désormais des opportunités ?

Image représentant l'analyse du site Rejouons Solidaire sur Google Search Console

DIAGNOSTIC OFFERT

Un regard d'experte sur ton site, gratuitement

Je t'offre un mini-audit express de ton site existant : empreinte carbone, accessibilité, performance. Tu repars avec des pistes concrètes, sans jugement, pour passer à l'action comme bon te semble.

DIAGNOSTIC GRATUIT

Connaissez-vous l'empreinte carbone de votre site ?

La plupart des sites web émettent beaucoup plus de CO2 qu'on ne le pense. Faites une demande de diagnostic gratuit et découvrez comment passer à l'action.

Résultats envoyés sous 48h · Sans engagement

Si tu as aimé le site de Margoo,
tu devrais également adorer découvrir celui-ci...

Image représentant le site Audensiel Canada

Comment Audensiel Canada a diminué l’empreinte carbone de son site de de -72% ?

Image représentant l'analyse du site Audensiel Canada sur Digital Beacon
Studio Floriane : comment repenser un site comme un outil stratégique (pas juste une simple vitrine) pour gagner en crédibilité, en autonomie… et en performance (+63 pts mobile) ?

Studio Floriane : comment repenser un site comme un outil stratégique (pas juste une simple vitrine) pour gagner en crédibilité, en autonomie… et en performance (+63 pts mobile) ?

Juillet 2024 | UPCYCLING DE SITE | Refonte totale

Studio Floriane : comment repenser un site comme un outil stratégique (pas juste une simple vitrine) pour gagner en crédibilité, en autonomie… et en performance (+63 pts mobile) ?

Studio Floriane — studio graphique éco-responsable.

Reprendre le contrôle de son site… et en faire un vrai levier (aligné, autonome et performant)

01

Prise de contact

Quand Floriane m’a contactée, son site ne reflétait plus ni son expertise… ni ses engagements.

Mais surtout, elle n’en avait pas le contrôle. Chaque modification dépendait d’un prestataire.

Et comme beaucoup de graphistes… créer pour soi était devenu compliqué. Difficile de prendre du recul. Difficile d’appliquer sa propre direction artistique.

02

Constat

Elle avait besoin d’un regard extérieur pour amener plus de clarté, de cohérence… et un vrai positionnement premium. Sans compter une version mobile peu optimisée, alors même que son audience vient majoritairement d’Instagram.

On a donc fait un choix :
- ne pas bricoler l’existant
- ne pas empiler des tas d’ajustements

03

Proposition

Repenser le site en profondeur, avec une approche claire :

  • autonomie et prise en main de son site (FORMATION à la gestion de son site WordPress en toute autonomie)
  • et construire un site (enfin) aligné, accessible et éco-responsable avec une expérience mobile (enfin) agréable.

04

Résultat

Un site plus fluide, plus cohérent, plus engagé…et surtout, un site qu’elle maîtrise enfin en toute autonomie.

En bref

Client : Studio Floriane, studio graphique éco-responsable par Floriane Brault

Secteur : Design graphique engagé / accompagnement de créateur·rice·s engagé·e·s

Ce qui a été fait : UPCYCLING de site

  • refonte complète
  • migration et configuration WordPress
  • direction créative web responsable et accessible
  • optimisation mobile, performance, SEO, accessibilité et éco-conception
  • option formation à la gestion de son site de manière durable en toute autonomie

Contexte et besoin

Floriane, fondatrice du Studio Floriane, accompagne des créateur·rice·s engagé·e·s avec une approche graphique éco-responsable. Mais au moment de me contacter, son site ne suivait plus.

Elle ressentait :

  • un décalage entre son niveau d’expertise… et l’image renvoyée par son site
  • une forte dépendance technique, l’empêchant de faire évoluer son site librement
  • une difficulté à concevoir pour elle-même, malgré son métier de graphiste
  • une expérience mobile peu fluide, freinant clairement son audience principale

Objectifs du projet

L’objectif principal était de :

Permettre à Floriane de reprendre totalement la main sur son site (sans dépendre d’un prestataire)

Créer un site aligné avec son positionnement, ses valeurs éco-responsables et son niveau d’expertise

“Je ne sais même pas par où commencer tant mon avis sur Coralie est positif ! Travailler avec elle a été une expérience au-delà de mes attentes. WordPress c'était un monde obscur pour moi. Et grâce à elle, c'est devenu presque un jeu d'enfant !”

Floriane Brault, Fondatrice de Studio Floriane

Offrir une expérience mobile fluide et efficace, adaptée à son audience issue d’Instagram

Transformer son site en un véritable levier de crédibilité et de conversion

Mon approche

Pour y répondre, je n’ai pas simplement “refait un site”. Je l’ai conçu comme un véritable outil stratégique, pensé pour être à la fois clair, autonome et durable. Concrètement, j’ai structuré mon accompagnement en plusieurs 6 étapes clés.

Structuration stratégique du site

Clarification de l’architecture et des parcours utilisateurs pour poser des bases solides et éviter l’effet “site bricolé”.

Clarification des contenus

Simplification et restructuration des messages pour rendre l’offre plus lisible, plus impactante… et plus facile à convertir.

Image représentant le site Studio Floriane

Direction créative web responsable

Adaptation de son identité graphique au web : plus accessible, plus cohérente, tout en renforçant son positionnement engagé et premium.

Image représentant la version mobile du site Studio Floriane

Conception & intégration WordPress

Refonte complète du site avec un outil simple à prendre en main, pour garantir une vraie autonomie au quotidien.

Image représentant 1 personne assise à son bureau, en train de travailler devant un écran d’ordinateur pour illustrer l'article : Site internet écologique : 10 actions pour réduire l’impact carbone de ton site sans nuire à ton activité (voir même la booster)

Optimisation globale

(mobile, performance, accessibilité, éco-conception)

Un site pensé mobile-first, allégé techniquement, et optimisé pour être rapide, accessible… et plus respectueux de son impact.

Extrait des tutos de Pimp ton site

Formation & accompagnement à l’autonomie

Transmission des bonnes pratiques et suivi post-lancement pour permettre à Floriane de gérer son site en toute confiance, sans dépendance.

Résultats obtenus

Le projet a permis à Studio Floriane de :

Performance

Améliorer drastiquement ses performances : de 34 à 97/100 sur mobile (+63 points) et de 90 à 98 sur desktop.

SEO

Atteindre un score SEO technique optimal : de 83 à 100/100.

Accessibilité

Renforcer l’accessibilité du site : de 90 à 94/100 grâce à une adaptation fine de la charte graphique au web.

Éco-responsabilité

Réduire son empreinte carbone de 22% (de 0,37g à 0,29g CO2 par page vue) et passer d’une note C à B.

Les scores présentés ci-dessus représentent une moyenne globale pour l'ensemble des pages du site. Ils ont été calculé avant la refonte puis après la mise en ligne du site (septembre 2025). La performance, le SEO et l'accessibilité ont été calculé avec Page Speed Insights et l'aspect écologique avec Eco-Index et Website Carbon. Si tu veux connaître ma méthode de calcul tu peux lire mes articles ou demande un diagnostic gratuit en cliquant sur le bouton vert en bas à droite de l'écran.

Mais surtout, le projet a permis à Studio Floriane de :

  • passer d’un site subi… à un site totalement maîtrisé en interne (autonomie ++ au quotidien)
  • se sentir enfin alignée et légitime pour partager son site sans hésitation
  • offrir une expérience mobile fluide, adaptée à une audience majoritairement issue d’Instagram
  • gagner un temps précieux dans la gestion et les mises à jour de son site

Guide de style web

Éthique, éco-responsable et accessible.

Un coup d'oeil sur la page d'accueil

Performante, éco-responsable et accessible.

01

Accessibilité

Studio Floriane avait déjà sa propre identité de marque : logo, submarks, couleurs, typographies. Je suis donc parti de sa charte graphique existante pour cette refonte. Néanmoins une charte graphique print est rarement adaptée aux standards du web.

Alors, j'ai légèrement ajusté certains codes graphiques afin de les aligner non-seulement à ses valeurs éco-responsables, mais aussi à ses valeurs humaines en les rendant plus accessibles aux personnes en situation de handicap. L'enjeu dans ces cas-là est surtout d'avoir des typographies assez lisibles et web et de s'assurer du bon contraste de couleurs entre chaque texte et son arrière plan. Tout a donc été testé pour répondre à ces normes d'accessibilité web.

Livrable : Guide de style web et accessible (visible plus haut)

02

Mise en page

Ce n'est pas parce qu'un site est éthique et éco-responsable qu'il doit être vide et fade. Il est tout a fait possible de jouer avec la mise en page et d'y apporter de la couleur. J'ai notamment apporté du dynamisme à sa structure de page en ajoutant des zones en léger "biais", j'ai également joué avec les submarks (éléments graphiques de la marque, comme des tampons) pour apporter un côté destructuré et personnel, unique. Tout n'a pas besoin d'être linéaire, ce n'est qu'une question de dosage.

Livrable : Maquettes graphiques

03

Traitement des images et référencement naturel (SEO)

Les images ont toutes été optimisé pour le site :

  • cadrage des images dans leur taille (dimensions) réelle d'affichage sur le site
  • export de chaque image au bon format, notamment en utilisant le format d'images le plus léger pour le web (WebP),
  • et enfin compression de ces dernières.

De plus la balise alt de chaque image a été renseigné afin de faciliter la lecture des images du site aux personnes non-voyantes, utilisant des lecteurs d'écrans ou encore en cas de mauvaises connexion internet (et oui, y en a qui habite en zone rurale). Un combo gagnant, puisque cette balise alt, une fois renseignée, favorise aussi le référencement naturel du site.

Astuce éco-responsable

Pour limiter encore plus l'impact de chaque image, il y a quelques astuces à connaître. En voici une.

Là où tu penses qu'il y a 6 images importées sur le site, il y a en réalité 2 images l'une à côté de l'autre. En effet, il est moins lourd d'importer 2 images légères que 6 petites images légères car chaque image ajouté sur ton site génère aussi du poids au niveau de son stockage dans ta base de données par exemple.

En plus, cela simplifie l'affichage sur mobile et entraîne une meilleure expérience pour l'utilisateur·rice car au lieu d'afficher chaque image l'une en dessous de l'autre, l'utilisateur·rice verra une grille de 6 images (3 colonnes x2 lignes).

TÉMOIGNAGES

Iels m'ont fait confiance

EXTRAIT

Une collaboration simple, fluide et un résultat qui dépasse largement mes attentes.

Elle a construit mon site presque en repartant d'une page blanche, tout en l’optimisant pour réduire son impact carbone et garantir une accessibilité pour toutes et tous. Aujourd’hui, mon site reflète qui je suis et incarne mon identité visuelle sans détours.

Floriane Brault
Fondatrice, Studio Floriane

"Une collaboration simple, fluide et un résultat qui dépasse largement mes attentes.

J’étais bloqué avec mon ancien site : aucun accès, aucune autonomie, aucune possibilité d’évolution. L’idée de créer un site moi-même me donnait des sueurs froides, et WordPress me semblait aussi obscur qu’un sous-bois en pleine nuit.

Dès mon premier échange avec Coralie, j’ai senti que c’était avec elle que j’avais envie de travailler. Son sourire, ses conseils, sa bienveillance, son professionnalisme… tout sonnait juste. Ce qui m’a surtout convaincu : son engagement éthique et sa vision de l’éco-conception, qui résonnent avec mes valeurs. J’ai adoré sa précision, sa disponibilité et sa façon de transformer une idée encore floue en un site web clair et harmonieux.

Elle a construit mon site presque en repartant d'une page blanche, tout en l’optimisant pour réduire son impact carbone et garantir une accessibilité pour toutes et tous. Aujourd’hui, mon site reflète qui je suis et incarne mon identité visuelle sans détours.

Je recommande Coralie à 100 %, pour une création, une refonte, optimisation ou tout projet web qui demande rigueur, sensibilité et éthique."

Floriane Brault
Fondatrice, Studio Floriane

Et si tu reprenais (vraiment) le contrôle de ton site ?

Aujourd’hui, ton site peut être bien plus qu’une simple vitrine. Il peut devenir un outil clair, crédible… et que tu maîtrises à 100%. Comme Floriane, tu peux :

gagner en autonomie au quotidien
avoir un site aligné avec ton niveau d'expertise et tes engagements
et t’appuyer dessus pour développer ton activité (sans dépendance)

Tu veux upcycler ton site, sans repartir de zéro ni le subir ? On en discute ?

Si tu te reconnais dans l'histoire du site du Studio Floriane, tu devrais également adorer découvrir celui-ci...

Image représentant le site Margoo

Margoo

comment aligner un site avec ses engagements éco-responsables (-76% d’impact carbone) sans sacrifier la performance (+11,5 pts) et sans refonte totale ?

Exemple du revamp de la charte graphique de Margoo, avant et après

DIAGNOSTIC OFFERT

Un regard d'experte sur ton site, gratuitement

Je t'offre un mini-audit express de ton site existant : empreinte carbone, accessibilité, performance. Tu repars avec des pistes concrètes, sans jugement, pour passer à l'action comme bon te semble.

DIAGNOSTIC GRATUIT

Connaissez-vous l'empreinte carbone de votre site ?

La plupart des sites web émettent beaucoup plus de CO2 qu'on ne le pense. Faites une demande de diagnostic gratuit et découvrez comment passer à l'action.

Résultats envoyés sous 48h · Sans engagement

Rejouons Solidaire : comment leur site invisible et peu crédible est devenu top 10 Google en 3 mois et génère désormais des opportunités ?

Rejouons Solidaire : comment leur site invisible et peu crédible est devenu top 10 Google en 3 mois et génère désormais des opportunités ?

Septembre 2025 | UPCYCLING DE SITE | Refonte totale

Rejouons Solidaire : comment leur site invisible et peu crédible est devenu top 10 Google en 3 mois et génère désormais des opportunités ?

Rejouons Solidaire - réseau n.1 en France de l’économie circulaire et solidaire du jouet.

Transformer un site invisible en véritable levier de visibilité et d’acquisition

01

Prise de contact

Quand Rejouons Solidaire me contacte, leur site existe déjà. Mais dans les faits ? Il est peu visible, peu structuré… et surtout, il ne reflète ni leur impact réel, ni l’ampleur de leur réseau.

02

Constat

Entre leur nouvelle identité de marque…et un site one page bricolé, à l'image de l'ancienne charte graphique, difficile à faire évoluer…le décalage devient évident.

03

Proposition

L’enjeu n’était donc pas de juste “refaire un site”. Mais de transformer un support figé en un outil capable d’attirer, structurer et convertir. Avec une approche très simple : donner une seconde vie à ce site en utilisant ma méthode d’upcycling de site web pour le transformer et le faire briller à nouveau.

04

Résultat

En 3 mois, un site 8x plus visible sur Google, plus clair, plus accessible… et enfin aligné avec leur mission.

En bref

Client : Rejouons Solidaire (réseau associatif)

Secteur : Économie circulaire & solidaire (jouets pour enfants)

Ce qui a été fait : UPCYCLING de site

  • refonte stratégique et graphique,
  • adaptation de la charte graphique au web, structuration SEO,
  • accompagnement rédactionnel,
  • conception & développement WordPress,
  • optimisation performance / accessibilité / éco-conception

Contexte et besoin

Rejouons Solidaire est un réseau engagé dans l’économie circulaire et solidaire du jouet pour enfants. Quand ils me contactent, leur site existe déjà… mais il ne joue clairement pas son rôle. Le constat est simple :

  • un site one-page devenu trop limité pour leur croissance
  • une navigation confuse, difficile à faire évoluer
  • une visibilité SEO quasi inexistante malgré un vrai impact terrain
  • une image digitale en décalage avec leur nouvelle identité de marque

Résultat : leur site ne reflète ni la richesse de leur réseau, ni leur légitimité grandissante. Il informe… mais ne structure pas. Il existe… mais n’attire pas.

Objectifs du projet

L’enjeu de Rejouons Solidaire était clair : transformer un site sous-exploité en véritable levier stratégique pour leur réseau. Concrètement, le projet visait à :

Passer d’un site one-page limité à un site multi-pages structuré et évolutif

Augmenter la visibilité sur Google et attirer de nouveaux membres et mécènes

“L’accompagnement est allé au-delà de mes attentes, avec une expérience véritablement sur-mesure pour la rédaction et une méthodologie à la fois claire, efficace et extrêmement structurante.”

Carla, Chargée de communication chez Rejouons Solidaire

Aligner le site avec leur nouvelle identité de marque

Rendre le site plus clair, plus crédible et plus engageant

Derrière ces objectifs, une ambition forte : faire du site un point d’entrée central pour leur développement, et non plus une simple vitrine passive.

Mon approche

Pour ce projet, j’ai appliqué une logique d’upcycling stratégique : capitaliser sur ce qui fonctionnait déjà afin de transformer l’existant en le rendant plus utile, plus clair et plus performant. Chaque décision a été prise avec un objectif précis : rendre le site plus visible, plus cohérent… et surtout plus utile pour leur développement. Concrètement, mon approche s’est articulée autour de 3 axes.

Clarification stratégique

Analyser le site comme un système global (structure, contenus, SEO) pour identifier ce qui bloquait sa visibilité et sa compréhension

Transformation structurée

  • Passage d’un site one-page à un site multi-pages clair et évolutif
  • Accompagnement à la rédaction pour créer des contenus lisibles, utiles et optimisés SEO

Alignement graphique et technique

  • Adaptation de la charte print au web (accessibilité, lisibilité, cohérence)
  • Création du site sur-mesure
  • Optimisation complète du site (performance, éco-conception, expérience utilisateur)

Résultats obtenus

Le projet a permis à Rejouons Solidaire de :

Performance

Améliorer significativement ses performances : 75 → 97/100 sur mobile et 81 → 94/100 sur desktop.

U

SEO

Multiplier sa visibilité sur Google par 8, avec près de 3x plus de clics et une progression de +11 positions en moyenne jusqu’en haut de la première page.

Accessibilité

Renforcer l’accessibilité du site : 83 → 97/100, grâce à une adaptation fine de la charte graphique au web.

Éco-responsabilité

Réduire drastiquement son empreinte carbone : de 1,64g à 0,11g CO2 par page vue (soit une baisse de 93%) et passer d’une note F à B.

UX/UI

Structurer et clarifier l’ensemble du site pour en faire un outil lisible, crédible et aligné avec leur mission.

Les scores présentés ci-dessus représentent une moyenne globale pour l'ensemble des pages du site. Ils ont été calculé avant la refonte puis après la mise en ligne du site (septembre 2025). La performance, le SEO et l'accessibilité ont été calculé avec Page Speed Insights et l'aspect écologique avec Eco-Index et Website Carbon. Si tu veux connaître ma méthode de calcul tu peux lire mes articles ou demande un diagnostic gratuit en cliquant sur le bouton vert en bas à droite de l'écran.

Mais surtout, le projet a permis à Rejouons Solidaire d'avoir :

  • un site qui attire enfin du trafic qualifié… et ne reste plus invisible
  • un outil devenu central dans leur développement (et non plus un simple support)
  • un réseau dont l’impact est désormais visible… aussi en ligne

Guide de style web

Éthique, éco-responsable et accessible.

Un coup d'oeil sur la page d'accueil

Performante, éco-responsable et accessible.

01

Accessibilité

Rejouons Solidaire venait de revoir son identité visuelle : nouveau logo, illustrations, couleurs, typographies. Je suis donc parti de leur nouvelle charte graphique existante pour cette refonte. Néanmoins une charte graphique print est rarement adaptée aux standards du web.

Alors, j'ai légèrement ajusté certains codes graphiques afin de les aligner non-seulement à ses valeurs éco-responsables, mais aussi à ses valeurs humaines en les rendant plus accessibles aux personnes en situation de handicap. L'enjeu dans ces cas-là est surtout d'avoir des typographies assez lisibles et web et de s'assurer du bon contraste de couleurs entre chaque texte et son arrière plan. Tout a donc été testé pour répondre en tout ou partie à ces normes d'accessibilité web.

Les typographies

J'ai utilisé leur police principale, Bagor, qui n'est pas vraiment accessible, avec parcimonie. Soit, uniquement sur des mots-clés séparants leurs diverses sections, comme un élément graphique, illustratif, décoratif plus que "lisibles". Autrement dit c'est un peu comme une photo purement décorative, si on arrive pas à la voir/lire, cela ne nous empêchera pas de comprendre le site et les messages clés.

Mais, me diras-tu, en terme d'écologie numérique, la règle c'est plutôt : si c'est purement décoratif, c'est qu'on doit l'enlever, le supprimer, non ?

Oui, dans l'idéal, mais un projet et fait de compromis, de dosage et de stratégie. Ma cliente ne pouvait pas se permettre de ne pas utiliser cette typographie sur son site, alors que c'est sa typographie principale sur le print pour toute sa nouvelle campagne de communication... Dans un soucis de cohérence on a trouvé une alternative pour l'utiliser quand même, mais de façon plus accessible que de l'utiliser dans tous les titres du site.

Les couleurs

Ici aussi, l'enjeu était de taille, puisque leur toute nouvelle charte graphique, comportait énormément de couleurs, très représentatif de l'univers enfantin, mais un peu feu d'artifice une fois appliqué sur un site web. 

Alors on a regardé celles qui était accessibles entre elles et nous avons segmenté les couleurs par typologies de pages. Le vert clair pour représenter les membres, le vert foncé pour les témoignages, le jaune pour leur réseau, le orange pour les mécènes, le rose pour leurs offres d'accompagnements, le bleu pour leurs valeurs et savoir-faire. Un code que nous avons utilisé sur l'ensemble des pages du site pour garder une cohérence globale et asseoir une habitude de lecture, des repères visuelles pour les visiteurs récurrents.

Livrable : Guide de style web et accessible (visible plus haut)

02

Des images plus éco-responsables et SEO-friendly

Les images ont toutes été optimisées pour le site :

  • cadrage des images dans leur taille (dimensions) réelle d'affichage sur le site
  • export de chaque image au bon format, notamment en utilisant le format d'images le plus léger pour le web (WebP),
  • et enfin compression des ces dernières.

De plus la balise alt de chaque image a été renseigné afin de faciliter la lecture des images du site aux personnes non-voyantes, utilisant des lecteurs d'écrans ou encore en cas de mauvaises connexion internet (et oui, y en a qui habite en zone rurale). Un combo gagnant, puisque cette balise alt, une fois renseignée, favorise aussi le référencement naturel du site.

Livrable : Maquettes graphiques

Astuce éco-responsable

Pour limiter encore plus l'impact de chaque image, il y a quelques astuces à connaître. En voici une.

Les images en noir et blanc et/ou depixelisé (on enlève certains pixels) génère moins d'énergie lors de leur chargement que leur confrère classique et colorées.

Alors nous avons fait le parti-pris de n'utiliser que des photos en noir et blanc sur le site de Rejouons Solidaire, pour l'alléger à la fois en poids et ainsi réduire son empreinte carbone, mais aussi l'alléger visuellement. En effet, le site étant déjà très coloré il aurait pu entrainer une certaine fatigue visuelle auprès de son audience si les photos étaient restées toutes en couleurs.

TÉMOIGNAGES

Iels m'ont fait confiance

EXTRAIT

L’accompagnement est allé au-delà de mes attentes, avec une expérience sur-mesure pour la rédaction et une méthodologie à la fois claire, efficace et extrêmement structurante.

Coralie a été très réceptive et vraiment à l’écoute, ce qui a rendu l’expérience encore plus fluide et agréable. Merci beaucoup Coralie pour ta patience, tes conseils, c'était un plaisir de travailler avec toi !

Carla
Chargée de communication, Rejouons Solidaire

“L’accompagnement est allé au-delà de mes attentes, avec une expérience véritablement sur-mesure.Ce que j’ai le plus apprécié, c’est la clarté et la structure de la méthodologie, notamment pour la rédaction des contenus : tout était pensé pour rendre le travail simple, guidé et efficace.

L’accompagnement était à la fois fluide, complet et très accessible, notamment grâce aux supports et aux vidéos de formation. Un site que l’on comprend, que l’on peut faire évoluer facilement… et qui reflète enfin notre projet.

Coralie a été très réceptive et vraiment à l’écoute. Merci beaucoup Coralie pour ta patience, tes conseils et ton accompagnement, c’était un plaisir de travailler avec toi !”

Carla
Chargée de communication, Rejouons Solidaire

Et si ton site devenait (enfin) un vrai levier pour ton activité (pas juste une vitrine endormi) ?

Aujourd’hui, ton site existe peut-être déjà. Mais est-ce qu’il attire vraiment ? Est-ce qu’il est clair, crédible, utile… au bon niveau ?

Comme Rejouons Solidaire, tu peux transformer un site “présent” en un site qui travaille vraiment pour toi.

Tu veux comprendre ce qui bloque ? (FOCUS)
Ou passer à l’action pour transformer ton site toi aussi ? (UPCYCLE)

On en discute ?

Si tu as aimé l'histoire du site de Rejouons Solidaire, tu devrais également adorer découvrir celui-ci...

Image représentant le site Studio Floriane

Studio Floriane

comment repenser un site comme un outil stratégique (pas juste une simple vitrine) pour gagner en crédibilité, en autonomie… et en performance (+63 pts mobile) ?

Image représentant la version mobile du site Studio Floriane

DIAGNOSTIC OFFERT

Un regard d'experte sur ton site, gratuitement

Je t'offre un mini-audit express de ton site existant : empreinte carbone, accessibilité, performance. Tu repars avec des pistes concrètes, sans jugement, pour passer à l'action comme bon te semble.

DIAGNOSTIC GRATUIT

Connaissez-vous l'empreinte carbone de votre site ?

La plupart des sites web émettent beaucoup plus de CO2 qu'on ne le pense. Faites une demande de diagnostic gratuit et découvrez comment passer à l'action.

Résultats envoyés sous 48h · Sans engagement

Comment Audensiel Canada a diminué l’empreinte carbone de son site de -72% ?

Comment Audensiel Canada a diminué l’empreinte carbone de son site de -72% ?

Avril 2025 | UPCYCLE TON SITE | Amélioration continue

Audensiel Canada

Audensiel Canada est une société de conseil québécoise dans l'IT avec des principes engagés, inclusif et éco-responsable.

 

Demande initiale

Lorsqu'Audensiel Canada, m'a sollicité pour l'amélioration de leur site existant, c'était pour 3 raisons évidentes :

  • Transformer leur site actuel pour l'adapter à une nouvelle charte graphique (celle de la nouvelle entreprise à laquelle il appartiennent désormais, dans le cadre d'un rachat de leur entreprise) ;
  • Restructurer le style graphique des pages et améliorer l'architecture d'informations des pages pour correspondre davantage aux codes de la nouvelle société ;
  • Diminuer l'empreinte carbone du site pour s'inscrire pleinement dans leur démarche RSE. 

Leur demande : #ArchitectureInfos #EmpreinteCarbone #CharteGraphique

Mon analyse et approche

J'ai basé mon accompagnement sur 3 axes clés pour résoudre ses enjeux.

Adaptation de la charte graphique

Le site de base utilisait une tout autre charte graphique. Il a donc fallut adapter la nouvelle aux standards du web, la rendre plus accessible et éco-responsable afin de l'appliquer sur le site web (couleurs, typographies, icônes, etc).

Amélioration continue et progressive

Définir une feuille de route claire sur plusieurs semaines afin de réaliser tous les changements et optimisations progressivement, un pas après l'autre, sans jamais mettre leur site multilingue en maintenance.

 

Optimiser chaque aspect du site pour l'alléger au max

Chaque image, typographie, élément graphiques, pages, etc a été retravaillé et optimisé pour être le plus léger possible et donc le moins énergivore possible une fois sur le site. C'est ce qui a permis de réduire autant l'empreinte carbone du site.

Guide de style web

Éthique, éco-responsable et accessible.

Un site qui a été upcyclé bien plus qu'au niveau visuel

Voici l'évolution des scores du site de Audensiel Canada avant et après les améliorations en continue effectuées sur leur site.

Performance

Sur mobile le site est passé de 82 à 86/100, soit une augmentation de 4 points et sur desktop, de 88 à 92 (+4 pts). Même si sur desktop ce site est passé au "vert", il lui reste encore du travail à effectuer sur mobile pour passer au seuil de 90 pour devenir un "bon score".

U

SEO

Le site obtient un score (en moyenne générale) de 100/100*. Un excellent score.

Accessibilité

Le site a un score de 94/100* en moyenne lui permettant d'être un site déjà bien en terme d'accessibilité.

Écologie

Le site a été éco-conçu, il est passé d'une note de D à C, n'émettant plus que 0,11gCO2 en moyenne par page vue, soit 72% d'émissions carbones de moins qu'avant (0,40gCO2). Une progression énorme.

Pari réussi ! Puisque la nouvelle charte graphique est bien en place et que l'empreinte carbone du site a diminué de 72%

Un score d'éco-conception (comme celui d'Eco-Index) de C, est considéré comme un bon score, d'autant plus que le site d'Audensiel Canada est plutôt "imposant" car c'est un site multilingue, donc plus lourd qu'un simple site "vitrine" d'une langue. En effet, les scores d'éco-conception d'un site sont à mesurer, évaluer en fonction du type de site que l'on analyse : vitrine, e-commerce, webzine, one page, multi-pages, etc. En l'occurence, il est beaucoup plus "facile" d'obtenir un score de A+ sur un site one page que sur un site e-commerce et si ce dernier obtient une note de C, il sera considéré comme très bien. 

D'ailleurs, il n'y a pas que le score d'éco-conception qui compte pour évaluer l'éco-responsabilité d'un site, il y a également son empreinte carbone, son poids et bien d'autres paramètres. Par exemple, si j'analyse ne serait-ce que la page d'accueil du site d'Audensiel Canada sur Digital Beacon sur ces critères, on se rend compte qu'il obtient une excellente note de A+. Retenez que ce qui compte, c'est de maintenir les bonnes pratiques dans le temps et de continuer un peu chaque mois à le rendre plus performant, éthique et éco-responsable. 

Les scores présentés ci-dessus représentent une moyenne globale pour l'ensemble des pages du site. Ils ont été calculé avant la refonte puis après la mise en ligne du site (mai 2025). La performance, le SEO et l'accessibilité ont été calculé avec Page Speed Insights et l'aspect écologique avec Eco-Index et Website Carbon. Si tu veux connaître ma méthode de calcul tu peux lire mes articles ou pour calculer toi-même les scores de ton propre site tu peux faire ce petit bilan express gratuit et utiliser mon guide.

 

*Nous n'avions pas effectué le calcul avant les optimisations sur l'ensemble des pages du site, donc je ne peux pas toujours le comparer à l'ancien site dans ce cas précis.

Toi aussi, comme Audensiel Canada, tu aimerais upcyclé ton site prochainement ?

Mon calendrier reste ouvert si tu souhaites me booker pour me parler de ton projet. Ce sera avec plaisir !

Aperçu du projet

Audensiel Canada avait besoin d'un site à l'image de l'entreprise qui l'avait racheté, plus performant, éthique et éco-responsable. Il y avait une vrai volonté d'améliorer l'existant sans tout envoyer valser, en capitalisant sur ce qui fonctionnait déjà très bien sur l'ancien site : contenu, photos, SEO, offres, etc.

C'est d'ailleurs ce qui a permis d'effectuer une simple amélioration de leur site en continue pour l'upcyclé, lui donner une seconde vie, plutôt que de tout refaire de zéro. En effet, si leur demande avait été de changer de builder WordPress, de thème, de contenus textes, avec des nouvelles offres, je les aurais davantage orienté vers un upgrade de leur site web, pour le refondre complètement. Je te laisse découvrir les axes clés sur lesquels nous avons agis pour qu'iels puissent obtenir un site plus performant, éthique et éco-responsable.

01

Accessibilité

Audensiel Canada venait d'obtenir une nouvelle identité de marque, dont ils devaient s'imprégner : logo, couleurs, typographies. Je suis donc parti de leur nouvelle charte graphique pour l'appliquer à leur ancien site web. Néanmoins une charte graphique print est rarement adaptée aux standards du web.

Alors, j'ai légèrement ajusté certains codes graphiques afin de les aligner non-seulement à leurs valeurs éco-responsables, mais aussi à leurs valeurs humaines en la rendant plus accessible aux personnes en situation de handicap. L'enjeu dans ces cas-là est surtout d'avoir des typographies assez lisibles et web et de s'assurer du bon contraste de couleurs entre chaque texte et son arrière plan. Tout a donc été testé pour répondre à ces normes d'accessibilité web.

Livrable : Guide de style web et accessible

02

Mise en page

Ce n'est pas parce qu'un site est éthique et éco-responsable qu'il doit être vide et fade. Il est tout a fait possible de jouer avec la mise en page et d'y apporter de la couleur. J'ai notamment apporté du dynamisme à sa structure de page en ajoutant des zones en léger "biais" avec de légers dégradés, j'ai également joué avec les submarks (éléments graphiques de la marque, comme des tampons, voir le bas de page) pour apporter un côté destructuré et personnel, unique. Tout n'a pas besoin d'être linéaire, ce n'est qu'une question de dosage.

Livrable : Maquettes graphiques et intégration sur WordPress

03

Traitement des images et référencement naturel (SEO)

Les images ont toutes été optimisé pour le site :

  • re-cadrage des images dans leur taille (dimensions) réelle d'affichage sur le site
  • ré-export et ré-import de chaque image au bon format, notamment en utilisant le format d'images le plus léger pour le web (WebP),
  • et enfin compression de ces dernières.

De plus la balise alt de chaque image a été renseigné afin de faciliter la lecture des images du site aux personnes non-voyantes, utilisant des lecteurs d'écrans ou encore en cas de mauvaises connexion internet (et oui, y en a qui habite en zone rurale). Un combo gagnant, puisque cette balise alt, une fois renseignée, favorise aussi le référencement naturel du site.

Astuce éco-responsable

Pour limiter encore plus l'impact de chaque image, il y a quelques astuces à connaître. En voici une.

Là où tu penses qu'il y a 8 images importées sur le site, il y a en réalité 2 images l'une en dessous de l'autre. En effet, il est moins lourd d'importer 2 images légères que 8 petites images légères car chaque image ajouté sur ton site génère aussi du poids au niveau de son stockage dans ta base de données par exemple.

En plus, cela simplifie l'affichage sur mobile et entraîne une meilleure expérience pour l'utilisateur·rice car au lieu d'afficher chaque image l'une en dessous de l'autre, l'utilisateur verra une grille de 8 images.

DIAGNOSTIC OFFERT

Un regard d'experte sur ton site, gratuitement

Je t'offre un mini-audit express de ton site existant : empreinte carbone, accessibilité, performance. Tu repars avec des pistes concrètes, sans jugement, pour passer à l'action comme bon te semble.

DIAGNOSTIC GRATUIT

Connaissez-vous l'empreinte carbone de votre site ?

La plupart des sites web émettent beaucoup plus de CO2 qu'on ne le pense. Faites une demande de diagnostic gratuit et découvrez comment passer à l'action.

Résultats envoyés sous 48h · Sans engagement

Ah oui ! J'oublié... Voici ce qu'Audensiel Canada en a pensé

Pour vous donner une petite idée.

Merci pour le site d’Audensiel Canada, ton upcycling était de taille. Merci pour ce joli travail. ”

Julia Roubineau, chargée de communication chez Audensiel Canada

 

Si tu as aimé le site d'Audensiel Canada,
tu devrais également adorer découvrir celui-ci...

Image représentant le site Margoo

Comment la charte graphique de Margoo a t’elle été adapté pour rendre leur site plus accessible (ainsi que tous leurs supports de communication) ?

Exemple du revamp de la charte graphique de Margoo, avant et après

Sobriété numérique

Donner une seconde vie à son site web rapidement et facilement, c'est possible !

Je t'invite à lire quelques-uns de ces articles, qui sont les préférés des abonnés à ma newsletter l'ALTERNAVITE.

→ Est-ce bien utile d’avoir des couleurs éco-responsable sur son site ?

→ La méthode 80/20 : Comment l’appliquer à la conception de ton site pour le rendre éthique et éco-responsable

→ Ma routine d’analyse de site : comment je mesure l’impact réel de ton site web

Comment les Noces d’Ella a obtenu un site qu’elle partage fièrement car il est totalement aligné avec ses valeurs et engagements éthiques et éco-responsables ?

Comment les Noces d’Ella a obtenu un site qu’elle partage fièrement car il est totalement aligné avec ses valeurs et engagements éthiques et éco-responsables ?

Novembre 2024 | CRÉÉ TON SITE | Création sur-mesure

Les Noces d'Ella

Gaëlle Debas, de chez Les Noces d'Ella, est wedding planner éco-responsable. Elle accompagne les futur·e·s marié·e·s dans leur mariage engagé partout en France.

Demande initiale

Lorsque Les Noces d'Ella m'a contacté pour la création sur-mesure de son site web, c'était pour 1 raison évidente :

Lancer son activité en bonne et due forme, grâce à un site web qui reflète pleinement ses valeurs et engagements.

Les Noces d'Ella avait même travaillé en amont son identité visuelle avec une graphiste éco-responsable avec qui j'ai eu l'occasion d'échanger en amont de la création du site web pour s'assurer du bon respect des bonnes pratiques web au moment de la création de la charte graphique : choix de typographies adaptées pour le web et combinaisons de couleurs éco-responsables et accessibles.

Sa demande : #esthétisme #valeurs #ImageDeMarque

Mon analyse et approche

J'ai basé mon accompagnement sur 3 axes clés pour lui offrir un site à son image.

Structure et squelette de page validé en amont

Pour s'assurer de poser les bons éléments au bon endroit et de les hiérarchiser stratégiquement, nous avons d'abord bâti le squelette du site (wireframes). Cela nous a permis de poser les bases sans se soucier du superflus et en limitant les biais subjectif du j'aime ou j'aime pas.

Maquettes graphiques mobile-first

Leur audience naissante était surtout sur Instagram (sur mobile). Donc il leur fallait une version mobile du site rapide et performante afin de générer du trafic sur le site et attirer des client·e·s potentiel·le·s. Je devais donc optimiser le site en pensant d'abord mobile.

 

Familiarisation avec l'outil WordPress

Les Noces d'Ella ne connaissait absolument pas l'outil WordPress et craignait que ce soit trop complexe à manier. Je devais donc leur apprendre à l'utiliser en toute sérénité.

 

Guide de style web

Éthique, éco-responsable et accessible.

Actions réalisées

Pour rendre le site plus éthique, éco-responsable et accessible.

Design éthique

Structuration stratégique des pages, respect des principes d'éco-conception et mise en page accessible.

Optimisations

Suppression des éléments inutilisés, nettoyage des scripts, limitation des requêtes, compression du code et des images.

Configuration WordPress

Choix d'un builder et thème pas trop lourd (Divi) tout en restant simple à manier pour des novices sur WordPress.

“Je suis tellement heureuse du résultat...

Gaëlle Debas, Les Noces d'Ella.

Résultat ? Un site qui a été créé pour refléter bien plus qu'un univers visuel

Voici les scores du site de Les Noces d'Ella : après la création et mise en ligne de son site.

Performance

Le site obtient une note de 91/100 sur mobile et sur desktop de 100/100

U

SEO

Le site a un score SEO (technique) de 100/100.

Accessibilité

Le site obtient une note d'accessibilité de 91/100.

Écologie

Le site a été éco-conçu, il obtient le score de B, émettant 0,2gCO2 en moyenne par page vue. Soit l’équivalent de 20 mètres en vélo à assistance électriquepar personne qui consulte une page.

Pari réussi ! Puisque le site reflète pleinement les valeurs éthiques et éco-responsables de sa fondatrice

Au-delà d'organiser des mariages éco-responsables et d'avoir fait le parti-pris de réaliser un site éco-responsable. Les Noces d'Ella a également fait le choix d'un site plus accessible, en permettant notamment au personnes en situation de handicap de mieux naviguer, comprendre et utiliser son site. Et ce n'est pas la seule action inclusive mise en place, je t'en reparle plus bas.

Les scores présentés ci-dessus représentent une moyenne globale pour l'ensemble des pages du site. Ils ont été calculé 3 mois après la mise en ligne du site (septembre 2024). La performance, le SEO et l'accessibilité ont été calculé avec Page Speed Insights et l'aspect écologique avec Eco-Index et Website Carbon. Si tu veux connaître ma méthode de calcul tu peux lire mes articles ou pour calculer toi-même les scores de ton propre site tu peux faire ce petit bilan express gratuit et utiliser mon guide.

Toi aussi, comme Les Noces d'Ella, tu aimerais obtenir ou adopter ton propre site prochainement ?

Mon calendrier reste ouvert si tu souhaites me booker pour me parler de ton projet. Ce sera avec plaisir !

Aperçu du projet

Lorsque Gaëlle de chez Les Noces d'Ella m'a sollicité pour la création de son site web éthique et éco-responsable, j'ai été enchantée. 

WordPress, mais surtout le monde du web lui était totalement inconnu. Elle n'y avait jamais mis les pieds. Alors elle s'est jeté dedans et elle y a vite pris goût. Elle y a pris goût tout simplement parce que tout était à son image. Quoi de plus plaisant que d'utiliser des outils à son image, de partager des choses dont on est fière, d'utiliser pleinement un site qui reflète notre activité / business et surtout qui transporte nos valeurs et engagements. Je te laisse découvrir les axes clés sur lesquels nous avons agis pour qu'elle puisse obtenir un site performant, éthique et éco-responsable.

01

Inclusion

Les Noces d'Ella avait déjà sa propre identité de marque : logo, submarks, couleurs, typographies. Je suis donc parti de sa charte graphique existante pour la création de son site. Elle avait également organisé un shooting photo en partenariat avec d'autres prestataires de mariages éco-responsables afin d'obtenir pour son site des photos reflétant également son univers graphique.

Nous avons donc utilisé ces photos mais pas que... Nous avons également cherché de nombreuses autres photos qui se marierait bien avec son univers graphique en terme de ton et nuances de couleurs afin que tout un chacun se retrouve et se sente concerné sur le site.

Il était important pour les Noces d'Ella de rendre le site inclusif, non pas que dans l'aspect rédactionnel, mais également visuel (autant dans les photos utilisées, que dans les pictogrammes non genrés utilisés)

Livrable : Dossier de photos libres de droits inclusives

LIRE AUSSI : 5 banques d’images inclusives et gratuites pour ton site web

02

Mise en page

Ce n'est pas parce qu'un site est éthique et éco-responsable qu'il doit être vide et fade. Il est tout a fait possible de jouer avec la mise en page et d'y apporter de la couleur. J'ai notamment apporté du dynamisme à sa structure de page en ajoutant des effets de "vagues", j'ai également joué avec les submarks (éléments graphiques de la marque, comme des tampons) pour apporter un côté destructuré et personnel, unique. Tout n'a pas besoin d'être linéaire, ce n'est qu'une question de dosage.

Livrable : Maquettes graphiques accessibles, inclusives et éco-conçu

03

Traitement des images et référencement naturel (SEO)

Les images ont toutes été optimisé pour le site :

  • cadrage des images dans leur taille (dimensions) réelle d'affichage sur le site
  • export de chaque image au bon format, notamment en utilisant le format d'images le plus léger pour le web (WebP),
  • et enfin compression des ces dernières.

De plus la balise alt de chaque image a été renseigné afin de faciliter la lecture des images du site aux personnes non-voyantes, utilisant des lecteurs d'écrans ou encore en cas de mauvaises connexion internet (et oui, y en a qui habite en zone rurale). Un combo gagnant, puisque cette balise alt, une fois renseignée, favorise aussi le référencement naturel du site.

Astuce éco-responsable

Pour limiter encore plus l'impact de chaque image, il y a quelques astuces à connaître. En voici une.

Là où tu penses qu'il y a 2 ou 3 images importées sur le site les unes à côté des autres, il y a en réalité 1 seule image qui simule une composition de plusieurs images les unes à côtés des autres (comme sur le haut de la page ou dans le bloc "on s'appelle, on en discute ?". En effet, il est moins lourd d'importer 1 image légère que plusieurs images légères car chaque image ajouté sur ton site génère aussi du poids au niveau de son stockage dans ta base de données par exemple.

En plus, cela simplifie l'affichage sur mobile et entraîne une meilleure expérience pour l'utilisateur·rice car au lieu d'afficher chaque image l'une en dessous de l'autre, l'utilisateur·ice les verra côte à côte.

04

Autonomie dans la gestion du site

Et oui, j'allais quand même pas oublier que Les Noces d'Ella est complètement novice sur le web et encore plus sur WordPress. Alors comment j'ai fait pour la rendre complètement autonome au quotidien dans l'usage de son site web ? Plusieurs choses ont été mise en place :

 

  1. Je l'ai "formé" à utiliser son site WordPress de la meilleure façon qu'il soit pour qu'elle puisse continuer de le faire grandir de manière toujours plus éthique et éco-responsable. Je lui ai montré comment faire, tout simplement.
  2. Je l'ai assisté dans ses démarches de modifications, améliorations pendant les 6 mois qui ont suivi la mise en ligne de son site, afin de l'épauler, l'aider et répondre à toutes ses questions.
  3. Pendant ces 6 mois, elle a également bénéficié de deux minis rapports trimestriels d'analyse des statistiques d'usage de son site (pages les plus vues, articles les plus lus, etc), de l'évolution de ses scores (performance, SEO, etc) accompagné de petits conseils pour le continuer à le maintenir bien à jour.

Explorer les autres modèles de sites
performants, éthiques et éco-responsables disponibles à l'adoption

Aucun Résultat Trouvé

La page demandée est introuvable. Essayez d’affiner votre recherche ou utilisez la navigation ci-dessus pour trouver l’article.

Ah oui ! J'oublié... Voici ce qu'elle en a pensé

Pour vous donner une petite idée.

“ Je suis tellement heureuse du résultat : un site qui reflète parfaitement mon univers, mes valeurs et ma personnalité

Un immense merci à Coralie ! Je suis tellement heureuse du résultat : un site qui reflète parfaitement mon univers, mes valeurs et ma personnalité. Dès le début, tu as su comprendre ma vision et la traduire.

J’ai adoré travailler avec toi : tu as été force de proposition, toujours à l’écoute, et tellement bienveillante tout au long du projet.

Gaëlle Debas, fondatrice de Les Noces d'Ella

Si tu as aimé le site de Les Noces d'Ella,
tu devrais également adorer découvrir celui-ci...

Image représentant le site Studio Floriane

Comment la refonte totale du site de Studio Floriane a permis de presque tripler son score de performance mobile ?

Image représentant la version mobile du site Studio Floriane

Sobriété numérique

Donner une seconde vie à son site web rapidement et facilement, c'est possible !

Je t'invite à lire quelques-uns de ces articles, qui sont les préférés des abonnés à ma newsletter l'ALTERNAVITE.

→ 1 exercice simple pour définir efficacement les contenus et fonctionnalités qui te permettront de créer ton site vitrine éthique et éco-responsable

→ Convertir des clients aux valeurs éthiques et éco-responsables en définissant la bonne mission et les bons objectifs pour ton site

→ Identité de marque éthique et éco-responsable : 1 exercice simple pour bâtir celle de ton entreprise et préparer la création de ton futur site