Aller au contenu

Refonte de site web : comment éviter les erreurs les plus courantes

Avatar de Claire Dubocage
Publié le 20 décembre 2024 Par Claire Dubocage

Vous envisagez de mettre en place la refonte de votre site internet, ou vous demandez s’il est nécessaire de le faire ? Voici un guide qui vous permettra de clarifier votre approche, mais aussi d’éviter les pièges pour une refonte efficace et réussie.

Votre site web est la vitrine principale de votre entreprise. Il représente votre activité et est souvent la première interaction entre votre marque et vos clients.

Si votre site montre des signes d’obsolescence, comme le fait d’avoir un design daté, des temps de chargement lents, qu’il ne soit pas adapté à une navigation mobile, ou que sa navigation soit compliquée, il risque d’apporter une mauvaise image et dissuader les visiteurs. Une chute des conversions est également un autre facteur à prendre en compte.

Une refonte permet non seulement d’améliorer l’esthétisme, mais également la performance et l’expérience utilisateur. Elle est également l’opportunité de mettre à jour la technologie utilisée, ainsi que votre contenu et d’aligner votre site avec vos objectifs marketing ou commerciaux.

Une refonte réussie peut devenir un outil stratégique important pour votre entreprise. Elle ne se limite pas à une simple refonte graphique, mais permet d’atteindre d’autres objectifs comme :

  • votre taux de conversions, en proposant une navigation simplifiée et fluide ;
  • l’expérience utilisateur, en rendant le parcours du visiteur plus intuitif et agréable, lui permettant de trouver plus facilement l’information ou l’action souhaitée ;
  • votre positionnement SEO, grâce à une structure de contenu réfléchie et retravaillée, des temps de chargement plus courts et un contenu adapté aux attentes des moteurs de recherche ;
  • votre image de marque, en reflétant d’avantage vos valeurs et votre modernité grâce à un design et des fonctionnalités à jour.

Une planification rigoureuse est indispensable pour la migration de votre site internet. Vous vous garantissez ainsi une continuité dans les performances de votre site, et un retour sur investissement significatif.

C’est pourquoi il est important de bien identifier en amont les pièges et erreurs potentiels, afin de les anticiper, de s’assurer un projet sans accroc et éviter les complications coûteuses.

Qui dit refonte, dit site déjà présent. Ce n’est pas parce qu’une refonte est nécessaire que tout est forcément à jeter. La phase d’audits du site web actuel est donc une phase primordiale afin d’analyser ses performances et identifier ses points forts à conserver et les points faibles à améliorer.

Cette phase repose sur plusieurs audits complémentaires.

Avant de procéder à la refonte d’un site web, il est crucial de procéder à un audit approfondi de son contenu. Cet audit va permettre d’identifier les pages qui vous apportent le plus de trafic, les mots clefs sur lesquels vous êtes déjà bien positionnés, ainsi que les liens internes et externes.

A contrario, c’est également grâce à cet audit que vous pourrez mesurer l’importance de la refonte en décelant les points faibles de votre site.

De cette façon, vous pourrez retravailler et optimiser votre contenu et la structure de votre site.

Imagile vous propose de vous accompagner lors de votre audit SEO.

Le parcours utilisateur et l’accessibilité sont des points essentiels sur un site. Faire le point en amont sur les évolutions nécessaires dans ce domaine sur votre site permettra d’orienter la refonte efficacement.

En étudiant la manière dont vos visiteurs naviguent sur le site, et en repérant les points de bloquage ou d’incohérence, vous pourrez fluidifier cette expérience utilisateur et les aider à atteindre leurs objectifs (achat, contact, inscription…).

Quant à l’accessibilité, elle est devenue une norme légale et c’est donc un point crucial sur lequel se pencher lors de cet audit.

Un audit technique approfondi est également essentiel afin d’évaluer la qualité du code existant et le type de refonte à mettre en place.

Cette analyse permet de repérer les problématiques liées à un code obsolète, des scripts inutiles ou ne fonctionnant plus, ou encore des pratiques ralentissant le chargement du site. Elle prend également en charge la vérification du contenu pour l’optimisation des performances, avec les images non compressées, les plugins trop nombreux ou non maintenus, les requêtes inutiles…

En vérifiant toute l’infrastructure du site actuel, l’audit technique permet d’avoir une idée claire sur sa robustesse et sa capacité à évoluer. Ainsi, il permet d’orienter plus facilement les décisions techniques quant aux choix des outils à utiliser pour la refonte.

