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.

Un site web dépassé, c’est comme un vendeur prêt pour la retraite. Il peut avoir fait preuve de succès, mais aujourd’hui, de nouvelles versions le surpassent à bien des égards. Il pourra vous en dire long sur l’expérience acquise depuis sa mise en ligne et vous voudrez sans doute valider pour vous assurer de ne pas répéter de vieilles idées révolues. Il est même possible qu’il n’ait pas suivi l’évolution des objectifs et de la stratégie de votre entreprise et qu’au fil du temps son message ait perdu en exactitude. Voici les 10 étapes de conception d’un site web en agence.


Étape 1: Une stratégie de refonte de site web qui mobilise votre équipe

Bruno Lalonde, Directeur Marketing
Bruno Lalonde, Directeur Marketing

 

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.

  • Votre offre de produit et services peut avoir changé et votre site ne reflète plus avec exactitude ce que vous offrez.
  • Vous avez fait une acquisition d’entreprise ces derniers mois ou années et vous jugez important de fusionner le site de l’entreprise acquise au vôtre.
  • Vous avez entrepris un nouvel exercice d’image de marque et devez maintenant décliner celle-ci sur vos différentes plateformes marketing.
  • Vous prenez un virage numérique. L’exploitation de plateformes numériques telles que marketing automatisé, intranet ou extranet s’impose

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.

Les besoins RH sont incontournables au moment de la stratégie

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 profile Linkedin est maintenant rendu une norme. Les formulaires doivent demander l’information nécessaire à la préqualification du candidat, sans plus. Nous aurons la chance d’en discuter dans une publication subséquente.

Voici les éléments que vous devriez avoir en main au moment de la refonte

  1. Une arborescence de votre offre de produits/services ordonnée
  2. Un positionnement clair
  3. Un plan numérique bien étudié
  4. Les personas auxquels vous devrez vous adresser
  5. Les messages clés en lien avec vos personas
  6. Votre nouvelle image de marque, dans le cas où vous venez de procéder à l’exercice

D’autres décisions devront être prises en amont de la refonte de votre site web dépendant de votre niveau d’investissement, de votre modèle d’affaires et du contexte de votre industrie dans le marché. Une stratégie numérique devrait être la matrice de départ.  Elle devra respecter votre expérience client en prenant compte des points de contact numériques et des autres canaux de trafic prévu dans votre expérience client globale. Vous aurez à développer les points suivants pour vous assurer de couvrir l’ensemble des facteurs qui influencent la refonte.

Contenu à discuter lors de votre stratégie numérique

  • Définissez vos objectifs de refonte
  • Identifiez vos sources de trafic les plus performantes et les nouvelles sources à investir
  • Faites un mapping de votre présence numérique
  • Faites la liste des outils numériques que vous utilisez (CRM, MAP, Chat, CMS etc…)
  • Déterminez le contenu à produire
  • Désignez un comité responsable du site web
  • Projetez en amont de la refonte, les campagnes que vous entreprendrez une fois le site web terminé
  • Construisez un échéancier par phase

 

Étape 2 : Le design UX est un moment charnière dans la conception de votre site web

Benjamin Loiselle, Directeur Artistique
Benjamin Loiselle, Directeur Artistique

 

Selon l’expérience-utilisateur (ou UX Design), une expérience de navigation réussie est un moment vécue 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 qui pourraient ê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.

Expérience-utilisateur | Phase de recherche

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 allons chercher également l’information sur l’industrie pour devenir un expert dans le domaine le temps d’un projet, car il est primordial de comprendre le sujet pour pouvoir bien le communiquer. C’est en discutant avec le client, mais aussi en  prenant connaissance de ce que les compétiteurs font 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 (User stories) permettra de façonner un site web qui répondra au besoin de l’utilisateur.

Expérience-utilisateur | Phase de définition

La phase de définition vient par la suite où nous pouvons identifier et prioriser les problèmes afin de mieux les confronter. C’est dans cette étape que nous serons en mesure de créer l’arborescence du site web qui définit l’ensemble des pages du site et leur hiérarchie respective. Nous générons des idées générales sur le choix de l’avenue à prendre pour mieux servir les besoins de l’utilisateur. Quel type de menu sera le plus efficace pour favoriser la navigation? Quels éléments prioriser sur la page pour générer des interactions avec l’utilisateur? C’est ce genre de problème que nous résolvons à ce moment-ci.

