✎ Réussir la refonte d'un site en 10 étapes clés

Publié le

✅ Développez un nouvel aspect graphique sur votre site web avec une refonte profonde de votre graphisme. Comment? => Lisez ce petit guide ✌

Refonte de site web

Qu'est-ce qu'une refonte de site ?

La refonte d'un site web est une méthode qui permet de développer un nouvel aspect graphique, d'optimiser l'ergonomie et l'expérience utilisateur des internautes. Avec une magnifique refonte, il est possible de moderniser votre webdesign afin de rendre votre site agréable à visiter.

Étape 1 : Analyser la structure

Pour démarrer une refonte de site web, il est important d'établir un audit complet de votre site.

Pourquoi ? Car un diagnostic complet va déterminer les éventuels problèmes, et une meilleure appréhension vis à vis de la structure et du design de votre site.

 

Il s'agit là d'une réflexion afin de ne pas reproduire deux fois les mêmes erreurs. En analysant votre site de plus près, vous pourrez au moins connaitre l'état actuel des choses, et les points clefs à améliorer.

Voici deux outils qui vous aideront à analyser la structure de votre site web :

  • ScreamingFrog : Un outil dédié aux experts et conçu pour des sites internet avec un nombre de page important. Il réalise des tests d'explorations et vous fournit un maximum d'informations sur la santé de votre site. Vous pouvez vous en servir pour faire un crawl de votre site internet, et récupérer les codes d'erreurs des pages ( 200, 301... ).
  • Semrush : Un outil plus communément orienté sur l'optimisation de votre référencement, il dispose d'un très bon crawler qui analysera chaque page de votre site et vous détaillera ses résultats.

Étape 2 : Concevoir un plan détaillé du site web

Avec la création d'une carte mentale avec toutes les idées que vous pourriez inclure sur votre site, il est important de la hiérarchiser vos pages. Structurer votre arborescence pour améliorer la navigation et l'expérience que vous offrez à vos clients.

 

Également, le fait de mieux hiérarchiser votre site vous permettra de mieux vous classer sur les moteurs de recherche.

Étape 3 : Créer la maquette graphique

Créer une maquette permet de créer et mettre en place vos éléments graphiques pour pouvoir les incorporer sur votre site web. C'est un très bon moyen pour créer un aperçu de son site, et il vous permettra d'ajuster au pixel prêt ! D'ailleurs, vous pouvez très bien vous inspirer de vos sites favoris et concevoir un visuel encore plus beau que ce que vous aviez imaginé.

 

Voici quelques outils qui vous permettront de développer une maquette professionnelle :

  • Adobe XD : Ce logiciel est dédié à la réalisation de maquette et facilite grandement l'intégration par ses outils très pointilleux.
  • Illustrator : Ce logiciel de conception graphique vectorielle peut vous servir pour la réalisation de la maquette et de tous vos éléments graphiques.

 

Si vous avez du temps à consacrer à ce projet, il vaut mieux développer votre maquette sur un logiciel plutôt que de télécharger un thème qui ne sera pas spécialement conçu pour vous. Si vous êtes un intégrateur ou si vous avez des notions en HTML5 et CSS3, vous pourrez parfaitement intégrer votre maquette sur votre site web.

Votre site doit être rangé du mieux possible pour que l'internaute puisse naviguer sans difficulté. En structurant vos URLs ( pages parentes et pages enfants ), vous implémentez une logique de navigation sur votre site. Cela permet de nouvelles perspectives et de redéfinir une base à votre site.

Étape 4 : Choisir l'hébergement

Il est temps d'améliorer la qualité et la vitesse de réponse de vos pages ! Pour cela, il faudra se pencher sur la question de l'hébergement. Afin de pouvoir faire charger des pages rapidement du côté client, il faudra louer votre serveur et privilégier la qualité du service ( au détriment du prix ). L'hébergeur O2Switch propose un service unique en France vous permettant d'obtenir un serveur de qualité pour 60€/an.

Voici quelques critères à prendre en compte pour votre hébergement de site internet :

  • La qualité du service ( de manière générale )
  • Le support technique
  • Le support client
  • La sécurité, les failles ou bien les maintenances

Enfin, n'hésitez pas à demander des avis autour de vous pour vous faire une meilleure idée des hébergeurs et de leurs services.