Vous souhaitez nous confier l'audit de code source ?

Chez Imagile, nous proposons cet audit afin de vous accompagner dans l’une des premières phases les plus importantes de votre refonte.

Vous devez également déterminer à qui s’adresse le site afin de concevoir une expérience utilisateur adaptée aux attentes de votre audience cible. Une mauvaise prise en compte des attentes de votre audience cible peut entraîner un taux de rebond élevé.

Par ailleurs, une analyse approfondie de l’environnement concurrentiel permet également de mieux se positionner, en identifiant les points similaires et ceux vous permettant de vous démarquer. Le paysage numérique évolue rapidement, et votre site doit rester compétitif.

Avant de vous lancer dans le projet de refonte, il faut en définir les enjeux : est-ce que vous souhaitez améliorer les performances, moderniser le design, améliorer l’expérience utilisateur, ou encore répondre à une évolution de votre entreprise ?

Afin d’établir les objectifs liés à ces enjeux, vous devez commencer par identifier les principaux indicateurs de performance, autrement appelés KPI (« key performance indicator« ) qui reflètent vos priorités stratégiques. Parmi ces KPI, on retrouve notamment :

  • le temps de chargement des pages, qui influence directement l’expérience utilisateur et le SEO,
  • le taux de conversion, crucial pour maximiser les résultats commerciaux.

Les objectifs doivent être réalistes et mesurables. Vous pouvez par exemple viser une amélioration de 20% du taux de conversion, ou réduire de 2 secondes le temps de chargement du site. Néanmoins, pour être réalistes ces objectifs doivent être alignés avec les capacités de votre équipe dédiée au site internet, de l’équipe de développement et des contraintes techniques.

Migrer son site web vers une nouvelle version est un projet qui doit être en adéquation avec la stratégie marketing de l’entreprise. En priorisant ces objectifs dès le début, vous assurez une direction claire pour le projet de refonte, tout en permettant d’évaluer son succès de manière concrète à chaque étape.
Cela facilite également la communication avec les parties prenantes, que ce soit de votre côté ou du côté de l’équipe technique, qui peuvent visualiser l’impact attendu sur les performances globales du site.

Site responsive Oxford
Le nouveau site responsive My Oxford

Aujourd’hui, entre 50 et 70% des visiteurs d’un site le visitent depuis un mobile. De plus les moteurs de recherche, tels que Google, font particulièrement attention à la version mobile des sites, ce qui peut impacter leur positionnement dans les résultats de recherche.

Il est donc plus que nécessaire, si ce n’est obligatoire, d’assurer une conception responsive efficace. En passant par un maquettage et un développement « mobile-first », vous vous assurez une migration de qualité d’un point de vue ergonomie.

Durant l’avancement du projet, il sera nécessaire de tester régulièrement l’adaptation de la refonte graphique sur différents appareils afin que la version finale corresponde à l’objectif initial.

L’accessibilité vise à rendre les sites internet, leurs contenus et les fonctionnalités accessibles à tous, y compris aux personnes en situation de handicap. En ignorant l’accessibilité de votre site, vous limitez votre audience et prenez le risque de nuire à votre image de marque.

Par ailleurs, la législation française prévoit également des sanctions (entre 2 000€ et 20 000€ d’amende) pour les sites de l’internet public qui ne respecteraient pas ces normes, à savoir :

  • les personnes morales de droit public : l’État, les collectivités territoriales, les établissements publics, les groupements de coopération publique, les autorités administratives indépendantes, …
  • les personnes morales de droit privé : associations, fondations ou entreprises créées ou contrôlées par des entités publiques pour répondre à des besoins d’intérêt général non commerciaux (ex. gestion des déchets, transports urbains, organismes de logement social).

Les entreprises privées dont le chiffre d’affaires excède un seuil défini ont également l’obligation légale de rendre leur site accessible.

Le seuil de chiffre d'affaires annuel à compter duquel les entreprises mentionnées au 4° du I de l'article 47 de la loi du 11 février 2005 susvisée doivent rendre leurs services de communication au public en ligne accessibles aux personnes handicapées est fixé à 250 millions d'euros. Il est calculé pour chaque personne sur la base de la moyenne du chiffre d'affaires annuel réalisé en France des trois derniers exercices comptables clos antérieurement à l'année considérée.