Expérience-utilisateur | Phase de prototypage

La création de prototypes vient par la suite où on bâtit le site web sans se soucier de l’aspect visuel de celui-ci, mais en se concentrant sur les fonctionnalités. C’est ce qu’on appelle souvent faire les maquettes en fil de fer (wireframes). Nous voulons définir les zones globales structurantes du site web, mais aussi établir l’interactivité, les fonctionnalités, le guidage, l’information disponibles pour favoriser l’ergonomie de la plateforme numérique.

Expérience-utilisateur | Phase de test

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 les prototypes rapidement sans l’implication de programmation complexe jusqu’à tant que l’expérience soit agréable pour l’utilisateur.

Tout au long de ce processus, l’utilisateur reste au centre de la réflexion du designer afin que tout soit construit pour répondre à ses besoins et rendre la navigation agréable.

 

Étape 3: Votre site internet doit être pensé de façon à optimiser le référencement naturel de celui-ci

Jeffrey Labrecque, Conseiller web
Jeffrey Labrecque, Conseiller web

 

Le SEO est une étape cruciale du développement du site web.

Keyword Research

La recherche de mots clés, ou Keyword Research, 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 sortir les premières idées de mots clés, il est possible d’utiliser SEMrush avec votre site web existant et en le comparant à ceux de la compétition. Le but est de connaître les mots clés les plus performants pour ces sites web dans le classement des moteurs de recherches. Ensuite, vous pouvez utiliser un mineur de mots clés, comme Keyword.io. Ces outils permettent de créer de longues listes de mots clés ayant une quelconque relation d’un point de vue sémantique. Moz Keyword Explorer et Google Ads Keyword Planner Tool vous permettront de sortir les données importantes au SEO, tels que le volume de recherche et la difficulté des mots clés.

Google Trends permet de relever les tendances de recherche sur Google. L’outil permet, entre autres, de découvrir la saisonnalité de certains termes et leurs usages géographiques.

On-page SEO

Outre les mots clés, l’optimisation se continue sur la structure de l’information dans le code de vos pages. Il y a plusieurs points à ne pas omettre:

H1

Une seule balise H1 doit être utilisée par page. De plus, la structure des titres doit suivre la numérologie. Il est recommandé d’y insérer les mots clés sur lesquels vous voulez être référencé en début de titre.

Meta

Les balises de Meta-Descriptions et Meta-Keywords aident les utilisateurs à comprendre le contenu de 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.

301 et 404

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 bien monitorer ces erreurs dans Google Analytics, assurez-vous d’y insérer le code d’erreur 404 dans le titre. Pour corriger ces erreurs, il faut configurer une redirection permanente (301) vers une page pertinente.

Page 404 sur GitHub.com
Page 404 sur GitHub.com
URL

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 sites web trop complexes. Vos utilisateurs devraient comprendre la structure du site web qu’à la lecture de l’URL.

HTTPS

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 de même qu’il priorise les sites sécurisés HTTPS pour le référencement, sécuriser son site à l’aide d’un certificat de sécurité préviendra une perte de référencement ou de visiteurs. De plus, sur certains navigateurs, comme Google Chrome, un message de sécurité survient avant l’entrée sur le site et indique au visiteur un risque associé à la navigation sur ce site. Le message mentionne alors si le site ne dispose pas d’un certificat SSL et donc que celui-ci n’est pas sécurisé.

 

Étape 4 : Le contenu de votre site web doit répondre aux questions de vos clients

Bruno Lalonde, Directeur Marketing
Bruno Lalonde, Directeur Marketing

 

Une fois la stratégie validée, que l’expérience-utilisateur et les mots clés en lien avec leurs recherches sont identifiés, viendra l’étape de la création du contenu. La rédaction du contenu de votre cible devra prendre un compte les personas ciblées par votre organisation, les tendances de recherches sur le moteur de recherches et bien évidemment votre offre de service.

La rédaction reste une des étapes les plus éprouvantes pour l’entreprise. Elle met souvent en lumière le manque d’alignement dans l’organisation. C’est pourquoi il est primordial d’avoir les messages clés, les personas et une offre claire pour éviter les conflits internes entre les opérations, les ventes et le marketing pendant le projet ou pire, une fois le projet terminé.