Étape 5 : Choisir la technologie de son site

Maintenant que vous avez conçu votre maquette, vous devez réfléchir à la manière de créer votre site.

 

Par exemple, allez-vous installer un CMS ?

Ou si vous êtes développeur, quelle est la librairie que vous allez utiliser ?

 

Il est important de remettre en question le moyen que vous entreprenez pour développer votre site de la meilleure façon qui soit.

Voici quelques conseils pour bien choisir sa technologie sur son site web :

  • Choisir un CMS facile d'utilisation et qui laisse une marge de manœuvre (possibilités techniques, difficulté de maitrise du backoffice... )
  • Pour les développeurs, être familier avec une librairie ou un framework avant de développer son site internet
  • Utiliser les dernières versions de PHP sur son serveur web

Étape 6 : Installer un système de sauvegarde

Vous n'aimeriez sans doute pas perdre vos données à cause d'une minuscule erreur ? C'est évident, il faut être prudent surtout lors d'une refonte d'un site web.

 

C'est pourquoi il est primordial que vous sauvegardiez votre site.

Voici la meilleure solution pour sauvegarder votre site actuel :

  1. Sauvegarder le dossier racine (www) depuis le FTP, sur votre bureau
  2. Sauvegarder la base de données au format SQL

La méthode ci-dessus est la plus "basique" pour sauvegarder votre site, mais c'est aussi la plus efficace.

Ou alors, vous pouvez utiliser une extension WordPress pour sauvegarder vos fichiers, mais à vos risques et périls.

Étape 7 : Travailler hors-ligne

Pour ne pas perturber vos visiteurs lorsqu'ils souhaitent accéder à votre site, il est indispensable de laisser une version production.
Vous pouvez développer votre version prototype :

  • Sur un autre serveur
  • Sur le même serveur, sur deux dossiers séparées, et deux bases de données séparées

C'est pourquoi je vous recommande fortement de bien séparer prototype et site en production.
Inutile de vous expliquer à quel point il est important de sécuriser votre process un maximum.

Si vous n'avez pas la possibilité de le faire, alors vous pouvez tout simplement proposer une page de maintenance avec un compteur. Mais dans ce cas, il est important de créer des sauvegardes très régulièrement lors de votre développement.

Étape 8 : Optimiser le code

Afin d'optimiser les fichiers de chargement sur votre site, il est important de bien choisir ses librairies CSS et JS.

Il est d'ailleurs tout à fait possible de créer votre site internet sans librairie externe, ni-même de frameworks.

L'optimisation d'un code doit être la plus fine et travaillée possible, car la plupart des librairies vous proposent des fichiers remplis de styles ou de scripts. Et la plupart du temps, vous n'en aurez pas besoin ( surtout si vous avez créé votre maquette vous-mêmes ). Vous pouvez également optimiser Bootstrap, comme l'explique Benjamin Code en vidéo.

Étape 9 : Développer le webdesign

Et ici, je pars du principe que vous utilisez un CMS comme WordPress, ou bien un framework permettant de gérer vos interactions avec votre base de données.

Désormais, il vous faut développer le site internet de manière à respecter votre maquette. Pour cela, plusieurs éléments sont à prendre en compte :

  • Les typographies : Pour intégrer correctement votre police d'écriture, vous pouvez utiliser Google Font.
    Vous pouvez également intégrer vous-même votre police avec la propriété CSS font-family.
  • Les couleurs : Pour utiliser les mêmes couleurs que votre charte graphique, vous pouvez simplement copier-coller votre code couleur au format hexadécimal.
    Vous pouvez intégrer le code couleur avec les propriétés CSS background-color ou color.
  • Le respect des mises en page.
  • L'intégration des images contextuelles ou de décor.

Étape 10 : Créer des redirections 301

Le code de redirection 301 permet de rediriger une ancienne page supprimée vers une nouvelle page.

Dans le cas d'une refonte, il n'est pas rare de voir ce cas et cela peut nuire gravement à votre référencement naturel.

Dans le cas où d'anciens contenus ont été supprimés et qu'ils sont connus par les moteurs de recherche, alors vous pouvez :

  • Utiliser l'erreur 410 pour valider la suppression des pages
  • Ou créer une redirection 301 vers les nouvelles pages