Les normes WCAG (Web Content Accessibility Guidelines) offrent un cadre clair afin de concevoir des sites compatibles avec des technologies d’assistance telles que les lecteurs d’écrans pour personnes malvoyantes. Ces normes contiennent entre autres :

  • des valeurs de contraste de couleurs à atteindre,
  • des alternatives textuelles pour les images,
  • une navigation au clavier fluide…

Au-delà de ces normes techniques, il est également important que le développement utilise des fonctionnalités inclusives. Cela peut par exemple être l’utilisation d’unités de mesures ou des attributs qui s’adaptent lorsque l’utilisateur change ses options de personnalisation d’affichage, comme la taille de police ou le thème de couleurs.

L’optimisation d’un site web passe également par la simplification. La navigation sur un site doit être optimisée, et en cela les menus et la hiérarchisation du contenu doivent être réfléchis et structurés.

Un design avec un effet « wahou », complexe et surchargé, bien qu’impressionnant et plaisant au premier abord, peut vite nuire à l’expérience utilisateur. Si les menus sont confus, peu discernables ou avec une hiérarchie mal conçue ; ou encore que l’information est trop dispersée, avec des éléments graphiques qui prennent le pas sur le contenu, cela peut perdre le visiteur et le faire quitter le site prématurément.

Par ailleurs, les moteurs de recherche privilégient les sites clairs et structurés, donc un déséquilibre entre le design du site et le parcours utilisateur peut également pénaliser le référencement naturel.

Il est donc essentiel de simplifier la navigation notamment en prenant en compte 2 bonnes pratiques :

  • réduire la profondeur de navigation (ne pas descendre sous 3 niveaux de menus)
  • regrouper les contenus de manière logique

L’information doit également être bien hiérarchisée pour aider l’utilisateur à trouver rapidement ce qu’il cherche, principalement grâce à :

  • des titres clairs
  • des chemins de navigation intuitif
  • l’utilisation de fils d’ariane pour avoir plusieurs axes de navigation

En utilisant ces pratiques, vous améliorez non seulement l’expérience utilisateur, donc les chances de conversion, mais également votre référencement naturel.

De plus, l’équilibre entre esthétisme et fonctionnalité doit toujours être maintenu. Ainsi, un design peut être attractif sans pour autant compromettre l’efficacité de la navigation. Lorsque des images ou des animations sont ajoutées, elles doivent servir à renforcer le message que vous souhaitez communiquer au visiteur, ou à le guider dans sa navigation. Vous pouvez pour cela utiliser les microcopies par exemple ou des micro-animations.

Lorsque vous décidez d’optimiser votre site web, vous avez alors la possibilité de changer de framework ou de CMS (Content Management System). Cette étape est une étape clé, et une mauvaise sélection ou la volonté de conserver l’ancien peut vite freiner les fonctionnalités, ralentir les performances voire impacter les évolutions futures de votre site.

Il est donc plus que crucial de prendre le temps d’évaluer les différentes options possibles, en vous faisant éventuellement accompagner par une équipe de développement qui saura vous guider vers le système le plus adapté à votre refonte, pour suivre au mieux votre besoin technique et stratégique.

Que vous ayez un site internet ou une application web, chez Imagile nous pourrons vous aider à faire le choix entre différents CMS ou frameworks. Chaque option doit être mise dans la balance, afin de tenir compte de tous les critères de sélection, comme la facilité d’utilisation, les fonctionnalités natives ou facilement implémentables, les coûts et les besoins de développement sur-mesure. Il faut également s’assurer que le choix de tel ou tel outil de développement est adapté à votre système informatique, notamment si vous avez des outils tiers comme un CRM.

Le but est de poser des bases solides pour non seulement réussir le projet initial de refonte, mais également de prévoir des évolutions futures sans avoir besoin de recommencer tout le projet.

La performance d’un site passe par sa vitesse de chargement. Un site trop lent peut décourager un visiteur, et ainsi augmenter le taux de rebond. Il impacte également le référencement naturel car les moteurs de recherche font de plus en plus attention à cet aspect.
Malgré cela, lors d’une refonte, la performance est souvent négligée, pour se concentrer sur le design ou les nouvelles fonctionnalités.

Le temps de chargement d’un site web peut être impacté par de nombreux éléments, comme :

  • des images, vidéos et fichiers volumineux ou mal compressés,
  • l’accumulation de widgets ou de plugins superflus,
  • un code peu optimisé,
  • une gestion inefficace de la mise en cache,
  • un hébergement inadéquat,
  • des technologies obsolètes