Dans les étapes de rédaction, vous devez préconiser l’intérêt du client avant tout. L’expérience de lecture doit être alignée avec l’intention de recherche. Il est difficile de connaître avec certitude l’intention de ceux qui visitent votre site web et c’est pourquoi vous devez vous assurer d’être le plus pertinent et linéaire dans vos propos. Plusieurs tenteront de vous convaincre avec « … le bon contenu, au bon moment, à la bonne personne… » et comme il est difficile, voir impossible dans certains cas de garantir cette promesse, il est beaucoup plus important de s’assurer que votre contenu sera facilement trouvé/bien indexé, à un endroit facile à retenir et conservé pour une future référence. De cette façon, malgré le manque de temps de votre visiteur, votre contenu pourra être consommé en moment opportun selon leur disponibilité.

Il existe 4 types de pages.

Pages de Navigations

Le but des pages de navigation est d’orienter les gens vers le contenu qu’ils recherchent ; les exemples incluent la page d’accueil, les pages de renvoi et les galeries.

Pages de contenus

Les pages de contenu sont la substance de votre site et la raison pour laquelle les gens le visitent. Elles informeront en lien avec l’intérêt du visiteur et seront indexées principalement lors de recherches menant à cliquer sur un lien organique; les exemples incluent des articles et des pages de produits.

Pages fonctionnelles

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.

Pages de destination (souvent appelé landing page)

En marketing numérique, une page de destination est une page web autonome, créée spécifiquement pour les besoins d’une campagne de marketing ou de publicité. C’est là qu’un visiteur « atterrit »  lorsqu’il a cliqué sur une annonce Google Ads, par exemple. Les pages d’atterrissages sont conçues en fonction d’un seul objectif: convaincre. L’appel à l’action est alors incontournable pour ce type de page.

En fonction de l’objectif à atteindre avec une page, vous devez adapter votre rédaction afin d’orienter, informer, accompagner ou convaincre.

La rédaction optimisée

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.

Étape 5 : Le design de votre site web doit être au service de l’expérience-utilisateur

Benjamin Loiselle, Directeur Artistique
Benjamin Loiselle, Directeur Artistique

 

Une fois la structure des étapes précédentes définies, vient l’étape du design. Nous prenons alors les maquettes en fil de fer de l’étape de l’expérience utilisateur approuvées par le client et nous y appliquons la direction artistique qui rendra le tout visuellement attrayant et cohérent avec la marque.

Planche d’inspiration et Direction artistique

En nous inspirant de ce que la marque possède déjà comme identité visuelle (couleurs, choix typographique, traitement photo), nous allons bâtir la direction artistique du site web en adaptant au besoin les éléments de l’identité visuelle à la plateforme numérique. Nous pourrons également compléter au besoin l’identité visuelle en ajoutant certains éléments qui nécessitent 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 forme de planche d’inspiration (moodboard) afin d’être validée par le client ou bien directement appliquée sur les maquettes selon l’enveloppe budgétaire. L’utilisation de la planche d’inspiration permet de rapidement communiquer l’idée générale de la direction artistique et de voir l’ensemble de celle-ci d’un coup d’oeil sans prendre le temps de l’appliquer directement à la structure établie des maquettes en fil de fer.

La création des maquettes

Une fois la direction artistique établie, la création des maquettes à proprement parler peut commencer. Nous allons ainsi prendre le travail fait par le designer UX et appliquer la direction artistique pour créer visuellement une vision unifiée entre les deux. Si la rédaction des contenus est faite à cette étape, nous pourrons intégrer les contenus afin d’avoir l’idée la plus nette possible du site web. Nous créons les icônes nécessaires suivies par une sélection de photos et le choix des polices de caractères ainsi que leur grandeur et leur espacement.

L’animation et dynamisation des maquettes

Nous pouvons suggérer des types d’animations qui s’accordent avec la direction artistique pour qu’ils soient programmés aux prochaines étapes. Nous prévoyons l’état des boutons au survol et au clic, l’état des formulaires, lorsque sélectionnés et remplis. Nous planifions le style de chaque élément HTML type comme les listes à puce, les citations, les accordéons, les pop-up, etc.

Une fois toutes les maquettes produites et approuvées, nous livrons les fichiers sources à la programmation.

 

