« Article révisé le 15 novembre 2022 »
Que vous soyez en recherche pour une première conception de site web ou la refonte de votre site web, vous devrez sans contredit savoir vous entourer des personnes à vision stratégique dans votre entreprise. Refaire un site web c’est s’engager dans une mission où le choix des bons partenaires est une question de succès ou d’échec. Transparence, communication ouverte, réactivité et travail d’équipe sont tous des ingrédients indispensables à la réussite de cette démarche.
Vous avez pris la décision d’engager la refonte du site Web de votre entreprise, nous vous suggérons de commencer par la lecture des 50 questions à se poser avant la refonte d’un site Web.
Il est possible de faire de votre site Web votre meilleur allié. Il peut constituer à lui seul le prolongement de votre équipe, l’extension numérique de plusieurs de vos départements en devenant votre démarcheur ou votre représentant des ventes, votre recruteur, votre relationniste, votre ambassadeur, votre conseiller, votre assistant, votre agent de réservation ou de service à la clientèle, votre technicien au support, votre formateur, votre distributeur et bien plus! Le tout se joue vraiment dans la planification rigoureuse de sa création. Voici les 10 étapes de conception d’un site web en agence.
Identifiez les raisons qui vous poussent à faire une refonte de site web. Gardez en tête que la refonte d’un site web peut se faire pour de multiples raisons.
Dans la planification de la refonte de votre site web, vous aurez à prendre en compte les besoins de chaque département. Bien sûr, le site web est un outil fantastique pour les ventes et il devrait évidemment répondre au besoin de générer des opportunités depuis vos campagnes marketing, mais plusieurs autres besoins peuvent être répondus. C’est le cas pour les ressources humaines.
Il est certes important de considérer votre site web comme un outil majeur pour les futurs employés. Votre stratégie doit inclure un volet ressource humaine. Dans un contexte de plein emploi, les entreprises qui conservent le cap sur leurs objectifs de croissance ont pour la plupart des mécaniques de collecte de CV spontanés et des pages au sujet de la culture de l’entreprise. Ils réussissent à communiquer de manière réfléchie les avantages à joindre leur équipe. Les méthodes qu’utilisent les candidats de nos jours sont variées. Pour plusieurs, appliquer à l’aide d’un simple clic en liant leur profil LinkedIn ou Indeed est maintenant rendu une norme. Les formulaires doivent demander l’information nécessaire à la préqualification du candidat, sans plus. La mise en valeur de votre marque employeur, de la vie en entreprise, du capital humain, de l’implication sociale ou des avantages sociaux contribue tout autant à bonifier l’attraction de talents.
D’autres décisions devront être prises en amont de la refonte de votre site web selon votre niveau d’investissement, votre modèle d’affaires et du contexte de votre industrie dans son marché. Une stratégie numérique devrait constituer la matrice de départ. Elle doit respecter votre expérience client en tenant compte des points de contact numériques et des autres canaux de trafic prévus dans les parcours clients. Vous aurez à développer les points suivants pour vous assurer de couvrir l’ensemble des facteurs qui influencent la refonte.
Selon l’expérience-utilisateur (ou UX Design), une expérience de navigation réussie est un moment vécu par un utilisateur pendant lequel ses interactions avec un service numérique lui permettent d’accomplir ses tâches aisément et de manière agréable. En ce sens, le rôle du designer UX est d’user d’empathie pour prévoir les comportements des utilisateurs dans le but de réduire toutes les frictions pouvant être causées par un mauvais design. Le designer passera par quatre grandes étapes pour être en mesure de créer la meilleure expérience possible: la recherche, la définition, le prototypage et la phase de tests.
La phase de recherche permet d’acquérir la connaissance nécessaire sur les utilisateurs afin de bâtir une empathie suffisante pour pouvoir répondre à leurs besoins. Nous recherchons également des informations sur le secteur afin de nous transformer en experts du domaine pour la durée du projet, car il est essentiel de comprendre le sujet afin de bien le communiquer. C’est en discutant avec vous (et lorsque la situation le permet vos clients), mais aussi en prenant connaissance de ce que les compétiteurs (afin de cerner les enjeux de l’industrie), que nous allons pouvoir nous faire une idée concrète. La création de personas et de parcours utilisateurs permettra de façonner un site web qui répondra pleinement aux besoins et aux attentes de ses utilisateurs.
Vient ensuite la phase de définition où nous pouvons identifier et hiérarchiser les problèmes afin de mieux les affronter. C’est dans cette étape que nous allons pouvoir créer l’arborescence du site web qui définit toutes les pages du site et leur hiérarchie respective. Nous générons des idées générales sur la voie à suivre pour mieux répondre aux besoins de l’utilisateur. Quel type de menu sera le plus efficace pour favoriser la navigation ? Quels sont les éléments à privilégier sur la page pour générer une interaction avec l’utilisateur ? Voilà le genre de problèmes que nous résoudrons à ce stade.
On passe maintenant à la création de prototypes, où l’on construit le site web sans se soucier de son aspect visuel, mais en se concentrant sur sa fonctionnalité. Cette étape est souvent appelée « wireframes » ou maquettes de fil de fer. Nous voulons définir les zones de structuration globale du site, mais aussi établir l’interactivité, les fonctionnalités, l’orientation, les informations disponibles pour favoriser l’ergonomie de la plateforme numérique.
Le designer UX n’est pas l’utilisateur du site, c’est pourquoi la phase de test permet de confronter les idées du designer à la réalité des utilisateurs. Un test réussi ou non permet d’ajuster rapidement les prototypes sans avoir recours à une programmation complexe, jusqu’à ce que l’expérience soit conviviale pour l’utilisateur.
Tout au long de ce processus, l’utilisateur reste au centre de la réflexion du concepteur afin que tout soit construit pour répondre à ses besoins et rendre la navigation agréable.
SEO est une étape cruciale du développement du site web.
La recherche de mots clés, ou recherche sémantique, est l’étape qui permet de connaître le volume de recherche des mots clés et leurs usages sur le Web. Pour ce faire, il existe de nombreux outils.
Pour trouver les premières idées de mots-clés, il est possible d’utiliser Semrush à partir de votre site Web actuel et de le comparer à la concurrence. L’objectif est de découvrir quels sont les mots-clés les plus performants pour ces sites dans le classement des moteurs de recherche. Vous pouvez ensuite utiliser un outil de recherche de mots-clés, tel que Answerthepublic, Ubersuggest, Answersocrates ou Keywords Everywhere. Ces outils vous permettent de créer de longues listes de mots clés qui ont une certaine relation d’un point de vue sémantique. Moz Keyword Explorer et Google Ads Keyword Planner Tool vous permettront d’extraire des données SEO importantes, telles que le volume de recherche et la difficulté des mots clés.
Google Trends permet d’identifier les tendances de recherche sur Google. L’outil permet, entre autres, de découvrir la saisonnalité de certains termes et leurs utilisations sur une base géographique.
En plus des mots-clés, l’optimisation se poursuit sur la structure de l’information figurant dans le code de vos pages. Il y a plusieurs points à prendre en considération :
La balise HTML H1 indique un titre sur un site web. Par conséquent, une seule balise H1 doit être utilisée pour chaque page. En outre, la structure des titres doit suivre la numérologie. Il est recommandé d’insérer les mots-clés sur lesquels vous souhaitez être référencé au début du titre.
Les balises de titres, de descriptions et de mots-clés aident les utilisateurs et les moteurs de recherche à comprendre le contenu proposé par vos pages web. Une bonne description permet d’augmenter le taux de clic (CTR). Vous pouvez y insérer le mot-clé choisi pour cette page.
Assurez-vous qu’il n’y ait pas de lien brisé ou de page 404. Vérifier les liens internes de votre site web et les pages référencées dans les résultats de recherches. Pour surveiller ces erreurs dans Google Analytics 4, veillez à insérer le code d’erreur 404 dans le titre. Pour corriger ces erreurs, vous devez configurer une redirection permanente (301) vers une page pertinente.
Les URL des pages doivent refléter le contenu de la page. Encore ici, l’idéal est d’y insérer le mot-clé en question. Éviter des structures de liens web trop complexes. Vos utilisateurs devraient comprendre la structure du site web qu’à la lecture de l’URL.
Un certificat SSL permet de sécuriser le site web ainsi que les données qu’ils transfèrent. Comme Google accorde une importance cruciale ainsi qu’une priorité aux sites sécurisés par HTTPS pour le référencement, sécuriser son site avec un certificat de sécurité permet d’éviter une perte de référencement ou de visiteurs. De plus, depuis 2018, sur certains navigateurs, comme Google Chrome, n message de sécurité intervient avant d’entrer sur le site et informe le visiteur d’un risque lié à la navigation sur ce site. Le message mentionne alors si le site ne dispose pas d’un certificat SSL et n’est donc pas sécurisé.
Une fois la stratégie validée, l’expérience utilisateur et les mots-clés liés à leurs recherches identifiés, viendra l’étape de la création de contenu. La rédaction de votre contenu ciblé devra tenir compte des personas visés par votre organisation, de vos propositions de valeur, des tendances de recherche sur le moteur de recherche et bien sûr de votre offre de service.
La rédaction reste l’une des étapes les plus difficiles pour toute entreprise. Elle met souvent en évidence le manque d’alignement de l’organisation. C’est pourquoi il est essentiel d’avoir des messages clés, des personas et une offre claire pour éviter les conflits internes entre les opérations, les ventes et le marketing durant le projet de refonte ou pire encore, une fois le projet terminé.
Lors des étapes de rédaction, vous devez placer l’intérêt du client au premier plan. L’expérience de lecture doit être alignée sur l’intention de recherche. Il est difficile de connaître avec certitude l’intention de vos visiteurs, c’est pourquoi vous devez vous assurer d’être aussi pertinent et linéaire que possible dans vos propos. Beaucoup essaieront de vous convaincre avec « …le bon contenu, au bon moment, à la bonne personne… » et comme il est difficile, voire impossible dans certains cas de garantir cette promesse, il est beaucoup plus important de s’assurer que votre contenu sera facilement trouvé/indexé, dans un endroit facile à retenir, et conservé pour une référence future. De cette façon, malgré le manque de temps de vos visiteurs, votre contenu pourra être consulté en temps voulu et selon leur disponibilité.
Il existe 4 types de pages.
Le but des pages de navigation est d’orienter les gens vers le contenu qu’ils recherchent ; les exemples les plus courants incluent la page d’accueil, les pages de renvoi et les galeries.
Les pages de contenu incarnent la substance de votre site et motivent la visite des internautes. Elles informeront relativement à l’intérêt du visiteur et seront indexées principalement par des recherches organiques ; les articles de blogue et les pages de produits en sont des exemples.
Les pages fonctionnelles permettent aux gens d’effectuer une tâche, comme effectuer une recherche ou valider une inscription d’infolettre; les exemples comprennent les pages de recherche, les formulaires de soumission et les candidatures.
Dans le domaine du marketing numérique, une page d’atterrissage (souvent appelée landing page) est une page Web autonome créée spécifiquement aux fins d’une campagne de marketing ou de publicité. C’est là qu’un visiteur « atterrit » lorsqu’il a cliqué sur une annonce Google Ads, LinkedIn Ads, ou encore une publication sponsorisée sur les médias sociaux par exemple. Les pages d’atterrissage sont conçues dans un seul but : celui de convaincre. L’appel à l’action joue donc un rôle essentiel pour ce type de page.
En fonction de l’objectif à atteindre avec une page, vous devez adapter votre écriture pour orienter, informer, accompagner ou convaincre.
Le diagramme ci-dessous démontre la synergie entre les utilisateurs, les moteurs de recherches et votre contenu. Le croisement entre une offre de produits/services claire, des termes de recherches ciblant l’intérêt de vos utilisateurs et optimisé pour l’indexation dans les moteurs de recherches est gage de succès en termes de volume de conversion. Toutefois, délaisser un des trois volets aura un impact à la baisse sur le volume de trafic et causera par conséquent une diminution du volume de conversion.
Une fois la structure des étapes précédentes définie, l’étape de conception commence. Nous prenons les maquettes de l’étape de l’expérience utilisateur approuvées par le client et appliquons la direction artistique qui les rendra visuellement attrayantes et cohérentes avec la marque.
En nous inspirant de l’identité visuelle existante de la marque (couleurs, typographie, traitement des photos), nous construirons la direction artistique du site web en adaptant au besoin les éléments de l’identité visuelle à la plateforme numérique. Nous pouvons également compléter l’identité visuelle en ajoutant certains éléments qui demandent parfois moins de présence dans les formats imprimés que sur un site web, par exemple en créant une famille d’icônes.
Cette direction artistique peut être présentée sous la forme d’une planche d’inspiration (moodboard) à valider par le client ou directement appliquée aux maquettes en fonction du budget. L’utilisation de la planche d’inspiration permet de communiquer rapidement l’idée générale de la direction artistique et d’en voir l’ensemble en un coup d’œil sans prendre le temps de l’appliquer directement à la structure établie des maquettes de fil de fer (wireframes).
Une fois la direction artistique établie, la création de la maquette proprement dite peut commencer. Nous reprendrons le travail effectué par le designer UX et appliquerons la direction artistique pour créer une vision visuelle unifiée entre les deux. Si la rédaction du contenu est effectuée à ce stade, nous serons en mesure d’intégrer le contenu pour obtenir l’idée la plus claire du site Web. Nous créons les icônes nécessaires, suivies d’une sélection de photos et du choix des polices, de leur taille et de leur espacement.
Nous pouvons suggérer des types d’animations qui correspondent à la direction artistique afin qu’elles puissent être programmées dans les étapes suivantes. Nous planifions l’état des boutons au survol et au clic, l’état des formulaires, lorsqu’ils sont sélectionnés et remplis. Nous planifions le style de chaque élément HTML typique, comme les listes à puces, les citations, les accordéons, les pop-ups, etc.
Une fois que toutes les maquettes sont produites et approuvées, nous livrons les fichiers sources à la programmation.
Chez Parkour3, nous évaluons les CMS du marché depuis 2002 et d’une année à l’autre, WordPress reste notre choix préféré. Bien sûr, nous nous adaptons au contexte et aux besoins commerciaux de nos clients, ce qui nous amène à travailler sur d’autres plateformes de temps à autre. De manière générale, HubSpot, WordPress et Shopify restent les CMS de choix pour plus de 95% de nos projets. Le choix du gestionnaire de contenu doit soulever plusieurs questions au moment de l’évaluation. Les 6 principaux facteurs auxquels nous prêtons attention sont :
Le choix du CMS est étroitement lié au langage de programmation que l’on souhaite utiliser pour le projet. Nous abordons les questions suivantes :
Par exemple chez Parkour3, on demandera à savoir si c’est en PHP, HTML et CSS.
L’autonomie des utilisateurs du CMS en aval de la publication en ligne est essentielle. La création d’éléments de menu, la gestion du contenu et la création de pages sont des tâches régulièrement effectuées par les gestionnaires de sites web. Il n’est pas rare de devoir créer des versions de démonstration et de tester des fonctionnalités afin de s’assurer du bon usage et de la facilité d’utilisation du gestionnaire de contenu.
Les performances de l’interface de téléchargement et de gestion du CMS sont évidemment un must. Il est recommandé de tester avec du contenu de démonstration pour l’évaluer :
Une fois ces quelques tests de base concluants, viendra le tour de la performance dans le développement des modules du CMS. Par exemple, si le CMS est en Laravel, doit-il être développé selon les standards Laravel ou pouvons-nous personnaliser l’approche ? Dans le cas d’un CMS propriétaire, il sera plus compliqué à maintenir, tant pour le client que pour nous. Il faut prendre en compte la quantité de données à gérer. Si vous avez par exemple 100 000 entrées et que votre CMS exploite une seule base de données, la gestion du contenu peut en pâtir. Pourquoi WordPress, HubSpot ou Shopify ? Chacun a ses points forts. C’est une question de taille de la communauté et d’innovation. Par exemple, WordPress qui propose leur fonctionnalité Elementor où le développement se fera par blocs au lieu de modèles de pages.
Vous devez sécuriser votre site web en fonction du type d’informations que vous collectez. Plus les informations que vous collectez sont sensibles, plus vous devrez vous pencher sur la question et élaborer un plan pour sécuriser votre site. Le CMS que vous choisirez devra respecter certaines normes de programmation. Bien qu’il existe une communauté consciente de la sécurité du CMS, il est important de savoir si les mises à jour de sécurité suivent les normes de l’éditeur du CMS et si les mises à jour ont été soumises à un ou plusieurs cycles de validation.
La taille de la communauté de développeurs aura un impact indirect sur les coûts et le temps de développement une fois que les bons modules, outils et technologies auront été choisis. Le soutien de la communauté joue un rôle lorsque des difficultés surviennent. Les développeurs mettront un point d’honneur à s’informer auprès des autres développeurs de la communauté sur des forums populaires tels que Stackoverflow, dans les sections de ressources du site Web de la langue associée, ou même dans le canal Slack de la technologie. Bien entendu, une assistance rapide doit être disponible. C’est pourquoi la taille de la communauté a un lien direct avec la rapidité avec laquelle les questions sont traitées et les problèmes résolus.
Chaque CMS possède ses propres modules de base et champs disponibles. Votre projet comprendra sans doute des personnalisations pour répondre à vos besoins et à vos processus d’affaires. Lors de la recherche du bon CMS, nous prêterons attention aux modules liés à vos besoins. Il est possible que certains de vos besoins ne soient pas immédiatement satisfaits au moment de l’installation du CMS.
C’est le moment de peser le pour et le contre ; êtes-vous prêt à développer les modules afin de conserver le CMS en question ou envisagez-vous simplement un autre CMS avec ces fonctionnalités disponibles dès le départ ? Les coûts liés au développement du module ou à la migration vers un autre CMS seront souvent déterminants. Pour des raisons de performance du site, il peut être judicieux de prendre le temps de développer le module afin de ne pas utiliser trop de plug-ins. De même, vous éviterez de développer une dépendance aux mises à jour.
Comme mentionné précédemment, vous devez identifier les fonctionnalités de haut niveau, puis évaluer si la plate-forme peut répondre aux fonctionnalités requises, que ce soit par le biais de modules existants ou à développer. Vous serez sans doute sensible aux coûts associés aux technologies évaluées. Certaines plateformes peuvent coûter plusieurs dizaines de milliers de dollars par an. Il sera important de mettre en perspective vos projections financières.
Lors de la création d’un site de commerce électronique, vos besoins en termes de processus commerciaux doivent être précis. La plateforme choisie deviendra un outil numérique important. Elle peut être connectée à votre logiciel de gestion des informations sur les produits (PIM). Il est probable que la plateforme doive se connecter à d’autres environnements tels que les services de livraison, le CRM, les Etailers, la plateforme de support en ligne, les applications propriétaires, etc. Si certains de ces modules sont développés, fiables et disponibles à la vente, il peut être judicieux de les acheter. Vous pouvez économiser un temps considérable et des coûts de développement. Il est important de rechercher si ces modules sont développés ou supportés par le vendeur du CMS ou s’ils proviennent de tiers. Certains vendeurs de CMS ne soutiendront pas les modules ou n’en valideront pas la qualité, vous devez donc être prudent dans votre sélection. Par exemple, dans le cas de Shopify ou WordPress/Woocommerce, de nombreux modules disponibles sur le marketplace de marché sont vérifiés et peuvent même être approuvés en termes de fonctionnalité.
Si vous vous inspirez d’un autre e-commerce, soit dans votre secteur, soit dans un secteur qui fonctionne selon un modèle économique similaire, vous devriez essayer d’en savoir plus sur leurs faux pas, les limites auxquelles ils ont été confrontés et les coûts totaux d’acquisition de la plateforme. Recherchez une preuve de concept concluante. Dans le cas d’un site Web statique, la gestion est assez simple, mais lorsque la plateforme doit gérer plusieurs bases de données, comptes et transactions, vous devez être particulièrement vigilant. Après tout, investir dans un site de commerce électronique représente un changement majeur pour de nombreuses entreprises.
Dans le cas où vous souhaitez utiliser des plateformes matures et entièrement développées telles que PayPal ou Stripe, l’intégration à votre e-commerce sera plutôt linéaire et sans trop de défis d’intégration. Si le projet s’oriente vers une solution telle que Beanstream ou Paysafe, la raison principale devrait être le besoin d’une plus grande personnalisation. Les économies à long terme devront justifier l’investissement plus élevé à court terme par rapport aux deux premières solutions mentionnées.
Si votre projet nécessite la vente de produits uniques, sans trop de variantes, et que votre base de données compte quelques milliers d’entrées, une grande majorité de plateformes pourront répondre à votre demande. Cependant, voici une liste non exhaustive de questions auxquelles vous devriez répondre avant de faire une sélection de plateformes.
Afin d’avoir une bonne performance opérationnelle, vous devez vous assurer qu’une documentation sera disponible à la fin du projet. Cette documentation devra évoluer en fonction des changements que vous apporterez au fil du temps. Elle devra comprendre au moins les sections suivantes :
Votre suite d’outils marketing vous permet d’exploiter votre site sur différents canaux d’acquisition et de développer des relations dynamiques avec vos utilisateurs. Plusieurs types d’outils composeront votre suite tels qu’un CRM, un PIM, une plateforme de marketing automatisé voire même des plateformes publicitaires. Si vous souhaitez comparer ou découvrir les outils et technologies utilisés par les sites de vos concurrents, Wappalyzer et Builtwith vous seront d’une grande aide. Pour être compétitif et performant en ligne, vous devez faire preuve d’une grande maîtrise des données.
L’une des premières étapes sera d’identifier les informations à collecter sur vos utilisateurs : données démographiques, intérêts, comportement, etc. Les témoins de suivi seront essentiels à ces fins. Avec les règlementations sur la protection des données et les lois anti-spam, (GDPR, loi 21 et autres), vous devrez suivre certains protocoles pour ne pas être pris en défaut. En accumulant des données sur vos utilisateurs, vous apprendrez une foule d’informations qui vous permettront de mieux cibler et communiquer. Il existe de nombreuses formes de données, mais nous nous concentrerons sur les deux types de données suivants :
1. Données implicites : Les données implicites englobent toute forme de données générées au cours d’une session utilisateur sans que l’utilisateur ait à fournir des informations directement ou indirectement par le biais d’un formulaire. Par exemple : la géolocalisation, le réseau Internet, le temps passé sur une page, l’adresse du site de référence, sont autant d’exemples de données implicites.
2. Données explicites : Les données explicites comprennent les informations recueillies par le biais de formulaires, de mécanismes d’enregistrement (log in) ou de tout autre moyen de collecte suite à la saisie de données par l’utilisateur. Ces données sont cruciales, entre autres, si l’on veut identifier le prénom et le nom de famille d’un utilisateur.
Vos choix technologiques doivent s’adapter à votre écosystème actuel. Il est possible de mettre en œuvre la plupart des outils sur votre site web avec Google Tag Manager. Cet outil de gestion des balises est idéal pour mettre en œuvre des trackers tels que Facebook Pixel ou LinkedIn Insight. De plus, ces outils doivent davantage communiquer entre eux. C’est souvent le cas entre le CRM et la plateforme de marketing automatisé tel qu’HubSpot (ou autres). À ce propos, nous avons rassemblé 40 raisons de choisir la plateforme CRM HubSpot.
Vous devez projeter l’évolution de votre environnement technologique dans le temps. Quelles sont ses limites ? Quels seront les coûts à long terme ? Si vous optez pour des solutions infonuagiques, il y a de fortes chances que votre logiciel puisse suivre votre croissance moyennant un investissement supplémentaire. Dans le cas d’une solution hébergée, vous devrez gérer les performances et le temps de disponibilité des serveurs. Votre écosystème doit être évolutif et s’adapter à vos besoins actuels et futurs.
La courbe d’apprentissage est certainement un facteur à prendre en compte dans votre planification. Vous devrez apprendre à utiliser une série d’outils. Si vous envisagez de fonctionner en interne, pensez à former votre équipe et recherchez des communautés de pratique sur Facebook, des chaînes YouTube, des forums de logiciels ou même des canaux Slack.
De nombreuses plateformes proposent leur propre académie de formation. La plupart du temps, nous rencontrons des entreprises qui n’ont tout simplement pas le temps de suivre ces formations et dans un contexte où la volatilité du capital humain est une problématique omniprésente, un partenaire qui peut opérer rapidement peut devenir la solution. Chez Parkour3, nous sommes souvent appelés à opérer la partie technique. Le coaching vous permet de vous concentrer sur votre cœur de métier et de réduire les risques liés à l’apprentissage en interne.
Le développement, ou programmation back-end consiste à transmettre l’information des bases de données vers l’interface utilisateur. Il s’agit de requêtes à une base de données, de la gestion de l’information à afficher et des règles d’affaires à appliquer.
Par exemple:
Une analyse technique sera la première étape. Elle devra, entre autres, inclure une charte des fonctionnalités à inclure dans le rendu final. Cette charte comprendra le comportement des fonctionnalités et les relations entre le logiciel et les bases de données, les formulaires, les profils et autres services web. Cette analyse est une étape essentielle dans la refonte d’un site web. Une documentation suivra et sera mise à jour au fur et à mesure de l’évolution de votre système afin de garantir le maintien de l’intégrité de la plateforme et des logiciels connectés.
Le back-end fait également référence à la plateforme administrative ou gestionnaire de contenu (CMS). Lorsque vous vous connectez au CMS, vous aurez des options à configurer telles que les champs de formulaire présents sur le site, la gestion des éléments de menu, le contenu des pages, etc. Afin de rendre le CMS aussi utile et facile à utiliser que possible, il sera nécessaire d’utiliser la programmation back-end pour y apporter des modifications.
La création de modules impliquera également un développement back-end. Les modules peuvent collecter des informations depuis le front-end ainsi que depuis le CMS. On peut également mentionner la connexion à un CRM ou à un ERP. Bien que la programmation back-end ne soit pas nécessairement visible pour le visiteur du site, elle aura un impact majeur sur l’expérience utilisateur.
Un piège à éviter est le manque de préparation préalable au projet. La programmation back-end étant moins visuelle, le résultat sera perçu plus tard dans le projet contrairement au développement front-end où l’on peut visualiser le résultat rapidement.
Demandez une preuve de concept dès que possible. Étant donné que la programmation back-end se réfère principalement à l’échange d’informations entre un utilisateur et la plateforme, assurez-vous de faire une preuve de concept qui validera que cela fonctionne comme souhaité, conformément au besoin initial.
Pour les programmeurs, en écho aux mots du piège n°2, établissez des étapes à l’avance pour tester le code afin d’éviter le nombre de facteurs possibles de mauvais comportement ou de mauvais rendu.
Il est important de bien gérer les logs. Souvent, un programmeur ne prendra pas la peine d’aller voir les logs ou les versions des travaux récents et pourtant, s’il y a un pépin, il pourra savoir s’il est dû à une mauvaise gestion d’une fonctionnalité. Certaines fonctions de sécurité existent également pour garantir le bon fonctionnement des tâches programmées dans le back-end. Par exemple, si un transfert vers votre CRM ou ERP est programmé et qu’il a échoué, une notification par courriel peut être déclenchée pour en informer l’administrateur du système.
Le rôle du développeur front-end est de construire l’aspect visuel et dynamique du site web. Cette construction est divisée en 4 étapes importantes afin d’avoir une expérience optimale pour le visiteur du site.
Pour le front-end, le projet débute lorsque les maquettes visuelles du designer sont approuvées par le client.
Le « Hypertext Markup language », plus connu sous l’acronyme HTML, est l’étape la plus importante dans la création d’un site. C’est le squelette ou le modèle du site. Un bon positionnement des éléments permet une compréhension facile lors de la navigation sur la page. Chaque section du site est divisée par une balise « div » qui signifie division. Évidemment, une foule d’autres balises disponibles sont utilisées pour recréer le plus fidèlement possible l’aspect visuel que le designer a conçu. Ainsi, selon le design, il est important d’avoir une bonne logique sur la séquence des éléments, car la structure établie deviendra l’ordre d’apparition des informations sur le site. Ceci nous mène à la partie CSS.
Les feuilles de style ou CSS (Cascading Style Sheet) permettent de positionner et de modifier l’aspect graphique des éléments créés par les balises HTML. La couleur, la position , l’animation et la taille du texte sont quelques-uns des aspects qui peuvent être modifiés par CSS. Les couleurs choisies par le designer sont analysées avec précision par le développeur afin de respecter les normes graphiques. De plus, le développeur Front-End doit décider des styles à choisir afin d’habiller les pages site web à construire, c’est-à-dire d’utiliser les balises appropriées afin d’obtenir un résultat optimal. Certaines CSS donnent un résultat différent selon le navigateur. Il est recommandé d’être vigilant sur ce point. Ensuite, les styles de transition seront discutés avec le designer pour préparer l’étape suivante, celle du JavaScript.
Le JavaScript identifie les fonctionnalités et permet également l’animation du site. Il est préférable d’avoir terminé l’étape HTML et CSS avant de commencer cette phase. Il permet de créer l’aspect dynamique du site (apparence, mouvement…). L’animation d’un menu, par exemple, amplifie la qualité et l’attrait d’un site. Le développeur utilise parfois des bibliothèques d’animation pour transformer les éléments d’une page web en interaction vivante avec le curseur. La mise en place d’animations sur le site est cependant un aspect facultatif, bien que l’air du temps soit aux sites Web dynamiques. Il est essentiel que les animations soient de bon goût et qu’elles apportent une valeur ajoutée à l’expérience de l’utilisateur avec l’interface. Il faut également considérer que cette étape nécessite des connaissances dans l’optimisation des performances de téléchargement du site afin qu’elles ne nuisent pas au poids des pages. C’est pourquoi la performance est la 4e étape de l’intégration technique.
Lorsque toutes ces étapes sont terminées, le développeur front-end doit s’assurer que les performances du site sont optimales. Une inspection du site sur différents navigateurs et appareils mobiles est indispensable afin de détecter les différents bugs restants. Ensuite, le poids des fichiers du site doit être réduit afin d’établir une réponse rapide avec les serveurs. Enfin, une bonne harmonie entre les aspects Front-end et Back-end est fondamentale pour le bon fonctionnement d’un site web. Les développeurs doivent bien communiquer avec l’ensemble de l’équipe, car de nombreux aspects peuvent changer au cours d’un projet. C’est pourquoi l’utilisation de techniques empruntées à la production agile est un élément clé dans la réalisation de nos mandats. Bien entendu, d’autres étapes peuvent être prises en compte lors de l’intégration technique en fonction de la complexité du projet.
L’analyse de l’audience est au cœur des activités du web. Partie intégrante de votre environnement technologique, l’analytique justifie sa propre étape. Par défaut, vous allez probablement installer et configurer Google Analytics 4. Cette étape cruciale vous permettra de disposer de données propres, exemptes de tout parasite. Vous serez en mesure de prendre des décisions éclairées sur des sujets aussi variés que l’UX, l’optimisation du taux de conversion, le placement média, la communication et le choix des réseaux sociaux sur lesquels communiquer.
La connaissance d’un outil d’analyse d’audience web, tel que Google Analytics 4, est indispensable. Savoir utiliser cet outil et ces outils connexes (Google Tag Manager, Google Looker Studio, Google Search Console) permet d’analyser rapidement les métriques et les indicateurs clés de performance à suivre. Cependant, l’intervention d’un expert vous permet de visualiser et d’associer une histoire à chaque visiteur. Ainsi, vous apprendrez d’eux et serez en mesure de prendre des décisions éclairées sur les prochaines campagnes et améliorations à apporter à votre site web.
La refonte d’un site web ne doit pas être prise à la légère pour l’entreprise qui souhaite améliorer ses performances en marketing numérique. De nombreuses autres questions peuvent se poser et influencer l’issue de votre projet. Pour vous aider dans cette réflexion, nous avons d’ailleurs compilés les 50 questions à se poser en vue d’une refonte de votre site web. L’évolution des technologies, des modèles d’affaires et des processus toujours plus efficaces contribueront à votre réussite si vous y êtes bien préparé. Chez Parkour3, nous sommes engagés dans la transformation numérique des processus marketing et de vente afin de générer de la croissance et nous nous efforçons de transmettre nos apprentissages aux entreprises qui veulent réussir ou développer leur autonomie. Nous vous invitons à nous consulter pour tout projet de refonte de site web.