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 :
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.
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.
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.
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.
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 !
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.
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.
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).
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.
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.
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é.
Si vous voulez en savoir plus sur ces outils, lisez cet article.
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.
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.