Étape 6 : Le choix d’une solution open-source ou propriétaire dépend avant tout de vos enjeux et de vos attentes

Francis Paquet, Développeur solutions
Francis Paquet, Développeur solutions

 

Chez Parkour3, nous évaluons depuis 2002 les CMS sur le marché et d’une année à l’autre, WordPress reste notre choix de prédilection. Évidemment, nous nous adaptons aux contextes et besoins d’affaires de nos clients ce qui nous demande de temps à autre à travailler sur d’autres plateformes. De façon générale, WordPress reste le CMS de choix pour plus de 70% de nos projets. Le choix du gestionnaire de contenu devrait soulever plusieurs questionnements au moment de l’évaluation. Les 6 facteurs principaux auxquels nous accordons une attention sont:

  • Le langage de programmation
  • L’autonomie des utilisateurs
  • La performance
  • La sécurité
  • La communauté de développeur
  • Le marketplace

Le langage de programmation

Le choix du CMS  est étroitement lié avec le langage de programmation qu’on est prêt à utiliser pour le projet. Nous nous attaquons les questions suivantes:

  1. Est-ce une vieille technologie qui ne semble plus supportée sur les autres plateformes dans notre écosystème numérique ou une nouvelle technologie connue par notre équipe de développement?
  2. Est-ce une technologie qu’on prévoit conserver pour longtemps.

Par exemple chez Parkour3, on demandera à savoir si c’est en PHP, HTML et CSS.

L’autonomie des utilisateurs du gestionnaire de contenu

L’autonomie des utilisateurs du CMS en aval de la mise en ligne est primordiale. La création d’items de menus, la gestion du contenu et la création de pages sont des tâches effectuées régulièrement par les gestionnaires de site web. Il n’est pas rare qu’on ait à créer des versions démos et qu’on fasse des tests de fonctionnalités afin de s’assurer du bon usage et de la facilité d’utilisation du gestionnaire de contenu.

La performance globale du CMS

La performance de téléchargement et de l’interface de gestion du CMS est évidemment un incontournable. Il est recommandé de faire des tests avec du contenu démo pour évaluer:

  1. Sa rapidité de téléchargement
  2. La quantité et la pertinence des scripts téléchargés
  3. La rapidité dans l’utilisation de l’interface
  4. Un fonctionnement léger pour les navigateurs

Une fois ces quelques tests de base concluants, viendra le tour de la performance dans le développement des modules dans le CMS. Par exemple, si le CMS est en Laravel est-ce qu’il doit se travailler aux normes de Laravel ou on peut personnaliser l’approche ? Dans le cas d’un CMS propriétaire, ce sera plus compliqué à maintenir autant pour le client que pour nous. Il faut prendre en considération 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 souffrir. Pourquoi WordPress, Joomla ou Drupal? Chacun a leurs forces. C’est une question de taille de communauté et d’innovation. Par exemple, WordPress qui arrive avec leur fonctionnalité Gutenberg où le développement se fera en bloc au lieu d’être en gabarit de page.

Le niveau de sécurité

Vous devez sécuriser votre site web selon le type d’information que vous collectez. Plus l’information accumulée est sensible, plus vous devrez vous pencher sur la question et dresser un plan pour sécuriser votre site. Le CMS choisi devra respecter certaines normes de programmation. Malgré qu’il y ait une communauté sensibilisée à la sécurité du CMS, c’est important de savoir si les mises à jour de sécurités suivent les normes de l’éditeur du CMS et si les mises à jour ont fait l’objet d’une ou plusieurs rondes de validations.

La taille de la communauté

La taille de la communauté de développeurs aura un impact indirect sur les coûts et le temps de développement une fois qu’on aura choisi les modules, les outils et la bonne technologie. Le soutien de la communauté joue un rôle lorsque des défis se présentent. Les développeurs auront pour réflexe de se documenter auprès des autres développeurs de la communauté dans les forums populaires tels que Stackoverflow, dans les sections ressources du site web du langage associé voir sur le canal Slack de la technologie. Évidemment, le soutien rapide doit être au rendez-vous. C’est pourquoi la taille de la communauté a un lien direct sur la rapidité de réponses aux questions et donc résoudre les défis plus rapidement.

Le volume de modules disponibles dans le marketplace

