Comprendre les grandes phases de réalisation d’un site web

Table des matières

On a réalisé que pour beaucoup de clients et prospects, se lancer dans un projet de site web ressemble beaucoup à un saut dans l’inconnu, avec beaucoup d’incertitudes, ce qui peut vite tourner en légère angoisse.

Construire un site web, c’est un processus long, particulièrement quand on veut faire du sur-mesure. Alors pour y voir plus clair, on vous présente les grandes phases pour mener à bien un projet de site web, avec notre méthode maison pour chacune d’elle.

Le premier contact

Tout commence par une prise de contact, c’est évident, et ça pourrait paraître superflu de faire figurer ce moment dans les grandes étapes d’un projet. Mais si on regarde bien, on aurait tort de sous-estimer l’importance de cette étape. 

Souvent réduite à des présentations et quelques impressions, elle porte beaucoup plus que cela : elle pose les bases d’une relation. Et dans le cadre d’un projet de site web, cette relation peut durer longtemps !
De fait, toutes les prises de contact ne se passent pas de la même manière : le dialogue sera bien différent si le prestataire a été recommandé, si c’est un ami d’ami, ou si vous êtes tombés par hasard sur son site et que vous voulez vous assurer que vous faites le bon choix. 

Ce qui vaut pour le client vaut aussi pour le prestataire : c’est à ce moment qu’il doit être en mesure de se positionner sur le projet, ou pas. 

L’objectif est donc d’apporter de la clarté, et de s’assurer qu’on se comprend. D’identifier le besoin, les problèmes qui y sont liés, les contraintes techniques, et de bien saisir le rôle et les objectifs du futur site web. C’est également à cette étape qu’on traite des délais de réalisation et du budget, qui sont des facteurs déterminants dans le lancement d’un projet de site web.

On vérifie donc que tous ces éléments sont alignés pour entamer une coopération basée sur la compréhension mutuelle, le dialogue efficace et la transparence. 

A partir de là, tout le monde y gagne : c’est du win-win en jargon LinkedIn, et surtout, le début d’un projet dont tout le monde pourra être fier.

« Le premier contact, c’est l’occasion de confirmer nos intérêts à travailler ensemble et de poser des bases saines pour une relation durable. »

Le kickoff

Ou le coup d’envoi, en français. Ça se passe un peu comme au football : c’est le moment où on se transmet le premier ballon, dans de bonnes conditions pour réaliser un premier contrôle qui met en confiance, et qui permet aux joueurs de se placer.
Concrètement, on va affiner le cahier des charges du projet pour être sûr d’avoir tous les éléments en main pour anticiper toutes les contraintes du projet. On travaille donc à une expression plus précise des besoins et des problèmes observés. 

On se focalise sur le métier du client, son environnement immédiat et ses préoccupations quotidiennes, plutôt que de partir de son regard sur ce que doit être son futur site web, ou de se baser sur la solution technique qu’il imagine. 

En effet, le web, c’est notre métier, pas celui de notre client. Il présente ses besoins, à nous de trouver une solution. Si il arrive avec une solution déjà en tête sans avoir clairement décortiqué le besoin, il prive son prestataire de son rôle de conseil et d’accompagnement, pour souvent se rendre compte au fil du projet que des pans entiers des besoins n’ont pas été anticipés. Nous refuserons toujours de nous retrouver dans cette situation, c’est pourquoi cette phase de Kick-off est aussi importante. 

Avec des besoins clairement définis et une vision la plus large possible des problématiques métier, nous sommes en mesure de construire une réponse stratégique/créative/technique pertinente, dans un cadre temporel affiché, et qui tient compte des moyens budgétaires et humains du client et de l’évolution de sa culture web.

« Travailler à l’émergence de besoins précis pour être en mesure de construire une réponse stratégique / créative / technique pertinente et singulière. »

Les ateliers de co-conception

Les ateliers sont souvent de grands moments de dialogue et de brainstorming, qui ouvrent la voie à un certain nombre de révélations et de prises de conscience sur tous les enjeux et les implications stratégiques d’un projet de site web. 

On va au cours de cette phase explorer en profondeur certains thèmes identifiés comme stratégiques pour délivrer le meilleur site web possible : 