Il est donc impératif de travailler sur ce point, en mettant en place plusieurs techniques, comme par exemples :

  • utiliser la mise en cache des images, des fichiers de style et du javascript
  • utiliser des CDN (Content Delivery Network) adaptés et performants
  • gérer l’affichage des images (des images plus légères, un affichage asynchrone…)
  • choisir un hébergement performant

Il faut également faire attention à la mise en place de plugins : trop de plugins nuit au chargement. Il ne faut conserver que les plugins et extensions essentiels au fonctionnement de votre site. Le but est d’éviter un trop grand temps de chargement de leur code, des conflits entre certains, voire des failles de sécurités. Par ailleurs, plus il y a de plugins, plus le coût de la maintenance sera élevé du fait de la quantité d’éléments à maintenir à jour.

Le temps de chargement aujourd’hui doit être de moins de 3 secondes, un standard non seulement attendu par les visiteurs, mais également par les moteurs de recherche.

La collaboration avec les développeurs est un aspect fondamental dans le travail d’une refonte. Cette relation doit être mise en place dès le travail en amont, mais aussi durant toute l’avancée du projet, ainsi qu’après la mise en ligne. Pour un projet réussi, toutes les équipes, qu’elles soient décisionnaire, marketing, design ou technique, doivent travailler de concert pour un échange fluide et éviter les malentendus.

Communiquer les besoins techniques doit se faire dès le début du projet, avec la conception d’un cahier des charges précis. Il doit comporter les spécifications fonctionnelles du projet, les contraintes techniques, ainsi que la nécessité d’implémentation d’outils tiers si nécessaire. Durant cette phase, vous pouvez d’ores et déjà collaborer avec l’équipe de développement afin de vous faire accompagner dans vos choix techniques, et cela réduira encore d’avantage les risques d’incompréhension des différentes parties.

Durant toute la phase de développement du projet, il est nécessaire de tester régulièrement le site ou l’application. C’est pourquoi nous mettons en place un environnement de staging, vous permettant d’avoir un accès au site en cours de développement afin de tester les fonctionnalités clés dès leur mise à disposition. Cette approche agile permet de détecter rapidement les bugs, incohérences ou éventuelles incompréhensions entre vos attentes et le résultat.

Grâce à cet échange actif et continu avec les développeurs, qui continuera après la mise en production de la refonte, vous vous assurez une migration fluide entre l’ancien et le nouveau site.

Nous avons parlé précédemment de l’importance de l’audit SEO. Grâce à cet audit, vous aurez :

  • évalué la qualité et la pertinence de chaque page, et ce afin de conserver les pages à forte valeur ajoutée en faisant attention à maintenir leurs URL (ou en mettant en place des redirections adaptées si nécessaire),
  • identifié les contenus obsolètes ou non pertinents. Ces contenus sont notamment des pages dont le contenu n’est soit plus d’actualité pour votre entreprise, soit qu’il n’apporte aucune valeur ajoutée, ou encore qu’il ne génère que très peu voire aucun trafic. Il va donc falloir soit supprimer soit transformer ces pages / articles avec la refonte.

La refonte d’un site web passe par l’optimisation de votre contenu : un site doit transmettre un message clair et cohérent pour l’utilisateur, mais aussi optimisé pour les moteurs de recherche afin d’améliorer le référencement naturel. Vous devez donc réécrire, ajuster ou ajouter du contenu dans la nouvelle version de votre site.

Pour ce faire, plusieurs étapes sont à prendre en compte :

  1. intégrer des mots-clés stratégiques pour le SEO.
    Des outils comme Ahref ou Google Analytics permettent d’analyser de façon approfondie les termes recherchés par votre cible et vous aident dans la construction d’un contenu plus enrichi. Ces mots clefs doivent être insérés de manière fluide, que ce soit dans le texte mais aussi dans les titres, les balises méta. Attention néanmoins à ne pas sur-optimiser vos textes en répétant de manière peu naturelle ces mots clefs : les moteurs de recherche détectent et pénalisent ce type de comportement, car ils privilégient des contenus naturels et qualificatifs, qui apportent une réelle valeur ajoutée aux lecteurs.
  2. S’assurer de la cohérence dans le message et le ton employé sur toutes vos pages et articles.
    Votre site est le reflet de l’identité de votre marque, il doit offrir une expérience utilisateur cohérente et homogène à vos utilisateurs. Que le but du texte soit d’informer, vendre ou fidéliser, le style rédactionnel doit donc toujours être aligné avec vos valeurs et il doit renforcer vos objectifs stratégiques.

