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.
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 électrique, par 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 créer ton site prochainement ?
Aperçu du projet
CMSWordpress - Divi
Hébergement du siteO2Switch : un hébergeur local et français, qui utilise des énergies décarbonnés.
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 :
- 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.
- 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.
- 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.
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.
