Juillet 2024 | UPGRADE TON SITE | Refonte totale
Studio Floriane
Floriane Brault, du Studio Floriane, est une graphiste éco-responsable indépendante et engagée, qui accompagne des entrepreneur·e·s partout en France.
Demande initiale
Lorsque Studio Floriane m’a contacté pour la refonte totale de son site web, c’était pour 3 raisons évidentes :
- Reprendre le contrôle de son site : afin de ne plus être dépendante d’un développeur pour chaque changement qu’elle voulait réaliser dessus.
- Présenter sa nouvelle offre et mettre à jour les anciennes dans un style plus actuel et aligné avec sa charte graphique et ses valeurs engagées.
- Optimiser sa version mobile : pour que son audience principale y ait accès directement depuis Instagram sans difficulté.
Sa demande : #autonomie #esthétisme #mobile-friendly
Mon analyse et approche
J’ai basé mon accompagnement sur 3 axes clés pour résoudre ses enjeux.
Familiarisation avec l’outil WordPress
Le Studio Floriane n’était pas à l’aise avec WordPress et craignait le moindre changement, par peur de tout « casser ». Je devais donc leur apprendre à l’utiliser en toute sérénité.
Adaptation de la charte graphique
Le site de base n’exploitait pas sa charte graphique à son plein potentiel. Il fallait la mettre en valeur sur tout le site, tout en restant accessible (couleurs, typographies, submarks, etc).
Maquettes graphiques mobile-first
Leur audience est surtout sur Instagram (sur mobile). Sauf que la version mobile du site était lente et compliqué faisant perdre du trafic et des client·e·s potentiel·le·s. Je devais donc optimiser le site en pensant d’abord mobile.
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
Changement de builder et de thème, pour passer son site sur Divi, simple à manier pour des novices sur WordPress.
“Wordpress c’était un monde obscur pour moi et c’est devenu presque un jeu d’enfant !”
Floriane Brault, Studio Floriane
Résultat ? Un site qui a été upgradé bien plus qu’au niveau visuel
Voici l’évolution des scores du site de Studio Floriane : avant et après la refonte totale de son site.
Performance
Sur mobile le site est passé de 34 à 97/100, soit une augmentation de 63 points et sur desktop, de 90 à 98 (+8 pts).
SEO
Le site est passé d’un score de 83 en moyenne à 100/100, soit une augmentation de 17 points.
Accessibilité
Le site est passé de 90 à 94 (+4 pts) lui permettant ainsi de passer d’un site déjà bon en terme d’accessibilité à très bon.
Écologie
Le site a été éco-conçu, il est passé d’une note de C à B, émettant 0,29gCO2 en moyenne par page vue, soit 22% d’émissions carbones de moins qu’avant (0,37gCO2).
Pari réussi ! Puisque la performance du site sur mobile a presque triplée* et le SEO a atteint son score maximum.
*pour tripler il fallait atteindre 102 (mais le max c’est 100), donc à 97, pour le chouïa manquant, j’estime que c’est gagné…
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 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 Studio Floriane, tu aimerais upgrader 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.
Ma rencontre avec Studio Floriane, c’était une discussion tout a fait informelle au départ. Nous savions qu’on s’intéressait toutes les deux à l’éco-responsabilité et qu’on en avait fait notre spécialité. Chacune dans nos domaines d’expertises, qui sont pour le coup, complémentaires.
WordPress était pour elle un monde obscur, un monde qu’elle n’avait jamais tenté d’affronter tant elle en était effrayé. Alors quand le défi s’est présenté à moi de lui permettre de se réconcilier avec WordPress et d’avoir un site dont elle serait l’unique gestionnaire dans lequel elle pourrait TOUT modifier, personnaliser, changer, j’ai tout de suite accepté.
C’est d’ailleurs ce qui a nécessité d’effectuer une refonte totale de son site pour l’upgrader vers un niveau supérieur (notamment en le passant intégralement sur WordPress car de base, il était sur un autre CMS). En effet, si sa demande avait été d’optimiser simplement le SEO de son site et ses versions mobiles, je l’aurais davantage orienté vers un upcycling de son site existant, pour l’améliorer progressivement, en continue. Je te laisse découvrir les axes clés sur lesquels nous avons agis pour qu’elle puisse obtenir un site plus performant, éthique et éco-responsable.
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).
04
Autonomie dans la gestion du site
Et oui, j’allais quand même pas oublier la demande initiale de Studio Floriane. Alors comment j’ai fait pour la rendre plus autonome au quotidien dans l’usage de son site web ? Plusieurs choses ont été mise en place :
- D’abord, je lui ai donné les accès à son site (ça paraît tout bête, mais elle ne les avait pas avec l’ancien)
- Puis, je l’ai « formée » à 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ée 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.
“ WordPress c’était un monde obscur pour moi. Et grâce à elle, c’est devenu presque un jeu d’enfant ! ”
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, et je vais essayer de résumer ça en quelques lignes.
J’ai fait appel à Coralie pour créer mon site internet, et en toute transparence, WordPress c’était un monde obscur pour moi. Et grâce à elle, c’est devenu presque un jeu d’enfant !
Elle a pris le temps de tout m’expliquer avec patience et clarté, rendant l’aventure agréable et enrichissante. Dès le début, elle a su capter l’essence de mon identité de marque et la traduire avec une précision incroyable dans chaque détail du site. Tout reflète parfaitement mes valeurs, ce qui est vraiment essentiel pour moi. Elle a même anticipé des besoins que je n’avais pas imaginés.
Sans parlé de sa réactivité comme de sa patience, vraiment ça fait toute la différence. Aujourd’hui, j’ai un site internet éthique et éco-responsable qui me ressemble à 100%. Je ne pourrais pas être plus ravie du résultat.
Merci encore, Coralie, pour cette collaboration tu as été une reine du début à la fin. Si aujourd’hui ou demain vous avez besoin d’un site internet éthique, éco-responsable, qui fonctionne avec simplicité, je vous recommande les yeux fermé Coralie !