Avant même de commencer la refonte du site, un crawl de l’ancien est nécessaire afin d’identifier toutes les URLs de votre site. De cette façon, il devient possible de créer un plan de redirection.

Des redirections efficaces vous permettent d’éviter de perdre le trafic déjà existant sur votre site ou de nuire à votre référencement naturel : une URL qui change sans redirection de prévue peut entraîner une erreur 404, et provoquera ainsi non seulement la frustration du visiteur mais signalera également aux moteurs de recherche que certaines pages de votre site ne sont plus accessibles.

Chez Imagile, nous utilisons l’outil Screaming Frog afin d’identifier les URLs, déterminer si toutes sont viables, et préparer le plan de redirection : chaque URL de l’ancien site se voit associée une URL sur le nouveau site avec une redirection 301, une redirection permanente qui informe les navigateurs et moteurs de recherches de la nouvelle adresse de la page. De cette façon, aucun ancien trafic n’est perdu, et si d’autres sites externes possèdent des liens vers votre site actuel, appelés backlinks, les liens restent valables.

Le travail sur les URLs ne se fait pas qu’en amont : il est important de vérifier le site une fois la refonte terminée. Encore une fois, Screaming Frog nous permet de vérifier le nouveau site et d’identifier les erreurs 404 ou autres problèmes qui peuvent être liés aux redirections. Tous les liens sont alors vérifiés, qu’ils soient internes ou des backlinks.

Malgré les tests effectués durant le développement, toute une nouvelle phase de tests se présente lorsque le site est prêt à être mis en production, et donc à remplacer son prédécesseur :

  • Tester le site sur les différents navigateurs (Chrome, Firefox, Safari…) et matériels (PC/Mac, tablette, téléphone)
  • Parcourir le site pour vérifier le contenu : éviter par exemple de laisser du contenu en Lorem Ipsum qui n’aurait pas été changé pour du contenu réel
  • Tester le fonctionnement des formulaires
  • Vérifier les liens en parcourant le site : Screaming Frog vérifie les erreurs, mais vous seul pouvez vérifier que tel bouton renvoie bien où vous le souhaitez
  • Tester les processus transactionnels s’il y en a (paiement en ligne, inscriptions, …)

En résumé, vérifiez l’intégralité du site en le parcourant comme vos futurs visiteurs le feront. Le but ici est de minimiser au maximum les erreurs à corriger une fois la mise en ligne faite, ce qui pourrait décrédibiliser votre entreprise.

Une fois le site mis en ligne, il faudra surveiller de près ses performances en vous aidant d’outils d’analyse comme Google Analitics, Matomo, la Google Search Console, ou Ahref. Ces solutions spécialisées dans le monitoring vous permettront de vite repérer les problèmes liés au temps de chargement, aux taux de rebond ou même des comportements inattendus de la part des utilisateurs.

En ayant une analyse régulière, vous avez ainsi la possibilité de corriger rapidement les problématiques rencontrées et impacter au minimum vos utilisateurs et le référencement.

Par ailleurs, n’hésitez pas à entrer en contact avec vos utilisateurs pour les questionner sur leur perception de la refonte du site : cette phase de post-mise en ligne est propice à une correction rapide des éléments bloquants, bugs, problèmes d’accessibilité et  fonctionnalité incomprise par exemples. A ce moment, priorisez les ajustements à effectuer selon leur impact sur les utilisateurs et vos objectifs : un bug sera à corriger rapidement, une évolution de fonctionnalité peut être prévue dans une prochaine version.

La refonte d’un site web va au-delà de la simple modification de design ou de charte graphique. Elle nécessite une préparation en amont qui soit rigoureuse et réfléchie, des choix techniques et un développement respectant les bonnes pratiques, pour répondre efficacement aux besoins de vos utilisateurs, suivre les objectifs de l’entreprise, ainsi qu’assurer une optimisation UX et SEO pérennes.

La réussite de la migration de votre site vers sa nouvelle version repose également sur une approche évolutive : un site internet n’est jamais réellement terminé et il sera voué à évoluer et s’adapter régulièrement aux évolutions techniques et d’usages. En gardant un œil sur ses performances, vous vous assurez de rester compétitif sur le marché.

Prêt à travailler avec nous ?

Contactez-nous, ou venez nous rencontrer pour discuter de vos projets.