Chaque CMS comporte leurs modules de base et champs disponibles. Votre projet comporte sans doute des personnalisations afin de bien répondre à vos besoins et processus d’affaires. En recherchant le bon CMS, nous serons attentifs aux modules en lien avec vos besoins. Il se peut que certains de vos besoins ne soient pas répondus d’emblée au moment de l’installation du CMS.

C’est à ce moment qu’il faut peser les pour et les contres; êtes-vous prêts à développer les modules afin de conserver le CMS en question ou tout simplement considérer un autre CMS avec ces fonctionnalités disponibles d’entrée de jeu ? Les coûts afférents au développement du module ou à la migration vers un autre CMS seront souvent décisifs. Pour des raisons de performance du site web, il peut être judicieux de prendre le temps de développer le module afin de ne pas utiliser un trop grand nombre de  “plug-ins”. Par le fait même, vous éviterez de développer une dépendance aux mises à jour.

Sélection d’un CMS dans le cadre d’un e-commerce

Tel que mentionné précédemment, il faut identifier les fonctionnalités à haut niveau ensuite évaluer si la plateforme peut répondre aux fonctionnalités recherchées que ce soit par des modules existants ou à développer. Vous serez sans doute sensible aux frais en lien avec les technologies évaluées. Le prix de certaines plateformes peut se chiffrer à plusieurs dizaines de milliers de dollars annuellement. Il sera important de relativiser avec les revenus de votre projection financière.

Disponibilité des modules

Au moment de la réalisation d’un site e-commerce, vos besoins en termes de processus d’affaires doivent être précis. La plateforme choisie deviendra un outil numérique important. Il pourra être branché à votre logiciel de gestion de l’information produit(PIM). Il est probable que la plateforme doivent se connecter à d’autres environnements tels que des services de livraison, CRM, Etailers, plateforme de support en ligne, applications propriétaires, etc. Si certains de ces modules sont développés, fiables et disponibles à l’achat, il peut être judicieux de se les procurer. Vous pourrez sauver du temps et des coûts de développement considérables. Il est important de rechercher si ces modules sont développés ou soutenus par l’éditeur du CMS ou proviennent de tiers partis. Certains éditeurs de CMS ne supporteront pas ou ne valideront pas la qualité des modules alors vous devrez être vigilant dans votre sélection. Par exemple dans le cas de WordPress/Woocommerce, plusieurs de modules disponibles dans le marketplace sont vérifiés par Woocommerce et ils peuvent même être endossés au niveau du fonctionnement.

Preuve de concept

Dans le cas où vous tirez votre inspiration d’un autre e-commerce, que ce soit dans votre industrie où dans une industrie qui opère sous un modèle d’affaires similaire, vous devriez tenter d’en apprendre plus sur leurs faux-pas, les limitations qu’ils ont dû rencontrer et les coûts totaux d’acquisition de la plateforme. Recherchez pour une preuve de concept concluante. Dans un site web statique, la gestion est plutôt simple, mais lorsque la plateforme doit gérer plusieurs bases de données, des comptes et des transactions, vous devez redoubler de vigilance. Après tout, investir dans un e-commerce, c’est un changement majeur pour bien des entreprises.

Sélection du module de paiement

Dans l’éventualité où vous souhaitez utiliser des plateformes matures et entièrement développées tels que PayPal ou Stripe, l’intégration à votre e-commerce sera plutôt linéaire et sans trop de défis à l’intégration. Si le projet tend vers une solution telle que Beanstream ou Paysafe, la raison première évoquée devra être le besoin de personnalisation plus élevé. Les économies à long terme devront justifier l’investissement plus élevé à court terme en comparaison aux deux premières solutions mentionnées.

Votre modèle de vente

Si votre projet demande à vendre des produits uniques, sans trop de variantes et que votre base de données comporte quelques milliers d’entrées, une grande majorité des plateformes pourront s’adresser à votre demande. Toutefois, voici une liste de questions non exhaustive que vous devriez répondre avant de faire une sélection de plateformes.

  1. Devez-vous gérer plusieurs dizaines de milliers de produits uniques ou variables?
  2. Aurez-vous une gestion d’abonnements à soutenir?
  3. La gestion d’un portail d’appel d’offres sera-t-elle nécessaire?
  4. Êtes-vous dans un contexte de gestion de distributeurs ou de comptes entreprises à utilisateurs multiples?
  5. Votre e-commerce sera-t-il accessible à l’international?
  6. Serez-vous régie par les taxes des pays où vous distribuerez.
