Étape 1 : Le Cahier des Charges
Pourquoi faire une Refonte ?
Comme vous le savez sûrement, un site vieillissant peut nuire à votre image de marque et à la crédibilité de votre entreprise. Motivé par des facteurs tels que l'évolution rapide et constante des nouvelles technologies et des comportements des utilisateurs, la “refonte” est une étape essentielle dans la vie d'un site web et peut également accompagner des changements dans la stratégie commerciale de votre société comme l'introduction de nouveaux produits / services par exemple.
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a77b090a4b2a1786a249fd_airbnb-avant-refonte.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a77b0923dc1441d2f9536d_airbnb-apre%CC%80s-refonte.png)
En changeant de logo, en effectuant une refonte du site web avec une interface plus intuitive, une amélioration de la recherche, une mise en avant des photos avec une qualité supérieure et un design responsive et plus fluide sur mobile, ainsi qu'une nouvelle stratégie de contenu. Airbnb a vu ses réservations augmenter à hauteur de 260% sur mobile renforcer son image de marque et le nombre d'hôtes est passé de 550 000 en 2013 à plus de 1 million en 2014.
Si vous voulez l'exemple d'une refonte réussie, prenons l'exemple d'Airbnb qui, dans un désir de développer la plateforme, a entrepris une refonte en 2013. Voici les changements qui ont été apportés.
- Changement de logo
- Refonte du site web avec une interface plus intuitive
- Amélioration de la recherche
- Mise en avant des photos avec une qualité supérieure
- Design responsive et plus fluide sur mobile
- Nouvelle stratégie de contenu
Résultats :
- Augmentation des réservations de 260% sur mobile
- Renforcement de l'image de marque
- Nombre d'hôtes passé de 550 000 en 2013 à plus de 1 million en 2014
ℹ️ Résultats : Suite à cette refonte stratégique, Airbnb a littéralement explosé. Les réservations sur mobile ont connu une hausse de 260%, l'image de marque s'est considérablement renforcée et l'application a vu son nombre d'utilisateurs presque doubler en seulement un an.
Le Cahier des charges d’une Refonte
Le cahier des charges est le pilier d'une refonte réussie. C'est votre feuille de route, celle qui va définir de manière détaillée les objectifs, les besoins et toutes les caractéristiques techniques de votre projet. Il est votre guide pour que vous puissiez définir les étapes et vous projeter dans le temps et surtout définir un budget.
Nous vous dévoilerons un peu plus d'informations liées au cahier des charges d’une refonte dans un article dédié, mais voici un condensé des points essentiels :
Définir les objectifs de sa Refonte
La partie la plus importante du cahier des charges est définir ses objectifs. Voici une version simplifiée d'exemples d'objectifs pour la refonte de son site web.
- Améliorer l'expérience utilisateur : Navigation plus fluide et intuitive.
- Moderniser le design : Adapter aux tendances actuelles et assurer la compatibilité mobile.
- Optimiser le référencement (SEO) : Meilleure visibilité sur les moteurs de recherche.
- Augmenter les conversions : Optimiser les CTA et simplifier le parcours client.
- Intégrer de nouvelles technologies : Ajouter des plugins et améliorer la sécurité.
- Résoudre les problèmes techniques : Corriger les bugs et améliorer les performances.
Les Fonctionnalités / Technologies à ajouter ?
Il est important de spécifier dans son cahier des charges les fonctionnalités technologies à ajouter pour pouvoir planifier cette dite intégration avec le prestataire / l’agence
Modèle de cahier des charges La Refonte
Si vous avez des besoins précis et souhaitez aller beaucoup plus en profondeur dans la rédaction de votre cahier de charge, nous en avons conçu un modèle. Cliquez sur le bouton “Télécharger le modèle cahier de charge La Refonte” pour l’obtenir !
Combien de temps prend une refonte ?
Avec tous ces éléments, vous vous dites que cela va vous prendre beaucoup de temps, mais vous, vous êtes pressé et vous souhaitez bien faire !
Durée d’une refonte en partenariat avec une agence ou un freelance :
En faisant appel à une agence classique voire à un freelance, la refonte de votre site internet prendra 3 à 6 mois.
Par contre, si vous faites appel à une agence spécialisée dans les refontes de site internet, comme “La Refonte” par exemple (je suis certain que vous vous y attendiez), cela prendra environ 1 mois et demi !
Vous souhaitez réaliser la refonte vous même :
Cela dépendra forcément de vos compétences actuelles, de votre investissement et de vos partenaires.
En résumé :
Si vous êtes pressé, mieux vaut entreprendre la refonte vous-même si vous avez du temps à y consacrez, soit confiez la mission à une agence spécialisée dans les refontes de site internet !
Enfin, tout dépend du type de refonte, ici nous parlions d’une refonte totale. Dans le cadre d’une refonte uniquement visuelle et sans travail de fond, cela prendra évidemment moins de temps.
Quand faire une refonte ?
Il y a deux moments propices pour réaliser la refonte de son site internet.
- Une refonte tous les deux ans :
Selon les experts, il est conseillé de faire une refonte à peu près tous les deux ans. Si vous êtes dans un secteur ultra concurrentiel, réduisez ce "laps de temps" à un an.
- Lors d’une restructuration de l’activité :
Réaliser une refonte peut également être judicieux lorsque vous avez besoin de “mettre à jour” votre site internet. Par exemple, lorsque votre société a supprimé ou développé certaines activité.
Ainsi, mettre votre site à jour va pouvoir vous permettre de
- Mettre en exergue la nouvelle activité sur le site
- Supprimer les activités obsolètes pour se concentrer sur les activités restants et travailler sur leur référencement naturel
Quel est le prix d’une refonte ?
Comme nous l'avons dit précédemment, tout dépend du type de refonte. Cela peut aller de 400 euros à 1500 euros pour une refonte uniquement du menu de navigation ou visuelle à plus de 50 000 euros pour des gros sites sur une refonte totale avec restructuration. Il n'y a pas de prix fixe et tout dépend également du type de site. Si c'est un site e-commerce, un blog, un site de prestation de service,… .
- Petit (1-10 pages)
Faible
Refonte visuelle
Refonte navigation
Refonte totale
400 - 800 €
400 - 800 €
2 000 - 5 000 €
- Moyen (10-50 pages)
Moyen
Refonte visuelle
Refonte navigation
Refonte totale
800 - 1 500 €
800 - 1 500 €
5 000 - 10 000 €
- Petit (1-10 pages)
Faible
Refonte visuelle
Refonte navigation
Refonte totale
400 - 1 000 €
400 - 1 000 €
3 000 - 8 000 €
- Moyen (10-50 pages)
Moyen
Refonte visuelle
Refonte navigation
Refonte totale
1 000 - 2 000 €
1 000 - 2 000 €
8 000 - 15 000 €
- Petit (1-50 produits)
Faible
Refonte visuelle
Refonte navigation
Refonte totale
800 - 2 000 €
800 - 2 000 €
10 000 - 20 000 €
- Grand (50-500 produits)
Moyen
Refonte visuelle
Refonte navigation
Refonte totale
2 000 - 5 000 €
2 000 - 5 000 €
20 000 - 40 000 €
- Petit (1-10 pages)
Faible
Refonte visuelle
Refonte navigation
Refonte totale
500 - 1 000 €
500 - 1 000 €
3 000 - 8 000 €
- Moyen (10-50 pages)
Moyen
Refonte visuelle
Refonte navigation
Refonte totale
1 000 - 2 500 €
1 000 - 2 500 €
8 000 - 15 000 €
- Large (> 100 pages)
Élevé
Refonte visuelle
Refonte navigation
Refonte totale
5 000 - 10 000 €
5 000 - 10 000 €
30 000 - 50 000 €
- Très grand (> 500 pages)
Très élevé
Refonte visuelle
Refonte navigation
Refonte totale
10 000 - 20 000 €
10 000 - 20 000 €
50 000 € et plus
Disclaimer : Ceci est uniquement un tableau avec des prix indicatifs tout dépend du projet de la structure qui effectue la prestation (agence / freelance) et du taux journalier moyen de celle-ci
Calculer la rentabilité de sa refonte
Rien ne vaut des chiffres pour prendre une décision éclairée. Lorsqu'on décide de faire une refonte, on attend derrière un retour sur investissement ou valoriser son image de marque.
Pour ce qui est du retour sur investissement, nous avons créé un calculateur qui permet d'estimer l'impact financier d'une refonte sur votre société et de comparer les coûts que vous allez engager pour celle-ci et les bénéfices attendus. Sous celui-ci se trouve une explication simple de tous les champs du calculateur et pourquoi ils sont pertinents.
- Trafic mensuel actuel : Le nombre moyen de visiteurs sur votre site chaque mois. Connaître ce chiffre est crucial car plus votre trafic est élevé, plus le potentiel de conversion augmente.
- Taux de conversion actuel (%) : Le pourcentage de visiteurs qui effectuent une action souhaitée comme l’achat d’un produit sur votre site. C'est une mesure de l'efficacité de votre site actuel à convertir les visiteurs en clients.
- Valeur moyenne d'une conversion (€) : Le revenu moyen généré par une conversion. Cela vous aide à comprendre combien chaque conversion vaut pour votre entreprise.
- Coût estimé de la refonte (€) : Le budget que vous envisageriez pour la refonte de votre site. Cet investissement est comparé aux bénéfices potentiels pour calculer le ROI.
- Augmentation estimée du trafic (%) : L'augmentation prévue du nombre de visiteurs après la refonte. Une refonte bien faite peut attirer plus de visiteurs, augmentant ainsi vos opportunités de conversion.
- Amélioration estimée du taux de conversion (%) : L'augmentation attendue du taux de conversion après la refonte. Une meilleure conception et une meilleure expérience utilisateur peuvent encourager plus de visiteurs à devenir des clients.
En remplissant tous ces champs, le calculateur de ROI permet d'estimer :
- Le ROI estimé en pourcentage : c'est-à-dire le pourcentage de retour sur investissement qu'on peut attendre après refonte. Un ROI positif signifie que les bénéfices de la refonte surpassent les coûts.
- Le temps nécessaire pour récupérer l'investissement de départ : grâce aux bénéfices supplémentaires générés.
- Augmentation estimée du bénéfice mensuel : permet de se projeter mensuellement, financièrement après la refonte.
Les types de refonte
Chez la refonte, nous proposons trois options pour la refonte d'un site web :
1. La refonte visuelle (axée taux de conversion)
La refonte visuelle, on s'occupe uniquement de l'univers visuel du site, de l'identité et du web design. Aucun travail n'est fait sur l'arborescence, la structure du site ou le SEO.
2. La refonte SEO
La Refonte SEO est uniquement centrée sur la structure du site et le contenu textuel pour améliorer le référencement SEO
3. La refonte complète
La refonte complète quant à elle comporte une refonte visuelle, évoquée ci-dessus, couplée à un travail en profondeur au niveau de la structure / arborescence du site pour améliorer le parcours de l'utilisateur, corriger toutes les erreurs structurelles que l'on peut trouver en SEO (pourquoi ne pas créer des cocons sémantiques et corriger toutes les erreurs techniques également)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bad80a8796d987828fa_icons8-case-coche%CC%81e-50%20(3).png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
Étape 2 : Audit du site web
Analyse des données actuelles
Analyse des données actuelles pour comprendre les différents problèmes existants.
La tendance du trafic
Une métrique importante pour savoir si notre site web est en bonne santé ou non. Souvent, si le trafic est décroissant c'est qu'il y a des problèmes en termes de SEO et que Google nous déclasse. Il faut donc intervenir soit pour une refonte, soit pour entreprendre des actions pour optimiser le référencement naturel du site.
Le taux de conversion
Comparer le taux de conversion d'il y a deux ans avec le taux de conversion actuel sur des outils tels que Google Analytics est un très bon moyen également de savoir si vous êtes toujours dans les normes ou s'il y a des choses à renouveler.
Les retours clients
Demandez à vos clients en physique ou faites des campagnes de feedback. Trouvez un moyen d'avoir un retour de leur expérience sur votre site et vous aurez également des nouvelles métriques pour votre refonte.
Un Audit dit “de bon sens / de bonnes pratiques”
C’est l’audit du “premier coup d’œil”. Quand on se rend sur le site : est-ce qu’il y a quelque chose qui nous choque comme des bugs, une charte graphique ou un design obsolète, les images,…
Audit UX/UI - CRO
L'audit de l'expérience utilisateur et de l'optimisation du taux de conversion est composée de plusieurs éléments clés :
- Être sûr que l’expérience utilisateur sur le site est toujours d’actualité et adaptée au produit/service.
- Analyser comment se comporte l’utilisateur avec un outil de heatmap.
- Faire naviguer une personne extérieure sur son site et lui faire noter toutes ses remarques.
Remarque : Vous pouvez également utiliser des outils comme Hotjar pour avoir des métriques réelles sur le comportement utilisateur.
Audit SEO
Un peu de pratique :
Un audit SEO est nécessaire Pour repérer toutes les erreurs techniques et structurelles
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a81d7ab7c4428aca37d949_Capture%20d%E2%80%99e%CC%81cran%202567-07-26%20a%CC%80%2009.57.39.png)
Pour structurer votre travail, utilisez un outil de Mindmap (exemples : Mindmeister, XMind, Coggle).
Ainsi, vous pouvez créer un système de branches en fonction des domaines que vous souhaitez auditer. Pour notre “branche SEO” nous avons choisi le découpage suivant :
- On site
- Off site
- Contenu
- Résultat ⇒ qui nous permet d’établir une conclusion à partir des 3 points précédents.
Il ne vous reste plus qu’à dupliquer ce modèle pour chacun des domaines que vous souhaitez auditer.
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a81e68b7c4428aca387f40_Capture%20d%E2%80%99e%CC%81cran%202567-07-26%20a%CC%80%2010.02.10.png)
Vous pouvez utiliser ce processus pour tout revoir. Le fait de faire un travail de brainstorming sur un outil de carte mentale vous aide à vous projeter afin d’avoir une vision plus claire sur votre refonte.
Étape 3 : Arborescence du site web
Structure du site web
Repenser la structure de votre site web est une étape primordiale pour aller de l'avant. Dans la plupart des cas, les sites web ont été créés sur le vif par vous, une personne qui n'avait pas tous les tenants et aboutissants de comment fonctionne et se structure un site web. Il est temps lors de votre fonte de repenser votre structure et votre contenu avec une approche plus orientée des moteurs de recherche et de l'expérience utilisateur.
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a81fbd924a0c50c35fe390_Capture%20d%E2%80%99e%CC%81cran%202567-07-26%20a%CC%80%2010.11.33.png)
Comme vous pouvez le voir ici, on repense un site web avec les pages par thématique grâce au logiciel Miro. On crée également les relations entre les pages via des flèches.
Plan de redirection des urls
Lorsque le site change de structure ou que vous refaites l'arborescence, les adresses URLs changent. Il est important de créer une nouvelle passerelle entre l'ancienne page et la nouvelle page. Car si on oublie de mettre en place une redirection, la page supprimée ou déplacée affichera un message d'erreur lorsque les utilisateurs iront dessus.
A quoi ressemble un plan de redirection des URL ?
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a821d0856046ce15c21414_plan-de-redirection-url.png)
Le plan de redirection URL ressemble souvent à un fichier CSV avec une colonne A source pour identifier l'ancienne URL et une colonne B destination pour identifier la nouvelle URL.
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bad80a8796d987828fa_icons8-case-coche%CC%81e-50%20(3).png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
Étape 4 : Design du site web
Définir votre charte visuelle / Design System
Charte graphique :
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a82268b6ec4c8c0f6b6e10_Capture%20d%E2%80%99e%CC%81cran%202567-07-26%20a%CC%80%2013.59.53.png)
Une refonte implique souvent un changement de nuances et de couleurs, un changement de logo, de la typographie et tout autre élément graphique. Il est important de tout définir.
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a823ee657eb2ab9d2040a3_Exemple%20design%20system%20La%20Refonte.png)
Le Design System, également connu sous les noms d'UI Kit ou de StyleGuide, est illustré ici par l'un de nos modèles créés pour nos clients, une version matérialisée de la charte graphique. Cette dernière se restreint vraiment au ton et aux couleurs, tandis que le design system est plus axé sur la forme et l'application sur un site web réel.
Création de maquettes
La création d'une maquette est une étape cruciale dans la refonte de votre site web !
- 1. Ce que la maquette permet :
- Matérialise visuellement les changements prévus pour le site
- Coordonne le travail entre graphiste et intégrateur
- Permet la validation du web design par tous avant l'intégration
- 2. Processus de création :
- Incorporation du design system et de la charte graphique dans un logiciel de prototypage
- Possibilité de réalisation par soi-même ou par un prestataire, mais vous gardez la main
- 3. Avantages :
- Offre une représentation visuelle concrète du projet final
- Un gain de temps considérable
- 3. Outils et compétences requis :
- Accessible à tous avec du temps et de la persévérance
- Utilisation d'outils professionnels pour un rendu plus élaboré
Voici un tableau qui vous permettra de vous positionner sur un outil et de débuter la création de votre maquette : (si jamais besoin de plus d'informations voir notre contenu sur la refonte graphique et comment mous pouvons vous aider).
Critères / Outils
Adobe XD
Figma
Canva
Pen & Paper
Avancé
Avancé
Débutant
Débutant
En temps réel
En temps réel
Limitée
Non applicable
Application de bureau
Navigateur web
Navigateur web
Papier et crayon
Modérée
Modérée
Très simple
Très simple
Abonnement payant
Abonnement payant
Gratuit (options payantes)
Coût du matériel
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a8928e11cbdccda53e8bae_Capture%20d%E2%80%99e%CC%81cran%202567-07-26%20a%CC%80%2016.28.04.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a82785f070fa1a6852dbc6_Capture%20d%E2%80%99e%CC%81cran%202567-07-26%20a%CC%80%2016.31.56.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bad80a8796d987828fa_icons8-case-coche%CC%81e-50%20(3).png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
Étape 5 : Création d’une préproduction
Environnement en local vs staging :
Quand il s'agit de travailler sur site web de test, il existe deux écoles: soit créer un environnement de staging via les hébergeurs, (solution que nous conseillons vivement), ou la deuxième consiste à recréer un environnement de travail en local.
Avantages et inconvénients de travailler en local vs Stagging
Réalisme (ressemblance avec le site réel)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a82d0a1e810e20404daa7c_icons8-coche-emoji-48.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a82d0a7e02ab897129bd09_icons8-croix-marque-emoji-48.png)
Travail d'équipe
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a82d0a1e810e20404daa7c_icons8-coche-emoji-48.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a82d0a7e02ab897129bd09_icons8-croix-marque-emoji-48.png)
Rapidité des changements
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a82d0a7e02ab897129bd09_icons8-croix-marque-emoji-48.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a82d0a1e810e20404daa7c_icons8-coche-emoji-48.png)
Coûts
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a82d0a7e02ab897129bd09_icons8-croix-marque-emoji-48.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a82d0a1e810e20404daa7c_icons8-coche-emoji-48.png)
Facilité d'intégration avec d'autres parties du site
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a82d0a1e810e20404daa7c_icons8-coche-emoji-48.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a82d0a7e02ab897129bd09_icons8-croix-marque-emoji-48.png)
Indépendance du développeur
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a82d0a7e02ab897129bd09_icons8-croix-marque-emoji-48.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a82d0a1e810e20404daa7c_icons8-coche-emoji-48.png)
Sécurité des données sensibles
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a82d0a7e02ab897129bd09_icons8-croix-marque-emoji-48.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a82d0a1e810e20404daa7c_icons8-coche-emoji-48.png)
💡 L’Avis de La Refonte :
Si vous êtes dans une démarche d'apprentissage, vous pouvez vous permettre de créer le site en local mais cela vous prendra plus de temps, il y aura plus de problèmes au niveau des intégrations avec des API ou d'autres parties du site. C'est pourquoi nous recommandons d'utiliser les services de staging proposés par les hébergeurs pour un développement plus fluide et moins contraignant.
Créer un environnement de staging
La plupart des hébergeurs modernes et performants proposent des domaines de staging pour créer une préproduction.
Voici un mini tutoriel sur comment créer une pré-production sur les plus gros hébergeurs français
Votre hébergeur :
- Hostinger
Softaculous, Installatron
Création de sous-domaines ou sous-répertoires
- Accéder au cPanel
- Utiliser Softaculous pour installer WordPress/PrestaShop
- Créer un sous-domaine pour le site de pré-production
- Cloner le site en production vers le sous-domaine à l'aide de WP Staging ou Duplicator (WordPress) / Copier manuellement les fichiers et la base de données (PrestaShop)
- o2switch
Softaculous
Création de sous-domaines ou sous-répertoires
- Accéder au cPanel
- Utiliser Softaculous pour installer WordPress/PrestaShop
- Créer un sous-domaine pour le site de pré-production
- Cloner le site en production vers le sous-domaine à l'aide de WP Staging ou Duplicator (WordPress) / Copier manuellement les fichiers et la base de données (PrestaShop)
- OVH
Softaculous, Installatron
Création de sous-domaines ou sous-répertoires
- Accéder au tableau de bord OVH
- Utiliser Softaculous pour installer WordPress/PrestaShop
- Créer un sous-domaine pour le site de pré-production
- Cloner le site en production vers le sous-domaine à l'aide de WP Staging ou Duplicator (WordPress) / Copier manuellement les fichiers et la base de données (PrestaShop)
- Kinsta
Outil d'installation en un clic
Environnement de staging en un clic
- Accéder au tableau de bord MyKinsta
- Utiliser l'outil d'installation en un clic pour installer WordPress
- Créer un environnement de staging via l'option "Staging" dans MyKinsta
- Cloner le site en production vers l'environnement de staging en un clic via MyKinsta
Création d'un environnement local
Service d’installation
Il est possible d'utiliser Softaculous, Installatron ou des outils d'installation en un seul clic (en fonction de l'hébergeur).
Création d’un environnement local
- Mise en place d'un serveur local.
- Différentes options sont disponibles :
- WAMP (Windows)
- XAMPP (Windows, macOS, Linux)
- MAMP (macOS)
- Local by Flywheel (Windows, macOS)
Exportation des fichiers et de la base de données depuis l'hébergeur
- Connectez-vous au panneau de contrôle de votre hébergeur (Hostinger, o2switch, OVH, Kinsta,…).
- Utilisez phpMyAdmin ou un plugin de sauvegarde pour exporter la base de données.
- Transférez les fichiers du site à l'aide du FTP.
Importation des fichiers et de la base de données sur le serveur local
- Sélectionnez le dossier
www
ouhtdocs
de votre serveur local pour copier les fichiers du site. - Importez la base de données dans phpMyAdmin sur le serveur local.
Configuration des fichiers hosts pour accéder au site local
- Modifiez le fichier hosts sur votre ordinateur afin de rattacher un domaine local (par exemple 127.0.0.1 monsite.local).
- Ajoutez les nouvelles informations de base de données au fichier
wp-config.php
(WordPress) ouapp/config/parameters.php
(PrestaShop).
Outils conseillés
- Serveur de localisation :
- WAMP
- XAMPP
- MAMP
- Localisé par Flywheel
- Import/Export de bases de données :
- phpMyAdmin
- Plugins de sauvegarde (UpdraftPlus, Duplicator pour WordPress)
- FTP :
- FileZilla
- Cyberduck
Désindexer la copie du site web
⚠️ Attention : Si on utilise une pré-production sur un domaine donné par l’hébergeur, on n'oublie surtout pas de le désindexer pour éviter que les pages de la pré-production n’apparaissent sur les moteurs de recherche et créent du contenu dupliqué.
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bad80a8796d987828fa_icons8-case-coche%CC%81e-50%20(3).png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
Étape 6 : Structure SEO & Redirections
Restructuration technique SEO
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a88c22076d6f88210f062c_creation%20site%20web%20woocommerce%20(1).png)
Une restructuration du site web est cruciale pour améliorer le SEO. En organisant le contenu en une structure hiérarchique (Cocon/Siloing), avec une page d'accueil principale, des sections majeures et des sous-catégories, on aide les moteurs de recherche à comprendre la thématique du site et on facilite la navigation pour les utilisateurs.
Les points clés à retenir :
- La restructuration du site web est cruciale pour améliorer le SEO.
- Organiser le contenu efficacement est essentiel pour l'optimisation des moteurs de recherche.
- La page d'accueil sert de point d'entrée principale.
- Le site se divise en trois catégories principales, avec des sous-catégories.
- Cette structure hiérarchique, appelée cocon ou siloing, aide les moteurs de recherche à comprendre la thématique et l'organisation du site.
- Une refonte permet de repenser la structure de son site pour repartir sur des meilleures bases.
Corriger toutes les erreurs techniques SEO :
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a88d46203600e771db440c_exemples-erreurs-techniques-la-refonte.png)
Une fois qu'on a fait notre grand ménage au niveau de la structure, il faut maintenant corriger toutes les erreurs techniques. Ce qui va être, par exemple, vérifier que la vitesse du site est toujours optimale, mettre en place toutes les redirection, vu que certaines pages ou répertoires ont été déplacés / supprimés, et d'autres petites erreurs que l’on peut observer lorsqu’on refait les fondations de son site web. Si jamais vous avez besoin de plus d'informations, n'hésitez pas à checker notre guide spécialisé sur la refonte SEO.
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bad80a8796d987828fa_icons8-case-coche%CC%81e-50%20(3).png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
Étape 7 : Intégration de la maquette
Une fois que tous les changements au niveau de la partie back-end technique et structure “l'arrière boutique” ont été réalisés, nous pouvons attaquer à la partie visuelle et intégrer la maquette réalisée sur le logiciel de prototypage.
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a89053454f2c06f1fcdff5_maquette-logiciel-de-prototypage-la-refonte.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a88ed87ecce5a19fae3b6e_integration-de-la-maquette-frontend.png)
⚠️ Il est très important de tout valider sur la maquette pour éviter de nombreux allers-retours à faire sur le site web (évitez les pertes d’énergie inutiles). La maquette doit être visuellement finalisée à 100%.
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bad80a8796d987828fa_icons8-case-coche%CC%81e-50%20(3).png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
Étape 8 : Tests de préproduction
Analyse des webperfs
Les webperfs, autrement dit, les performances web sont des métriques très importantes pour votre site internet puisqu’elles agissent sur deux aspects :
- La vitesse de chargement globale du site internet
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a89418c5f48bc0b3b63a27_Untitled.png)
- L’évaluation de votre site internet par les moteurs de recherche comme Google
⚠️Ces deux aspects sont liés ⚠️
En effet, la vitesse de chargement globale de votre site va être prise en compte, à la fois par les utilisateurs lambdas mais aussi par les algorithmes des moteurs de recherche.
Si vous avez un site trop lent, les utilisateurs perdront patience et iront visiter un autre site internet, ce que vous ne voulez pas. Vous voulez qu’ils puissent naviguer sur votre site internet, demander un devis ou acheter vos produits ! Les moteurs de recherche comme Google prennent eux aussi la vitesse de votre site en compte, ainsi que le taux de rebond de votre site internet ainsi que le temps moyen passés par les utilisateurs sur votre site pour déterminer s’il est pertinent de vous placer en haut des résultats de recherche suite aux requêtes des utilisateurs
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a96efdf4888bdb4558715e_Untitled%20(2).png)
C’est pourquoi il est très important de :
- Tester la vitesse de chargement des pages
- Vérifier l'optimisation des images
- Analyser le temps de réponse du serveur
Suivre vos redirections
Vérifier que toutes les redirections fonctionnent correctement après la mise en ligne.
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a821d0856046ce15c21414_plan-de-redirection-url.png)
Pour cela, on reprend le tableau construit lors de l’étape 3 et on teste une à une les URLs pour être sûr que le site est parfaitement fonctionnel et qu’aucune perte de trafic soit observée.
Suivre vos redirections
Nous adorons la théorie, avec nos mindmap, nos tableaux, nos calculateurs et nos articles de blog, mais nous aimons également la pratique !
C’est pourquoi, vous devez réaliser des tests d’immersion sur votre site par des utilisateurs de confiance pour que les résultats de la refonte soient bien tangibles et concordent avec vos expectations.
Ainsi, chacun des utilisateurs réalisera un feedback du nouveau site en répondant à diverses questions, par exemple :
- Est-ce que des bugs subsistent ?
- Est-ce que le site est désormais parfaitement ergonomique, intuitif ?
- Est-ce que l’achat des produits est facilité ?
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a97320261c90d091816f2e_analyzing-data-on-computer-screen-2024-02-15-18-27-37-utc%20(1).jpg)
Nous voulons savoir si grâce à la refonte du site, il répond désormais aux attentes des utilisateurs actuels : un site rapide, sans bug, doté d’une direction artistique particulière et qui énonce clairement quels services / produits l’entreprise propose et dans quel but.
⚠️ Enfin, un point très important à prendre en compte, c’est de tester les intégrations des services tiers qui sont présents sur votre site et primordiaux comme par exemple Google Analytics, que les scripts de suivi fonctionnent, que les formulaires de contact soient fonctionnels. Assurez-vous que les services tiers soient bien compatibles mais aussi en conformité avec l’ensemble du site internet.
Étape 9 : Suivi des KPIS et analyse de la performance
Suivi de performance
Le suivi des indicateurs clés de performance (KPIs) et l'analyse de la performance sont les clés du succès post-refonte.
C'est fait. Votre refonte a été effectuée. Le design est épuré, l'expérience utilisateur optimisée, et le contenu soigneusement retravaillé, tout-est-bon !
Ne pensez pas que ce soit le cas.. L’étape cruciale qui suit la mise en production est le suivi des KPIs et l'analyse minutieuse de la performance de votre nouveau site.
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a97523ef02be770ddd837a_key-performance-indicator-businessman-holding-woo-2023-11-27-05-23-19-utc%20(1).jpg)
⚠️ Ce travail en aval est en réalité la phase déterminante pour garantir le succès à long terme de votre refonte.
Mise en place du suivi de la performance
Pour le mettre en place, commencez par identifier les métriques qui comptent vraiment pour votre activité. Il ne faut pas se limiter au trafic global, même si c’est un indicateur important. Penchez-vous sur le taux de conversion, le temps passé sur le site, ou encore le taux de rebond (dont on vous a déjà parlé lors du paragraphe sur les performances web).
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a97649212a457a1de9dc2f_Untitled%20(3).png)
Ce suivi n’est pas une simple formalité, il doit être réalisé de manière rigoureuse car c’est un processus continu qui vous permet d'évaluer l'impact réel de vos changements et d'identifier rapidement les derniers axes d'amélioration. Pour ce faire, il est essentiel de mettre en place un système de suivi robuste dès le départ.
Suivi des KPI et analyse de la performance
Dès lors que vos KPIs sont définis, vous aurez besoin des outils adéquats pour les mesurer de la manière la plus optimisée possible.
Google Analytics reste évidemment un must-have, mais n'hésitez pas à le compléter avec des solutions plus spécialisées, notamment pour le suivi SEO (Semrush, Ahrefs,…) ou l'analyse du comportement utilisateur (Hotjar par exemple).
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66a976faef36e92c9f27bf4f_Untitled%20(4).png)
Ainsi, vous pourrez avoir une vue d’ensemble. N’hésitez pas à réaliser des tableaux de suivi grâce à Excel ou Google Sheet afin de pouvoir interpréter vos résultats plus facilement.
Comparez vos chiffres avec vos performances pré-refonte pour mesurer l'impact réel de vos changements ainsi qu’au fur et à mesure des mois succédant la refonte. Cherchez des tendances, des corrélations entre les différentes métriques.
⚠️ C’est souvent dans ces analysées croisées que se cachent les insights les plus précieux et qui vous permettront d’optimiser encore plus votre site internet si besoin !
Les spécificités d’une Refonte par rapport à son CMS
Il existe une multitude de CMS sur le marché, parfois totalement open source et gratuit, quelques fois fortement onéreux. De notre côté nous allons nous pencher sur deux solutions qui sont fortement plébiscités : Wordpress & Prestashop qui ont eux aussi chacun leur spécificité en termes de suivi et de performance.
Refonte de site Wordpress
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa046335a04f532665f879_wordpress.png)
Si votre site a été construit avec WordPress, vous avez à disposition pléthore de plugins dédiés à l'analyse et à l'optimisation.
En voici quelques-uns qui pourraient vous aider :
- Yoast SEO Analytics : Suivi des performances SEO et des mots-clés.
- Query Monitor : Analyse des requêtes SQL et des hooks WordPress pour identifier les problèmes de performance.
- Hotjar : Visualisation de l'interaction des utilisateurs avec votre nouveau design.
Il existe une multitude d’autres plugins qui vous aideront dans cette tâche ardue qu’est le suivi des KPIs, allez donc les dénicher et les essayer. Autrement, rendez-vous sur notre article dédié à WordPress
Refonte de site Prestashop
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa04630c6a46f4ed96ec89_prestashop.png)
PrestaShop, en tant que plateforme e-commerce, nécessite une approche centrée sur les métriques de vente et de conversion !
Voici ceux que nous trouvons être les plus pertinents :
Grâce à cette liste (presque exhaustive !), nous espérons que vous puissiez suivre vos KPIs sur PrestaShop d’une main de maître ! Pour plus d'infos, Nous avons conçu pour vous une page dédiée à la refonte Pretashop.
- PrestaShop Analytics : Vue d'ensemble des KPIs e-commerce essentiels.
- Google Analytics E-commerce : Suivi du tunnel de conversion.
- PrestaSpeed : Analyse et optimisation de la vitesse de chargement.
- Customer Tracking : Suivi granulaire du parcours client.
- Advanced Stock Management : Analyse de l'impact sur la gestion des stocks et les ventes.
- SEO Expert : Maintien et amélioration du référencement post-refonte.
Ajustements post-refonte
Nous nous devons de vous prévenir !
⚠️ Le suivi de performance est crucial pour identifier les éléments sous-performants de votre site : pages, fonctionnalités et parcours utilisateurs. Cependant, l'interprétation des données est complexe. L'optimisation post-refonte est un processus subtil qui nécessite une analyse approfondie avant d'effectuer des changements précipités.
Vous devez donc donner le temps à vos utilisateurs de s’habituer à votre nouveau site internet. Soyez patients et observez les tendances sur plusieurs semaines pour ne pas tirer de conclusions hâtives qui pourraient vous desservir !
Étape 10 (optionnelle) : Pourquoi faire appel à une agence experte pour votre refonte ?
Félicitations, vous êtes arrivé à la fin de notre guide : "Le Guide clé en main pour réussir votre refonte de site web avec nos outils".
Maintenant que vous avez tous les éléments en main, pourquoi devriez-vous faire appel à une agence spécialisée dans la refonte de site internet plutôt que de réaliser votre refonte vous-même ?
Tout simplement car comme vous l'avez compris en lisant ce magnifique article : c'est compliqué. Et pas seulement. Cela prend aussi du temps, beaucoup de temps.
C'est pour cela que chez La Refonte, en plus de vous offrir ce super guide détaillé, étape par étape de comment effectuer une refonte, on vous offre aussi la possibilité d'entamer une collaboration avec nous ! Que ce soit pour ressusciter (tel un Phoenix) votre site internet ou bien pour optimiser votre site web déjà existant afin d'exploser tous les records ! Alors obtenez gratuitement le rendez-vous d’audit en cliquant ici.
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bad80a8796d987828fa_icons8-case-coche%CC%81e-50%20(3).png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)
![](https://cdn.prod.website-files.com/65782deb34ef1f5a66e97e78/66aa3bb65b819ec42f9a7c16_icons8-case-a%CC%80-cocher-non-coche%CC%81e-50.png)