• Définition détaillée des personae (c’est à dire les cibles et futurs visiteurs du site web), de leurs besoins et de leurs attentes, 
• Travail sur les parcours d’achat et les tunnels de conversion
• Définition d’une architecture de l’information pertinente (et la planification de la création des contenus)
• Ateliers de stratégie éditoriale et de rédaction web
• Création et/ou adaptation d’un ADN de marque, de ses messages et de ses déclinaisons graphiques

Et tous les aspects spécifiques aux métiers et expertises du client qui peuvent apporter de la matière pour structurer les fondations du projet. 

C’est sur cette base que toute la création et la stratégie du site web va s’appuyer : à l’issue de ces ateliers, on valide ensemble la stratégie définitive du projet et l’organisation des contenus à produire.

« Les ateliers sont des moments privilégiés pour solidifier notre relation, interroger les éléments stratégiques et nourrir toutes les étapes projet à venir. »

La Direction Artistique

C’est le moment où les choses prennent forme, et où on commence à pouvoir se projeter vers le résultat final. 

On commence par exploiter pleinement l’identité graphique du client (ou par en créer une si besoin) selon les usages du web. On parle ici de logo, de palette de couleurs et de choix typographiques. Puis on élargit cette identité à un univers visuel plus vaste, où on développe des formes, de l’habillage graphique, une ou plusieurs grilles de mise en page, des traitements d’images… Tout ce qui va rendre le site reconnaissable, et porter l’image du client dans un ensemble cohérent. 

Puis on rationalise ces éléments pour les adapter à la solution éditoriale et technique retenue : à l‘architecture de l’information, aux différentes tailles d’écran, on définit des comportements, des alignements, des possibilités de mise en page, et si le budget le permet, des animations, des transitions de page, etc… On répertorie le tout dans un guide de styles (ou design system) qui servira de base de travail pour les développeurs dans la phase suivante !

Dans tous les cas, l’esthétique ne doit pas faire oublier le fonctionnel, ni l’accessibilité et la lisibilité du futur site web. Alors on travaille le rendu visuel des textes, les normes de couleur et de contraste, la taille des éléments cliquables, et tous ces éléments qui permettent à tous les profils d’utilisateur de profiter du site.

« Le point de départ, c’est votre identité. Non pas une tendance graphique X ou Y, mais votre matériel à vous. À nous ensuite d’exploiter cette base et de faire émerger des pistes créatives qui ont du sens ! »

La Direction Technique

Cette phase intervient en coordination avec la direction artistique, pour s’assurer que les choix qui sont faits d’un côté comme de l’autre sont viables et compatibles. 

Du côté technique, il s’agit de mettre en place l’environnement logiciel du futur site internet. Son architecture technique, sa structure fonctionnelle, les liens et connexions entre ses différents composants, les langages et outils de programmation utilisés… 

Dans notre cas, il s’agit la plupart du temps de structurer un système WordPress selon les besoins du projet, de le compléter avec nos outils personnalisés et le configurer de la manière la plus juste pour garantir ses performances, sa pérennité et ses évolutions futures. 

En gros : on ne garde que le nécessaire, et on ajoute avec nos propres recettes tout ce qui vient répondre aux besoins spécifiques, en respectant bien sûr les standards officiels et les bonnes pratiques de WordPress. 

Dans cet environnement, on commence à former nos clients à l’utilisation du backoffice et de l’éditeur de contenus Gutenberg pour qu’ils se familiarisent avec ces outils bien en amont de la mise en ligne. 

Au cours de cette première phase de formation, ils peuvent ainsi prendre en main l’outil en saisissant leurs contenus (sans styles ni options personnalisées de mise en forme) en même temps que le travail de développement s’effectue, et économiser ainsi un temps précieux tout en gagnant en expérience et en fluidité dans l’utilisation de leur futur site.

« Une bonne direction technique ne se mesurera pas sur l’instant, mais au fur et à mesure des évolutions du site web. L’objectif étant de garantir la pérennité du projet et d’en maîtriser au maximum sa dette technique. »

La production graphique et technique

Ça y est, on rentre dans le dur, dans la phase de production du projet : celle où on va bâtir le site concrètement, avec des lignes de codes et des mises en pages impeccables.

C’est le moment où on a en général le moins besoin du client, c’est un travail de l’ombre où toutes les équipes sont mobilisées pour réaliser le meilleur site possible tant pour ses visiteurs que ses gestionnaires. 