Maintenance

Afin que vous ayez une bonne performance opérationnelle, vous devrez vous assurer qu’une documentation sera disponible en fin de projet. Celle-ci devra être évolutive selon les changements que vous apporterez au fil du temps. Elle devra au minimum comporter les sections suivantes:

  1. Les modules installés et leur mode de fonctionnement ainsi que branchements à d’autres modules.
  2. Les versions initialement utilisés de chacune des technologies utilisées dans le cadre de la création de votre e-commerce ainsi que versions à jour.

Étape  7 : La collection de données doit être aujourd’hui au coeur de votre stratégie d’affaires

Jeffrey Labrecque, Conseiller web
Jeffrey Labrecque, Conseiller web

 

Le Martech stack, ou suite d’outils marketing, vous permet d’opérer votre site sur les différents canaux d’acquisition et d’automatiser la relation avec les utilisateurs. Plusieurs types d’outils composeront votre suite tels qu’un CRM, un PIM, une plateforme de marketing automatisé même les plateformes publicitaires. Si vous souhaitez comparer les outils que vos compétiteurs utilisent, Ghostery ou encore Builtwith vous sera d’un grand aide. Vous souhaiterez devenir une bête de donnée pour pouvoir concurrencer et devenir performants en ligne!

Donnée à collecter

Une des premières étapes sera d’identifier les informations à collecter sur vos utilisateurs: démographie, intérêt, comportement, etc. Les cookies de suivi seront incontournables à cet effet. Avec les réglementations sur la protection des données et les lois antipourriel, vous aurez à suivre certains protocoles pour éviter d’être pris en défaut. En accumulant de la donnée sur vos utilisateurs, vous apprendrez une multitude d’informations qui vous permettront de mieux cibler et mieux communiquer. Il existe plusieurs formes de données, mais nous nous attarderons aux deux types de données suivantes:

1. De la donnée implicite : La donnée implicite englobe toute forme de donnée générée dans le cours utile d’une session utilisateurs sans toutefois que ce dernier aille à fournir de l’information directe ou indirectement par un formulaire. Par exemple: la géolocalisation, le réseau internet, le temps passé sur une page, l’adresse du site référent, sont tous des exemples de données implicites.

2. De la donnée explicite : La donnée explicite regroupe les informations recueillies à l’aide de formulaires, de mécanique d’inscription (log in) ou tout autre moyen de collecte suite à l’entrée de donnée par l’utilisateur. Cette donnée est cruciale, entre autres,  si vous souhaitez identifier le nom et le prénom d’un utilisateur.

Interopérabilité

Vos choix technologiques doivent pouvoir s’imbriquer avec votre écosystème actuel. Il est possible d’implanter sur votre site web la plupart des outils avec Google Tag Manager. Cet outil de gestion de balise est idéal pour implanter les trackers tels que Facebook Pixel ou LinkedIn Insight. De plus, ces outils doivent moindrement se parler entre eux. C’est souvent le cas entre le CRM et la plateforme de marketing automatisé.

Système évolutif

Vous devez projeter l’évolution de votre Martech stack dans le temps. Quelles sont ses limites? Quels seront les coûts à long terme? Si vous optez pour des solutions en infonuagique, il y a fort à parier que vos logiciels pourront suivre votre croissance moyennant un coût. Dans le cas d’une solution hébergée, vous aurez à gérer la performance machine et le temps de disponibilité. Votre écosystème doit être évolutif et s’adapter à vos besoins présents et futurs.

Courbe d’apprentissage

La courbe d’apprentissage est certainement un facteur à considérer dans votre planification. Vous allez devoir apprendre à utiliser une suite d’outils. Si vous planifiez opérer à l’interne, pensez à former votre équipe et repérez les communautés de pratiques sur Facebook, les forums logiciels ou encore les channels Slack.

Plusieurs plateformes offrent 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 un enjeu omniprésent, un partenaire pouvant opérer rapidement peut devenir la solution. Chez Parkour3, nous sommes souvent appelés à opérer la portion technique. Un accompagnement permet de vous concentrer à votre coeur de métier et diminuer les risques liés à l’apprentissage à l’interne.

