Refonte d’un site internet : les points essentiels de cette transformation

La refonte d’un site internet est une opération cruciale dans le développement de votre organisation. Comprenez sa finalité afin de piloter au mieux cette étape stratégique pour votre activité

A l’ère du tout digital, la refonte de votre site internet est le fer de lance de la transformation numérique de votre organisation. 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 deux jambes 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, à savoir :

  • votre site est ancien
  • son design est vétuste
  • vous naviguez avec lenteur sur les pages
  • vous envisagez une optimisation SEO de son contenu...
  • .. et/ou une optimisation ergonomique
  • vous voulez une nouvelle charte graphique ou une nouvelle identité visuelle

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.

Les différentes refontes


Refonte design


refonte site internet 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 d’utiliser un nouveau logo, une nouvelle charte graphique et développer de nouvelles maquettes du site. De nombreuses bonnes pratiques sont envisageables, parmi lesquelles celles qui suivent.

L’influence de la couleur dans le design

comment creer un logo cercles chromatiques

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 panneau de signalisation pour marquer une erreur en plus d’appliquer une couleur rouge à la page.

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 ramassée, 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 suffisant pour laisser respirer le texte. En design comme en amour, il faut laisser de l’espace pour être attractif !

Repensez votre navigation

La navigation doit être claire. Pour être claire, elle doit être simple. Prohibez les arborescences complexes, aux dispositions exotiques pour ne pas écrire excentriques et où des dizaines de rubriques seront affichées à chaque fois que l’utilisateur parcourra les rubriques du menu avec sa souris. Veillez aussi à respecter quelques règles de mise en page.

  • Le menu doit se trouver en haut de votre site
  • Positionnez un bouton d’action en haut à droite de la page. Il s’agit d‘une convention et les utilisateurs ont pour habitude de trouver ce type d’items à cet endroit
  • Une autre règle à respecter est de maintenir fixe le header de la page, ce qui évite d’avoir à chercher l’information lors de la navigation. De manière générale, il est bon que l’information soit facilement accessible. Dans la mesure où le temps d’attention moyen sur internet est de 8 secondes, un utilisateur qui ne trouve pas rapidement l’information qu’il cherche aura tendance à quitter votre site
  • Pensez aussi à utiliser un « fil d’ariane ». C’est très pratique pour indiquer à l’internaute où il se situe sur la page et c’est donc une bonne pratique qu’il faut garder à l’esprit.

Sur mobile

Optimisation contenu architecture url

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 janvier 2020 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.

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.

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 ; textes qui précisent le type d’information attendue dans chaque encart du formulaire (par exemple le format d’une date de naissance en jj/mm/aaaa).

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.

Retrouvez tous nos conseils sur l'optimisation de l'ergonomie d'un site internet dans cet article.

Refonte technique


refonte site internet refonte technique

Les deux principaux objectifs d’une refonte technique visent à mieux référencer un site internet et à 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.

Vitesse de chargement

La première étape consiste à utiliser des pages web statiques plutôt que des pages dynamiques. 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 composant ne requiert presque aucun effort de chargement du serveur ce qui accélère grandement sa vitesse d’affichage et offre un rendu ultra rapide.


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 donc 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).

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. Les images et les médias sont une source importante de ralentissement d’une page web. îLa quatrième étape de notre refonte technique a pour finalité de 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.


Nous abordons enfin la cinquième et dernière étape de la refonte technique de votre site. Elle consiste à mettre en cache votre base de données 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.

Vous pouvez trouver plus de détail sur l'optimisation de la vitesse de chargement des pages dans notre article dédié.

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

Outils google seo
  • Google Search console, pour piloter votre référencement et améliorer vos performances sur Google. Grace à cette solution, il est possible de prendre connaissance de variables utiles comme les mots clés qui ont conduit les utilisateurs à consulter votre site. Il est également possible de suivre les statistiques issues de la visite des robots indexeurs de Google et de disposer de bien d’autres fonctionnalités intéressantes pour votre visibilité.
  • Google Lighthouse, afin de mesurer la qualité de vos pages web, leur performance et leur accessibilité ou encore de tester des Progressives Web Applications (PWA).
  • Google Analytics, l’outil incontournable pour qui souhaite analyse son audience, évaluer quelles pages de son site sont les plus consultées, quel type d’appareils ont été utilisés pour y accéder, depuis quel pays etc. Cette solution permet de comprendre le parcours de l’utilisateur pour l’optimiser et délivrer une meilleure User Experience.
  • Google my business, pour gérer les avis clients et rendre visible votre société, votre établissement, votre marque.

Si vous voulez en savoir plus sur ces outils, lisez cet article.

Conclusion


La refonte d’un site internet est une étape cruciale de la vie d’une organisation. 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 in fine, décupler votre potentiel.

Vous souhaitez faire une refonte de votre site internet ? Snoweb a développé pour vous un CMS pour créer simplement votre site internet.

Articles en rapport


Partager cette page!


Chaque semaine dans votre boite mail, recevez un condensé de conseils et de nouveautés Snoweb !

Nous diffusons des cookies afin d'analyser le trafic sur ce site. Les informations concernant l'utilisation que vous faites de notre site nous sont transmises dans cette optique.