Les journées se résument à de l’intégration technique, des mises en situation et des tests. Beaucoup de tests. Côté client, on va surtout demander d’anticiper la création des contenus pour ne pas être bloqués quand on est prêts à mettre le site en ligne. 

Et on fait tout pour les accompagner efficacement, avec un suivi régulier et des conseils personnalisés au fur et à mesure que les contenus sont créés !

« Do. Test. Do again. Test again.
Un travail de l’ombre minutieux durant lequel il est capital de garder le contact. »

La formation à l’outil

Pour intégrer des contenus, le mieux c’est de bien connaître l’outil dans lequel ça va se passer. C’est pour ça qu’une fois qu’on a intégré techniquement tous les styles et possibilités de mise en page, on fait une deuxième séance de formation pour que nos clients visualisent toutes les possibilités qui s’offrent à eux. 

Ces formations décomposent et mettent en contexte chaque type de bloc de contenus, explorent chaque possibilité de mise en forme et d’alignement, natives ou personnalisées. On donne tous les éléments de contexte nécessaires à leur bonne utilisation, les bonnes pratiques pour rythmer la lecture et construire des mises en page efficaces. 

L’idée est de rendre le client autonome dans la gestion de son site, de lui permettre de l’alimenter et lui donner toutes les clés pour gérer lui-même son contenu, avec toutes les astuces pour le rendre attractif et lui faire remplir ses objectifs. Les sessions de formation sont enregistrées, et le client peut avoir accès aux vidéos à tout moment.

« Parce que vous n’avez pas envie de nous appeler pour une modification de texte. Parce que nous n’avons pas non plus envie de ça. La solution : la formation, pour l’autonomie. »

La validation et la mise en ligne

On y est. On s’approche du moment final. Sur notre serveur de pré-production, vous avez devant vos yeux le site fini, prêt à être lancé dans le monde. On lui a fait subir toute une série de tests techniques, on l’a mis à l’épreuve de multiples configurations, on a traqué les bugs dans tous les coins. On a mis en place le plan de redirections pour que la transition de l’ancien vers le nouveau site ne laisse aucune adresse de page orpheline et perdu dans l’erreur 404. 

Il ne reste plus au client qu’à faire le tour du propriétaire, de réaliser ses tests d’utilisation, poser ses dernières questions. On ajuste les choses si besoin. Et vient le moment de la validation finale. On met le site en ligne, sur les serveurs de l’hébergeur du client, accessible à son public. 

Là, il faut prévoir une journée pour la procédure de mise en ligne à partir du moment où le feu vert est donné. On effectue cette opération plutôt en début de semaine, pour s’assurer que toutes les constantes vitales restent au top après la naissance du nouveau site web. Après quelques jours de vigilance, on sait que le nouveau-né peut évoluer dans le monde sans une surveillance renforcée.

« L’implication de nos clients dans les tests avant la mise en ligne est capitale. Elle garantie la mobilisation de l’ensemble des acteurs pour un résultat impeccable. »

La maintenance et le suivi

On va quand même continuer à garder un œil sur le site. Parce que pour des raisons de sécurité et de performances, un site internet doit être entretenu régulièrement pour bien fonctionner. 

Cette partie de maintenance préventive consiste à faire régulièrement les mises à jour du système WordPress et des plugins qui sont installés, et de vérifier que ces modifications n’entraînent aucun bug ou dysfonctionnement sur le site. C’est un peu comme la révision d’une voiture : elle est nécessaire pour garantir qu’elle démarre lorsque vous en avez besoin. 

On propose également une maintenance évolutive, où on réalise à intervalles réguliers des points de suivi stratégique du projet, pour évaluer les indicateurs de performance du site, et être en mesure de le faire évoluer en même temps que vos besoins, et ajouter de nouvelles fonctionnalités au fur et à mesure que de nouvelles opportunités se présentent. 

Parce que ce qu’on aime le plus, c’est de voir les sites vivre et grandir pour toujours fournir la réponse juste aux besoins de nos clients.

Ce qu’il faut retenir

1. La réalisation d’un site web est un processus long qui doit être méthodiquement découpé.
2. La viabilité du travail mené dépend de la validation d’un cadre de fonctionnement et d’objectifs pour le futur site
3. Pour passer à la phase suivante du projet, il faut avoir validé la totalité du travail de  la phase précédente
4. La mise en ligne du site ne signifie pas la fin du projet : le site est un véhicule qui doit être entretenu et peut évoluer tout au long de sa vie.