site internet

Les 10 étapes à ne pas oublier pour une refonte d’un site internet

La refonte d’un site internet est une opération cruciale dans le développement de votre entreprise. Comprenez sa finalité afin de piloter au mieux cette étape stratégique pour votre activité. Dans cet article, on vous présente deux types de refonte : web design et technique.

Anne-Laure CompainAnne-Laure Compain

Anne-Laure Compain

Designer chez Snoweb
Publié le 16 mars 2021 (Mise à jour le 8 avril 2022)


A l’ère du tout digital, la refonte de votre site internet est le fer de lance de la transformation numérique de votre entreprise.

Qu’il s’agisse d’un site vitrine, d’un site de e-commerce ou encore d’un espace intranet, cet outil constitue une part intégrante de vos actifs immatériels.

Il en résulte que l’évolution de votre structure va tôt ou tard conditionner une refonte totale ou partielle de votre site internet. Non seulement parce que ce dernier a été designé, conceptualisé et conçu à un stade de développement que votre affaire a probablement dépassé. Également, parce que les technologies du web évoluent rapidement et qu’il est essentiel de s’approprier les nouveautés les plus porteuses tout comme celles qui garantissent les plus hauts niveaux de sécurité.

Proposons tout d’abord une définition simple de ce qu’il faut entendre par « refonte de site internet » : cette opération consiste à modifier d’une manière ou d‘une autre – aussi bien dans ses attributs graphiques que techniques – votre site.

Puisque la mise à niveau des performances techniques et l’embellissement graphique sont les piliers sur lesquelles s’appuie une refonte de site internet, nous pouvons d’ores et déjà isoler les cas dans lesquels une telle transformation doit être envisagée. A chacun de ces objectifs correspond un type d’actions spécifiques pour lesquelles divers paramètres doivent être pris en considération.

Or, c’est justement ces paramètres que nous proposons de présenter dans l’article qui suit.

1. Pourquoi faire une refonte de site internet ?

Pourquoi faire une refonte de site internet ?
ancien

SITE INTERNET

vétuste

DESIGN

lentes

PAGES WEB

Pourquoi faire une refonte de site internet ?
pauvre

RÉFÉRENCEMENT

pénalisante

ERGONOMIE

pas moderne

IDENTITÉ DE MARQUE


2. Refonte design

Votre site internet a un aspect ancien, voire vétuste ? Les retours que vous pouvez entendre sur son aspect sont mitigés et vous constatez que la plupart des autres sites que vous consultez – y compris ceux de vos concurrents - sont esthétiquement plus aboutis ?

Voici les conseils qui visent à orienter vos premiers efforts de refonte graphique.

Vous pourriez par exemple envisager :

  • utiliser un nouveau logo
  • établir une nouvelle charte graphique
  • développer de nouvelles maquettes du site
  • améliorer l'ergonomie du site internet

Les bonnes pratiques pour une refonte :

Couleurs

Étude de leurs significations

Le choix d'une couleur va influencer inconsciemment une action d'une personne.

Les couleurs et leurs significations

Textes

Amélioration de la lisibilité

Bien choisir une typographie, les tailles de texte et leurs couleurs permet une meilleure visibilité.

La lisibilité des textes

Navigation

Respect des règles de base

Certaines dispositions sont ancrées dans les esprits des utilisateurs, ils sont habitués à les utiliser alors pourquoi changer.

La navigation

Responsive

Smartphones et tablettes

Tous les sites actuels disposent d'une version responsive pour les mobiles et tablettes, mais peut-être pas le votre.

Le responsive

Formulaires

Contact et newsletter

C'est le premier contact qu'un utilisateur a avec vous, soyez simple et concis, ne demander pas trop d'informations.

Les formulaires

Maquettes

Modernes et épurées

Plus vos maquettes sont épurées et simples et plus l'information sera visible et retenue par l'internaute.

Les maquettes

2.1 L’influence de la couleur dans le design

Peut-être avez-vous lu le Petit livre des couleurs de Michel Pastoureau ? Si ce n’est pas le cas, foncez l’acheter et inspirez-vous en car la couleur a une symbolique.

Pire, le choix des couleurs influence inconsciemment le comportement de vos visiteurs.