Étape 8 : Le développement back-end de votre nouvelle plateforme web est une étape stratégique de votre projet

Francis Paquet, Développeur solutions
Francis Paquet, Développeur solutions

 

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:

  • L’affichage de fiches employées dans un ordre souhaité
  • La gestion de date et de lieux
  • L’importation et exportation de l’information dans un profil.

Les premières étapes afin de bien planifier les requis Back-end

Une analyse technique sera la première étape. Elle devra, entre autres, comporter une charte des fonctionnalités à prévoir au rendu final. Cette charte inclura le comportement des fonctionnalités et les relations entre les logiciels et bases de données, formulaires, profils et autres services web. Cette analyse est une étape incontournable dans la refonte d’un site web. Une documentation suivra et sera mise à jour au courant des évolutions de votre système pour veiller au maintien de l’intégrité de la plateforme et des logiciels connectés.

Plateforme administrative ou Gestionnaire de contenu

Le back-end fait également référence à la plateforme administrative ou Gestionnaire de Contenu (CMS). Lorsque vous vous connectez dans le CMS, vous aurez des options à configurer telles que les champs de formulaires présents sur le site, la gestion des items de menu, le contenu des pages, etc. Afin de rendre le CMS le plus utile et facile à utiliser, il sera nécessaire de faire appel à de la programmation back-end pour les modifications à apporter.

La création des modules va aussi passer par le développement back-end. Les modules peuvent autant recueillir de l’information en front-end mais aussi dans le CMS. On peut également faire mention de branchement à un CRM ou un ERP. Bien que la programmation back-end n’est pas nécessairement visible par le visiteur du site web, il n’en reste pas moins qu’elle aura un impact majeur sur l’expérience-utilisateur.

Programmation back-end et 4 pièges à éviter

Piège #1

Un piège à éviter sera le manque de préparation en amont du projet. Comme la programmation back-end est moins visuelle, le résultat sera perçu plus tard dans le projet contrairement au développement front-end où nous pourrons visualiser le résultat rapidement.

Piège #2

Demandez une preuve de concept le plus rapidement possible. Comme la programmation back-end fait surtout référence à de l’échange d’information entre un utilisateur et la plateforme, assurez-vous de faire une preuve de concept qui validera un fonctionnement tel que souhaité selon le besoin initial.

Piège #3

Pour les programmeurs, rejoignant les propos du piège #2, établissez des étapes à l’avance pour tester le code afin d’éviter le nombre de facteurs possibles à un mauvais comportement ou rendu.

Piège #4

Il est important de bien gérer les logs. Souvent un programmeur ne s’occupera pas d’aller voir les logs ou versions des travaux récents et pourtant, s’il y a un pépin, il pourra savoir s’il est causé par une mauvaise gestion d’une fonctionnalité. Certaines fonctionnalités de sécurité existent également afin de veiller au bon fonctionnement des tâches programmées en back-end. Par exemple, dans le cas où un transfert à votre CRM ou ERP est prévu et qu’il aurait échoué, un courriel de notification peut être déclenché afin d’en informer l’administrateur de système.

Étape 9 : L’intégration front-end va permettre de créer une plateforme performante

Claude-Marc, Développeur Front-end
Claude-Marc Joseph, Développeur Front-end

 

Le rôle du développeur Front-end consiste à construire l’aspect visuel et dynamique du site web. Cette construction se divise en 4 étapes importantes afin d’avoir une expérience optimale pour le visiteur du site.

  1. HTML,
  2. CSS,
  3. JavaScript
  4. et la performance

Pour le front-end, le projet débute lorsque les maquettes graphiques du designer sont approuvées par le client.

HTML

Le « Hypertext Markup language » mieux connue sous l’acronyme HTML est l’étape la plus importante de la création d’un site. C’est le squelette ou le gabarit de celui-ci. Un bon positionnement des éléments permet d’avoir une compréhension facile au moment de naviguer sur la page. Chaque section du site est divisée en balise « div » qui signifie division. Évidemment, une foule d’autres balises disponibles sont utilisées afin de recréer le plus fidèlement possible l’aspect visuel que le designer a conçu. Alors, selon le design, il est important d’avoir une bonne logique sur la suite des éléments, car la structure établie deviendra l’ordre d’apparition de l’information sur le site. Ce qui nous mène à la portion CSS.

