Faire une refonte de mon site web WordPress, pourquoi, quand, comment ?
« Il est temps de faire une refonte de mon site web WordPress ! » Si vous vous ĂȘtes dĂ©jĂ dit ça, câest que vous en avez dĂ©jĂ conscience. Et câest bien⊠Un site internet Ă©volue, comme tout ĂȘtre humain, produit, envie… Parce que votre activitĂ© a changĂ©, ou vos besoins sont plus ciblĂ©s, car il nâest pas ergonomique et est illisible sur smartphone, parce que vous en avez assez de voir ces couleurs flashies et images dans tous les sens, etcâŠ
En d’autres termes, chacun a ses propres raisons. Et toutes sont valables. Voyons pourquoi.
Etape 1 : « le cahier des charges refonte site web », telle est ma mission
Faire une refonte de son site wordpress ne sâimprovise pas. Il faut, pour que la refonte soit efficace, établir un cahier des charges de son site qui permettra de lister les fonctionnalitĂ©s, les souhaits graphiques, les amĂ©liorations, la structure, les objectifs.
Posez-vous les bonnes questions, c’est-Ă -dire :
- Pourquoi modifier le design de mon site internet ?
Vers quoi aller ? Ai-je des rĂ©fĂ©rences de sites qui mâattirent visuellement ? Des couleurs sobres ou dĂ©gradĂ©s modernes ? Des typographies bĂąton ou Ă empattement ? - De quelles fonctionnalitĂ©s vais-je avoir besoin ?
Un module de newsletter ? Lâajout de boutons vers du contenu spĂ©cifique ? Mettre en avant mon numĂ©ro de tĂ©lĂ©phone ? Avoir un formulaire de contact plus complet pour Ă©tablir des devis ? Un agenda qui permettra dâannoncer mes Ă©vĂ©nements ? Un portfolio avec filtre pour prĂ©senter mes rĂ©alisations ? Une partie blog pour faire vivre mon site ? Un module de e-commerce pour prĂ©senter ma boutique en ligne et proposer des produits Ă la vente ? - Quel est mon client type ?
Homme ? Femme ? 18-30 ans / 30-45 ans / 45-60 ans ? Particuliers ? Entreprises ? Mon secteur géographique ? - Quel est mon objectif premier ?
Etre bien positionné dans les moteurs de recherche ? Générer des demandes de contact via mon formulaire ? Présenter simplement et en toute transparence ma petite entreprise ou ma nouvelle activité ? Faire connaitre mon association et développer mon réseau de partenaire ? - Ai-je bien listé mes différentes rubriques ?
Mon contenu est-il organisĂ© ? Ai-je fais en sorte que lâutilisateur clique le moins de fois possible pour accĂ©der au contenu quâil cherche ?
Pour rĂ©sumer, ne nĂ©gligez pas cette Ă©tape. Une fois rĂ©alisĂ©e, votre « cahier des charges refonte site web » sera bien complet et il vous sera beaucoup plus facile de rĂ©aliser dans les rĂšgles de lâart la refonte de votre site wordpress.
Etape 2 : « la refonte graphique de mon site wordpress », euh oui mais je ne sais pas dessinerâŠ
En fait, vous nâavez pas besoin de dessiner, sauf si vous souhaitez crĂ©er des pictogrammes sympas pour illustrer quelques rubriques de votre site web.
Ce qui est important est de définir les couleurs de votre site wordpress ainsi que les typographies.
Les couleurs
Si vous possédez déjà un logo, vous pouvez utiliser les couleurs de celui-ci (pas plus de 3 couleurs différentes) ou éventuellement ses couleurs complémentaires. Ou encore choisir la couleur principale de votre logo avec sa couleur complémentaire qui permettra la mise avant des éléments type boutons par exemple.
Cercle chromatique pour votre refonte de site
Saviez-vous que chaque couleur a sa propre signification ? En France (car la signification est différente entre les pays), voici quelques exemples :
Les couleurs fréquemment utilisées :
BLEU (en passant, c’est la couleur prĂ©fĂ©rĂ©e des Français ;)) :
- le ciel, lâeau, la mer, lâespace, lâair et les voyages
- la vĂ©ritĂ©, la confiance, la loyautĂ©, lâintelligence et la sĂ©curitĂ©
- merveilleux, libertĂ©, rĂȘve, jeunesse, mais aussi mĂ©lancolie
- domaines des technologies, informatique, aĂ©ronautique, domaine du voyage et de lâĂ©vasion, cĂŽtĂ© corporatif, produits congelĂ©s et rafraĂźchissants
ROUGE :
- amour, chaleur, sensualité et passion
- le danger, la révolte et le sang
- produits destinĂ©s Ă combattre le feu, produits Ă connotation virileâ, produits de consommation achetĂ©s impulsivement, lâemballage alimentaire, avertissements et les interdictions, attirer lâattention sur un Ă©lĂ©ment prĂ©cisâ: rabais, promotion
JAUNE :
- chaleur et lumiĂšre
- bonne humeur et joie de vivre, logique, le pouvoir personnel et lâhumour
- la traĂźtrise, le mensonge, la tromperie
- tourisme et des voyages dans des destinations soleil, agroalimentaire, assurances et du crĂ©dit, touche de gaietĂ© et dâhumanisme
VERT :
- espérance, chance, calme et repos
- croissance, santé, fraßcheur et nature, stabilité et équilibre
- lâĂ©chec et lâinfortune
- domaines reliés à la nature et au plein air, cÎté environnemental et écologique, produits de nettoyage, domaine des médecines alternatives
Les autres couleurs :
VIOLET :
- dĂ©licatesse, douceur et rĂȘve
- magie, fantastique, imaginaire, sérénité et spiritualité, prospérité et noblesse
- mélancolie, solitude, tristesse et jalousie
- spirituel et la croissance personnelle, aspect artistique (arts, culture et musique), imaginaire et fantastique, une sensation dâapaisement
ORANGE :
- lâĂ©nergie, lâaction, soleil, la chaleur, le feu, la lumiĂšre et lâautomne
- valeurs de communication et de crĂ©ativitĂ©, joie, du plaisir et de lâoptimisme
- vitalité, force et endurance
- sport, de la mise en forme et du fitness, divertissement et des communications, vente et de la mobilité, dangers dans de nombreux domaines, créativité
ROSE :
- tendresse, douceur et bonheur
- romantisme, fĂ©minitĂ© et compassion, lâenfance
- confiseries et des pĂątisseries, domaine de lâenfance, loisirs crĂ©atifs, comme le dessin, la peinture, le tricotâŠ, produits cosmĂ©tiques et de beautĂ© pour femmes
TURQUOISE :
- pureté et fluidité, cÎté rafraßchissant et thérapeutique
- rĂ©gĂ©nĂ©rescence, les besoins dâĂ©volution et de transformation
- besoin de changement
- le monde aquatique, domaine thérapeutique, produits hygiéniques, suggérer la pureté
BRUN :
- terre, bois, chaleur et confort
- douceur et rappelle lâaspect brut et le naturel
- milieu culturel et de lâhistoire, domaine culinaire (chocolat et cafĂ©), dĂ©veloppement durable et lâĂ©cologie, produits masculins, produits du terroir
Les compléments couleurs :
NOIR :
- mystĂšre, simplicitĂ©, distinction, lâĂ©lĂ©gance, le raffinement et le luxe
- mort, deuil et tristesse, lâobscuritĂ© et le nĂ©ant
- domaine du cinéma, des arts et de la photographie, produits haut de gamme, utile pour provoquer des contrastes, il met en valeur les couleurs qui prennent place à ses cÎtés
BLANC :
- pureté, propreté et perfection, brillance et éclat
- innocence et virginité
- domaine du mariage, la propreté, la netteté, pour accompagner toutes les couleurs, il est un réhausseur de tons, pour apporter des zones de repos visuel
Voici quelques sites utiles pour vos choix de couleurs :
Les polices de caractĂšres
Pour le choix de la typographie, bien entendu, il faut choisir la police en fonction de la police choisie pour votre logo. Pas plus de 2 typographies différentes dans le site.
Par exemple, privilégiez une police plus grande et originale pour les titres et une police lisible en petit pour les textes (de préférence type bùton).
Quelques principes de base :
âą Italique : Il est dĂ©conseillĂ© de mettre un texte continu en italique, car lâeffet de mouvement quâil gĂ©nĂšre rendra la lecture plus ardue en forçant lâoeil Ă dĂ©filer plus vite sur le texte, ce qui crĂ©e un inconfort visuel qui ralentit la lecture.
âą Capitales : Un texte en capitales subira le mĂȘme effet de ralentissement quâun texte en italique. Mais, d’un autre cĂŽtĂ© lâutilisation combinĂ©e de capitales et de bas-de-casse facilite la lecture en apportant des points dâattention lorsquâelle est bien contrĂŽlĂ©e.
âą Interlignage : Lâinterlignage des titres et des textes doit ĂȘtre ni trop serrĂ©, ni trop espacĂ©.
âą CaractĂšre : En gĂ©nĂ©ral, un logo, une publicitĂ© ou un document ne devrait pas comporter plus de deux styles de caractĂšre diffĂ©rents et certainement pas plus de trois. En conclusion, lâemploi de trop de caractĂšres diffĂ©rents oblige lâoeil Ă de nombreux ajustements qui poussent Ă abandonner la lecture.
Voici quelques sites utiles pour vos choix typographiques :
Le choix du design global pour la refonte graphique du site internet
La refonte du design du site internet passe par quelques recherches sur le web. Regardez ce que font vos concurrents. Quelles couleurs et typographies utilisent-ils ? Quels sont les sites que vous aimez ? Pourquoi ?
Il faut penser à aérer le design, gardez toujours du blanc dans vos pages.
Structurez votre design Ă lâaide de grille par exemple. Cela vous permettra dâavoir une mise en page propre et design. Faites attention Ă ne pas faire trop de designs diffĂ©rents sur les pages sous peine de perdre les utilisateurs. Gardez la mĂȘme structure de base et faites des ajustements selon votre contenu.
Quelques sites utiles pour les grilles :
Petite info : les Ă©lĂ©ments importants doivent figurer selon un schĂ©ma prĂ©dĂ©fini sous forme de F (zone oĂč lâoeil est attirĂ© lorsque lâon parcourt une page web).
Les zones chaudes en forme de F
Etape 3 : « Mettre en place les fonctionnalités de mon site wordpress »
Cette Ă©tape est nĂ©cessaire si vous voulez avoir des fonctionnalitĂ©s particuliĂšres Ă proposer sur votre site web. WordPress est un CMS qui fonctionne un peu comme un systĂšme dâexploitation (windows, mac, linuxâŠ) sur lequel on va venir installer des plugins (fonctionnalitĂ©s).
Vous pouvez faire une recherche directement dans WordPress pour trouver le plugin dont vous avez besoin. Attention tout de mĂȘme Ă choisir un plugin qui soit rĂ©guliĂšrement mis Ă jour par le dĂ©veloppeur et compatible avec votre version du WordPress.
Beaucoup de plugins sont gratuits, dâautres proposent des fonctionnalitĂ©s supplĂ©mentaires payantes. Tout dĂ©pend de votre besoin.
A savoir : plus vous mettrez de plugins sur votre site, plus il fera de requĂȘtes et donc plus il sera lent. A utiliser donc avec parcimonie. Surtout nâinstallez que le stricte nĂ©cessaire et testez les plugins pour ne garder que celui qui vous plait le plus.
Quelques extensions utiles (Ă mon sens) :
Formulaire de contact : pour vous contacter
- Contact form 7 : https://fr.wordpress.org/plugins/contact-form-7/
- Ninja Forms : https://fr.wordpress.org/plugins/ninja-forms/
- WPforms : https://fr.wordpress.org/plugins/wpforms-lite/
Sécurité : pour protéger votre site
- Akismet : https://fr.wordpress.org/plugins/akismet/
- Jetpack : https://fr.wordpress.org/plugins/jetpack/
- Sucuri : https://fr.wordpress.org/plugins/sucuri-scanner/
- All in One WP Security : https://fr.wordpress.org/plugins/all-in-one-wp-security-and-firewall/
- Wordfence : https://fr.wordpress.org/plugins/wordfence/
Optimisation : pour accélérer votre site
- Smush : https://fr.wordpress.org/plugins/wp-smushit/
- EWWW Image Optimizer : https://fr.wordpress.org/plugins/ewww-image-optimizer/
- Imagify : https://fr.wordpress.org/plugins/imagify/
- WebP Converter : https://fr.wordpress.org/plugins/webp-converter-for-media/
- Autoptimize : https://fr.wordpress.org/plugins/autoptimize/
Partage / réseaux sociaux : pour partager le contenu de votre site
- Social Share Icons : https://fr.wordpress.org/plugins/ultimate-social-media-plus/
- Social Media Share : https://fr.wordpress.org/plugins/ultimate-social-media-icons/
- Blog2Social : https://fr.wordpress.org/plugins/blog2social/
Newsletter : pour garder un lien avec vos lecteurs
Référencement : pour positionner votre site dans les moteurs de recherche
- Yoast SEO : https://fr.wordpress.org/plugins/wordpress-seo/
- All in One SEO : https://fr.wordpress.org/plugins/all-in-one-seo-pack/
- Rank Match SEO : https://fr.wordpress.org/plugins/seo-by-rank-math/
Ecommerce : pour vendre en ligne
- Woocommerce : https://fr.wordpress.org/plugins/woocommerce/
Etape 4 : « Préparer ma structure, mes pages, mon contenu pour la refonte »
Cette partie est à mon avis la plus difficile ;( mais la plus importante. La refonte de votre site wordpress ne doit pas servir à rien. Le contenu est la priorité.
Le menu
PremiÚrement, définissez votre menu. Par exemple, je fais un site pour mon restaurant. Je pourrai avoir comme menu du site :
- Accueil
- A propos
- La carte des menus
- Actualités
- Contact
En bref, avoir 5 items dans le menu est bien. Surtout, ne mettez pas 10 items dans le menu !
DeuxiĂšmement, si vous avez plus de contenu Ă proposer, pensez Ă faire des sous-menus.Â
Par exemple :
- La carte des menus (non cliquable)
- Carte du moment
- Menu de printemps
- Nos plats d’Ă©tĂ©
- Manger bio en automneÂ
- Bien manger en hiver
Les liens vers les mentions légales, CGV, politique de confidentialité⊠se trouveront dans le footer (bas du site internet qui se retrouve sur toutes les pages du site).
Vous pourrez également ajouter vos réseaux sociaux, inscription à la newsletter par exemple, dans le footer également.
La refonte de mes pages avec une structure cohérente SEO
En gĂ©nĂ©ral, une page devrait atteindre au minimum 350 mots. Les titres et sous-titres permettent de structurer votre contenu pour lâutilisateurs et les moteurs de recherche. Ils doivent servir de sommaire en quelque sorte. Si on ne lit que les titres et sous-titre, nous devons comprendre de quoi parle votre page.
- titre 1 (h1) : information la plus importante (1 seul h1 par page, doit inclure le mot-clé principal, ne pas excéder 70 caractÚres)
- niveau de titre 2 (h2) : information moins importante que h1 mais plus importante que h3Â
- titre 3 (h3) : information moins importante que h2Â
En bref, définissez un mot clé principal par page et quelques mots clés secondaires. Travaillez votre contenu en fonction de ces mots.
Meta description : Dans WordPress, avec lâextension Yoast SEO par exemple, vous pouvez dĂ©finir la meta description. UtilisĂ©e par les moteurs de recherche elle permet Ă lâinternaute dâen savoir un peu plus sur le contenu de votre page. La description doit inclure le mot-clĂ© principal et doit comporter environ 160 caractĂšres.
Images :Â Lorsque vous placez des images au sein de votre page, nâoubliez pas de renseigner les balises ALT et TITLE. Dans WordPress, lorsque vous uploadez une image, sur la colonne de droite, vous pouvez remplir ces champs disponibles. Ils permettent aux moteurs de recherches mais aussi aux non-voyants de comprendre vos images grĂące Ă ces descriptifs.Â
Liens entre vos pages :Â Les liens internes vers dâautres pages de votre site influencent sur la lecture de votre contenu. Placez donc au moins un lien vers une autre page de votre site sur chaque page.
Pour conclure, gardez en tĂȘte votre objectif principal. Si le but du site est de rĂ©colter des demandes de contact, placez aux endroits stratĂ©giques un bouton vers votre page contact.Â
Etape 5 : « accompagnement refonte site internet »
Travailler une refonte de site web WordPress demande du temps. Si vous préférez optimiser votre temps sur votre véritable savoir faire, vous pouvez bien sûr déléguer cette tùche.
Vous avez deux solutions.
La premiĂšre : faire appel Ă une agence web pour la refonte de site internet. La deuxiĂšme : faire appel Ă un webmaster freelance.
Sachez que les prix peuvent ĂȘtre trĂšs variables entre une agence et un freelance. Et parfois mĂȘme entre 2 agences ou 2 freelances. GĂ©nĂ©ralement, les freelances sont moins chers car ils travaillent seuls et ont moins de charges.
Renseignez-vous sur leurs prestations et les avis donnĂ©s par leurs clients. Demandez plusieurs devis pour comparer les offres et leurs contenus.Â
- La refonte du site sera t-elle optimisée en terme de poids, structure, versions responsives, sécurité, etc ?
- Serez-vous formé à la mise à jour de votre site wordpress ?
- Aurez-vous tous les codes dâaccĂšs et un compte administrateur pour ĂȘtre 100% autonome ?
Quelques exemples de refonte de site web
Cas n°1 : Paris Parfums Lourdes


Voir la refonte du site web sous WordPress
Exemple n°2 : Photovolt


Voir la refonte du site internet Photovolt
Dernier exemple : Un temps pour lâaccueillir


Voir la refonte wordpress du site web