La raison est simple, les couleurs ont une symbolique inconsciente :

  • Le bleu est synonyme de fiabilité, de sécurité mais également de connaissance. C’est pourquoi les acteurs de la technologie comme LinkedIn ou Facebook ou encore de la santé l’adoptent. C’est la couleur du consensus, veillez cependant à ne pas l’utiliser pour des produits alimentaires. Contrairement au jaune ou au rouge, il ne procure pas une sensation d’appétit.
  • Le rouge condense un fort potentiel visuel. Faites-en usage pour provoquer un sentiment d’urgence, pour une promotion par exemple. Employé sur des panneaux de circulation signalant un danger, c’est la couleur idéale pour engager un appel à action, une décision rapide, un achat impulsif.
  • Le jaune est associé à la joie, aux loisirs et est ainsi souvent employé dans un contexte lié à l’éducation, à l’enfance. Evitez d’en faire usage pour des produits masculins ou des articles de luxe. Pour le luxe optez pour la couleur or !
  • Le vert revêt une connotation symbolique de stabilité, il suggère la croissance d’une société. Paradoxalement, il est aussi employé pour connoter le thème de la nature, du bien-être, mettre en avant l’écologie ou la fraîcheur. La différence entre ces antipodes est délimitée par la teinte : un vert clair ou à teinte médiane est symboliquement relié à l’écologie, un vert foncé au monde de la finance et de l’argent.

Cependant, tout le monde ne perçoit pas la couleur de la même manière. Elle ne doit pas être le seul élément que vous utilisez pour transmettre un message. Ajoutez des formes, par exemple une croix ou un attention pour marquer une erreur en plus de lui appliquer une couleur rouge.

2.2 L’importance des textes et leur lisibilité

La typographie peut faire la différence entre un design passable et un bon design. En général le texte recouvre une part non négligeable de votre site. Il est donc important que sa lecture soit visuellement agréable.

Pour bien choisir votre police d’écriture, gardez à l’esprit quelques règles. D’abord, éviter de choisir une police surchargée et faiblement espacée car il est important d’aérer votre texte pour augmenter son potentiel d’attraction visuelle.

Evitez les typographies trop rondes, trop petites, trop grasses mais choisissez-la fine, avec un interligne (espace entre deux ligne) suffisant pour laisser respirer le texte.

2.4 Site visible sur mobile

Saviez-vous que plus de la moitié du flux internet est réalisé sur smartphone ?

Un autre chiffre intéressant est à mentionner : dans le monde il y avait en 2021 plus de 5 milliards d’utilisateurs uniques de smartphones. Autrement dit, il est indispensable de penser au confort de navigation de ces internautes.

Rendez donc votre site « responsive », c’est-à-dire adapté à ce type d’appareils. Pour cela, les images et illustrations utilisées doivent s’adapter aux mobiles.

Les boutons et icônes doivent être suffisamment grands pour pouvoir cliquer dessus avec un pouce, quelque soit la taille du téléphone ou du doigt.

De nos jours tous les sites internet développés sont responsive mais ce n'est peut-être pas le cas de votre site actuel réalisé dans les années 2000.

2.5 Formulaire de contact

Voici l’un des éléments les plus importants de votre site internet. Car c’est le formulaire qui va permettre au visiteur de devenir un client potentiel. Plus que de recueillir de l’information, cet item a pour vocation de créer un premier lien entre vous, c’est pourquoi il est préférable de le simplifier.

En effet, en demandant trop d’informations pour une simple prise de contact, votre prospect pourrait se lasser de la bonne impression que vous lui avez faite avec votre site internet et tout simplement ne pas remplir ce formulaire. In fine, vous risqueriez de rater une prise de contact, donc un client potentiel et par ricochet un accroissement de chiffre d’affaire.

Certaines informations ne sont pas essentielles pour que vous puissiez recontacter une personnes. Indiquez donc des champs obligatoires et non-obligatoires.

Pensez également que le formulaire de contact sera rempli par un internaute seul face à son écran. Soyez donc prudent et renseignez des labels et des "placeholder". Il s’agit des textes grisés, avec une faible opacité et qui disparaissent quand vous cliquez dessus pour remplir le formulaire. Ces textes ont pour but de préciser le type d’information attendue dans chaque encart du formulaire (par exemple le format d’une date de naissance en jj/mm/aaaa).

Voici un exemple de formulaire de contact

Les champs obligatoires sont indiqués par un * et on demande que très peu d'information à l'utilisateur

*
*
*
*

2.6 Modernisez vos maquettes

Lorsque vous développez de nouvelles maquettes de votre interface-utilisateur, pensez à en simplifier le design. Décomposez les parties de votre site en blocs et gardez pour fil rouge la simplicité et l’épuration de ces derniers.

La tendance actuelle est d’agrémenter ces blocs de micro-interactions, c’est à dire de composantes visuelles qui traduisent l’action de l’utilisateur. Un exemple classique des micro-interactions est la surbrillance des rubriques d’un menu quand vous les parcourez avec le curseur de la souris. Il s’agit bien d’un effet visuel qui traduit l’action de l’utilisateur et ça dynamise l’expérience visuelle.

De nombreux types de micro-interactions existent, n’hésitez pas à les utiliser mais n’en abusez pas.

Autres atouts que vous pouvez ajouter pour moderniser votre site internet se sont des animations ! Il y en a de toute sorte, mais chez Snoweb ont préconise deux sortes d'animations :

  • Animation SVG en CSS ou SMIL
  • Animation Lottie