CSS

Le CSS (Cascading Style Sheet) permet de bien positionner et de changer l’apparence graphique des éléments créés par les balises HTML. La couleur, la position et la grosseur du texte, sont en autres, des aspects modifiables par CSS. Les couleurs choisies par le designer sont analysées avec exactitude par le développeur pour respecter les normes graphiques. Également, le développeur Front-End doit décider quels styles choisir afin de représenter précisément le site web à construire. C’est-à-dire d’utiliser des balises appropriées afin d’obtenir un résultat optimal. Certains CSS donnent un résultat différent dépendamment du fureteur. Il est recommandé d’être vigilant sur ce point. Ensuite, les styles de transitions seront discutés avec le designer pour préparer la prochaine étape, celle du JavaScript.

JavaScript

Le JavaScript identifie la fonctionnalité et l’animation du site. Il est préférable d’avoir terminé l’étape HTML et de CSS avant d’amorcer cette phase. Elle permet de créer l’aspect dynamique de celui-ci (apparition, mouvement…). L’animation d’un menu, par exemple, amplifie la qualité et l’attraction d’un site. Le développeur utilise parfois des librairies d’animations pour transformer les éléments d’une page web en interaction vivante avec le curseur. L’implantation d’animations sur le site est toutefois un aspect facultatif, bien que l’air du temps est aux sites web dynamiques. Il est primordial que les animations soient de bon goût et qu’elles apportent une valeur ajoutée dans l’expérience d’utilisation avec l’interface. Aussi, il faut considérer que cette étape demande des connaissances en optimisation de la performance de téléchargement du site afin qu’elle ne vienne pas miner le poids des pages. C’est pourquoi la performance est la 4e étape de l’intégration technique.

Performance de téléchargement

Lorsque toutes ces étapes sont complétées, le développeur Front-end doit s’assurer d’optimiser la performance du site. Une inspection du site sur différents fureteurs et appareils mobiles est primordiale afin de déceler les différents bogues restants. Ensuite, le poids des fichiers du site doit être réduite 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 plusieurs aspects peuvent changer durant un projet. C’est pourquoi l’utilisation de techniques empruntées à la production agile est un élément clé dans la production de nos mandats. Bien sûr, d’autres étapes peuvent entrer en ligne de compte lors de l’intégration technique selon la complexité du projet.

Étape 10 : Mieux connaître vos audiences c’est s’assurer de la réussite de votre projet sur le long-terme

Jeffrey Labrecque, Conseiller web
Jeffrey Labrecque, Conseiller web

L’analyse d’audience web est au coeur des activités web. Part entière du Martech, l’analytique a besoin de sa propre étape. Par défaut, vous allez sans doute installer et configurer Google Analytics,. Cette étape cruciale va vous permettre d’avoir une donnée propre, exempt de tout parasite. Vous allez être en mesure de prendre des décisions éclairées sur des sujets aussi variés que l’UX, le CRO (conversion rate optimization), le placement publicitaire, la communication et le choix des réseaux sociaux sur lesquels communiquer.

La connaissance d’un outil d’analyse d’audience web, comme Google Analytics, est incontournable à l’interne. Savoir utiliser cet outil permet une rapidité d’analyse sur les métriques et indicateurs clés de performance à suivre. Toutefois, l’intervention d’un expert permet de visualiser et associer une histoire à chacun des visiteurs. De cette façon, vous en ressortirez des apprentissages et pourrez prendre des décisions éclairées au sujet des prochaines campagnes et améliorations à apporter à votre site web.

 

Conclusion

La refonte d’un site web ne doit pas être prise à la légère pour l’entreprise qui souhaite une performance de son marketing numérique. Beaucoup d’autres enjeux peuvent survenir et exerceront une influence sur le résultat de votre projet. L’évolution des technologies, des modèles d’affaires et des processus toujours plus performants contribuera à votre succès une fois bien préparé. Chez Parkour3, nous carburons à la transformation numérique des processus de marketing et de ventes dans le but de générer de la croissance et nous nous efforçons de transmettre nos apprentissages pour des entreprises qui souhaitent être performantes. Nous vous invitons à nous consulter pour tout projet de refonte de site web.

10 étapes de conception d’un site web en agence

Category: Croissance WebExpérience utilisateur & designMarketing AutomationVisibilité Web