Pourquoi Snoweb ne préconise que ces deux types d'animation ?

Ces deux type d'animation sont optimisées et ont un léger impacte sur les performances d'une page, c'est pour cela que nous vous conseillons de les utiliser. Elle ne vont donc pas ralentir le chargement de vote page.


3. Refonte technique

Les deux principaux objectifs d’une refonte technique visent à

  • mieux référencer un site internet
  • palier à la lenteur de chargement de ses pages

Abordons donc deux thèmes à savoir, comment améliorer la vitesse de chargement des pages et quels outils utiliser pour suivre le trafic de votre site internet

Pour des informations complémentaires, n'hésitez pas à consultee notre article sur l'optimisation de la vitesse de chargement des pages.

3.1 La vitesse de chargement

La première étape consiste à utiliser des pages web statiques plutôt que des pages dynamiques. En effet, une page statique propose un contenu qui ne varie pas en fonction des données de l’utilisateur comme sa localisation, l’heure de consultation ou toute autre information tirée des cookies. Leur texte n’est pas chargé depuis une base de données mais est généré depuis un fichier de code source fixe.

Il en résulte que ce type de page ne nécessite presque aucun effort de chargement du serveur ce qui accélère grandement sa vitesse d’affichage et offre un rendu ultra rapide.

3.2 Le code coverage

La deuxième étape d’une refonte technique consiste à analyser votre couverture de code.

Il s’agit d’une métrique qui vous indiquera si les tests du code de votre page web sont bons. Il s’agit d’une mesure de la qualité du code exécutée par vos tests et donc, cet indicateur permet de mesurer la qualité d’une page.

Nous n’entrerons pas dans les considérations techniques de cet outil car c’est un sujet à part entière.

Gardez cependant à l’esprit que la couverture de code est un indicateur de qualité d’une page web et qu’atteindre 100% de code coverage n’est pas forcément un objectif pertinent (un taux de 80% est parfois jugé comme objectif suffisant de couverture de code).

3.3 Le lazy loading

Ensuite, la troisième étape consiste à adopter le lazy loading, c’est-à-dire à charger les bons éléments au moment opportun plutôt que d’exécuter l’ensemble de votre page en un seul bloc.

Cette pratique est surtout valable pour le chargement des images et plus généralement des médias, gourmands en données.

Une étape complémentaire à cette troisième consiste à optimiser nos médias. Il faut les alléger : compressez-les ! Pour ce faire, utilisez des outils comme GZIP qui permet de réduire la taille de n’importe quel fichier et ayez le réflexe de minifier les fichiers HTML, CSS et Javascript.

3.4 Le cache

Nous abordons enfin la cinquième et dernière étape de la refonte technique de votre site. Elle consiste à mettre en cache le plus de données possible afin de réduire la latence de récupération des dites données.

En évitant de recharger intégralement un élément qui aurait déjà été chargé par le passé, vous gagnerez en performance.


4. 6 outils à connaître pour suivre la santé de votre site

Google Search console

Suivez l'expérience de vos pages, l'ergonomie et leurs rapidité à la fois sur ordinateur et sur mobile...

Google Lighthouse

Mesurez la qualité de vos pages web, leurs performances, leur accessibilité, testez des Progressives Web Applications...

Google Analytics

Pilotez votre référencement : analyse des requêtes utilisateur, suivi des statistiques, données d'indexation dans Google...

Google Mobile Friendly

Testez si votre site internet est compatible pour la navigation sur mobile et s'il ne l'est pas étudiez les recommendations...

Google PageSpeed Insight

Testez et mesurez les performances de votre site internet : vitesse de chargement, optimisations du code, des images...

Google Résultats enrichis

Vérifiez s'il n'y a pas d'erreur sur les schémas de vos pages pour ne pas impacter la santé de votre site...

5. Conclusion

La refonte d’un site internet est une étape cruciale de la vie d’une entreprise. Mal l’exécuter pourrait impacter sérieusement votre développement. Pourtant, plutôt qu’une menace il faut y voir des opportunités.

En effet, une refonte bien orchestrée – tant du point de vue graphique que technique – offre la possibilité de mettre à jour votre site internet, d’y ajouter les fonctionnalités les plus récentes, celles qui séduisent les visiteurs et enfin, décupler votre potentiel.

Je souhaite faireune refonte de mon site internet
En savoir plus

Le sujet des site internet vous fascine, alors ces articles devraient vous intéresser également.

Inscrivez-vous à notre newsletter web design

Recevez les dernières nouveautés et astuces sur le web design directement dans votre boite e-mail.

Partager cet article sur les réseaux sociaux

Nos derniers articles sur le web design

Inscris-toi à notre newsletter et reçois les dernières nouveautés et astuces en lien avec le web design.

pop-up newsletter web design