Méthodologie de production de site internet

Produire un site internet de qualité professionnelle nécessite la maîtrise de plusieurs disciplines : prototypage, graphisme, codage, base de données, système de gestion de contenu…

Pour cette raison il est indispensable d’établir une méthode de travail. La méthode a pour but d’organiser et de mener à bien un projet de bout en bout. Il s’agit pour la personne en charge du projet, d’utiliser la méthode de travail définie et de conduire le projet en s’assurant que celui-ci est mené à bien dans les règles préalablement définies.

Avant d’expliciter notre méthodologie, il convient de préciser quelques points concernant le type de projet correspondant le plus à cette méthode. En effet, cette méthode s’applique à des projets sur mesure où le système de gestion de contenu (CMS) ne sera pas trop contraignant, pour que le projet s’adapte aux objectifs du client. Cette méthode convient spécifiquement aux projets qui nécessitent de produire un site internet à partir de prototypes .  

Un site internet sur mesure c’est quoi exactement ?

On peut considérer qu’à partir du moment où le projet comporte la création d’une interface graphique originale dessinée dans Photoshop, il s’agit d’un site sur mesure. Le projet peut comporter des étapes avant la conception graphique comme un organigramme, des prototypes, mais dès que celui-ci comporte une interface conçue spécifiquement pour le client il s’agit bien d’un site sur mesure. À partir du dessin, le projet va suivre d’autres étapes en aval de la méthode afin d’aboutir à un site internet fonctionnel correspondant au dessin original et avec toutes les fonctionnalités proposées par le codage web.

Dans la description de cette méthode nous avons omis la partie rendez-vous client et nous partons du principe que le projet est validé avec un devis signé.

Analyse du contexte

Avant de proposer des solutions adaptées au projet, il convient d’analyser le contexte. S’agissant de projets dans le domaine de l’internet, une immense source d’informations est disponible en quelques clic. Mais celle-ci restera complémentaire par rapport au client qui connaît mieux que personne son secteur d’activité.

Identification du public visé

Il s’agit ici d’envisager le plus précisément possible les futurs utilisateurs du site web. Il est en effet essentiel de savoir à quel public sera destiné le site internet. Sans cette information, le projet a de fortes chances de ne pas aboutir au résultat attendu et de manquer sa cible.

Identification des objectifs marketing

Pourquoi le client souhaite réaliser un projet web? Quel sont les objectifs du site internet à moyen et long termes et quelles sont les attentes du client? Toutes les réponses à ces questions dépendent évidemment du type de projet : e-commerce, site d’informations, etc. Les objectifs marketing une fois définis sont prioritaires pour la personne en charge de la conduite du projet et celui-ci doit impérativement les atteindre.

Identification de la concurrence 

Les concurrents qui ont déjà un site internet dans le même domaine d’activité sont une source d’inspiration importante. Cela permet d’emblée de répondre à de nombreuses questions : utilisateurs, architecture du site, environnement graphique, etc., il s’agit de prendre en compte tous ces éléments pour imaginer un projet plus ambitieux. 

Comme pour le contexte, le client est la meilleure personne pour identifier ces sources et définir les éléments pertinents pour son projet. Mais il faut aussi prendre en compte l’expérience accumulée par la réalisation d’autres projets dans le même domaine d’activité par l’agence, qui parfois est un excellent atout.

Analyse des forces et faiblesses du site internet actuel

Si il s’agit de procéder à la refonte d’un site internet, cette opération sera facilitée par une version en ligne même si celle-ci est ancienne. C’est un très bon point de départ pour travailler à la conception d’un nouveau site. Cela va offrir un point d’encrage pour imaginer la suite, avec les éléments à reprendre ainsi que ceux qui n’ont pas fonctionné.

Orientations graphiques

À la fin du briefing de projet, il est déjà possible d’envisager quelques pistes de réflexion au sujet des orientations graphiques. Celles-ci seront ensuite travaillées pour aboutir à un cahier des charges graphique qui sera inclus dans le cahier des charges global. Les orientations graphiques se décomposent en plusieurs éléments : 

• Les contraintes graphiques qui ont pour but de définir les limites des pages, les marges, le fond, etc.
• Les gammes de couleurs possibles en fonction du logo ou d’autres éléments graphiques déjà disponibles
• L’apparence du site: professionnel, clair, simple, etc.
• La charte graphique si celle-ci est déjà définie 
• Le logo et les documents qui l’accompagnent 
• Les notes prises lors du briefing de projet 

Mise au point du cahier des charges

Le cahier des charges est un document de synthèse des éléments évoqués précédemment : analyse du contexte, identification du public visé, identification des objectifs marketing, identification de la concurrence, analyse des forces et faiblesses du site Internet, cahier des charges graphiques avec pour compléter un plan sous la forme d’un organigramme qui explicite les modèles des pages à réaliser. Le cahier des charges peut également être complété par d’autres éléments de normes et d’éléments graphiques à reprendre comme le logo, etc. Cela varie en fonction des projets. Une fois élaboré, le cahier des charges va servir de guide tout au long de la conception du projet et cela pour tous les intervenants.

Création du compte de suivi de projet

À ce stade, tous les éléments sont en place pour travailler au projet. Il faut cependant prévoir un espace pour suivre les différentes étapes de la conception du projet côté client. Pour cela, un espace privé au sein d’un site internet peut être un très bon outil. Celui-ci peut proposer d’avoir un aperçu de l’avancement global du projet, mais aussi de voir et de valider les différentes propositions graphiques, les prototypes, etc. L’espace privé peut aussi afficher le temps alloué au projet ainsi que l’attente entre les différentes validations du client.

Inventaire des contenus existants sur le site actuel et hors web

Avant de travailler à la conception du projet il est préférable de posséder tous les éléments du client. Il peut s’agir des textes, du logo, d’éléments graphiques d’autres projets, flyer, brochures, catalogue…  Le but est de gagner du temps pour ne pas reproduire un logo déjà réalisé précédemment. Mais aussi de s’inspirer de ce qui a déjà été produit pour aller plus loin en terme graphique.

Élaboration de la structure générale du site

Pour faciliter le travail de tous les intervenants, un plan sous la forme d’un organigramme est un vrai plus. Même quand il s’agit d’un projet avec seulement quelques pages, cela aide à la compréhension du travail à réaliser. On peut considérer deux types de plan, un pour les sites statistiques et un pour les sites dynamiques. Dans le premier cas il sera question de prévoir les pages du projet, pour un site dynamique on parlera plus de modèles de pages.

Agencement du contenu

Définir concrètement ce qu’il convient d’ajouter dans chacune des pages du site. Ici aussi, cela va dépendre du type de site. Pour un site statique, il faudra imaginer le contenu pour chacune des pages du site en plus du haut et bas de page. Pour un site dynamique, ce sera également le cas mais pour chaque modèle de page. Quoi qu’il en soit, il s’agit de noter précisément dans un document le contenu que chaque page ou modèle de page doit comporter.

Convention de nommage des pages

Quant il s’agit de travailler sur des projets de grandes envergures, nommer chaque page ou modèle de page avec un nom approprié est indispensable. En effet, cela facilite les échanges avec chaque intervenant du projet et permet de gagner du temps. Chaque page ou modèle sera nommé avec un identifiant unique et celui-ci sera indiqué sur le plan préparatoire et sur l’organigramme ensuite.

Création des gabarits de page

Étape incontournable pour réussir un projet web, un gabarit ou prototype est un schéma dépourvu d’éléments graphiques indiquant l’emplacement des zones de contenu : logo, menus de navigation, boutons, images, pictogrammes, textes… En fonction du type de projet : site d’information, e-commerce…, plusieurs prototypes pourront être réalisés pour la page d’accueil et les autres pages intérieures du site. Pour cette étape, il est très important de travailler en concertation avec le pôle développement, cela afin d’être sûr que le gabarit puisse être exploité lors de la phase de codage du projet.

Création de scénarios utilisateur

Pour les sites internet de grande envergure, il peut être envisageable de prévoir des scénarios utilisateur.  La création de scénarios utilisateur vise à décrire les différentes étapes et interactions qu'un utilisateur pourrait avoir lorsqu'il interagit avec le site. Un scénario utilisateur est une narration détaillée qui décrit les actions, les besoins et les objectifs d'un utilisateur spécifique tout au long de son parcours sur le site.

Définition des mots clés pour le référencement

Les mots-clés pour le référencement d'un site internet sont des termes ou des expressions spécifiques qui sont utilisés pour décrire le contenu et le thème du site de manière à le rendre plus facilement identifiable par les moteurs de recherche. Ces mots-clés sont sélectionnés en tenant compte des requêtes que les utilisateurs sont susceptibles de saisir dans les moteurs de recherche lorsqu'ils recherchent des informations pertinentes.

Elaboration des concepts

Avant de réaliser l’interface graphique du site internet qui concerne l’ensemble des modèles de page, il peut être judicieux de créer des concepts. Un concept est une page d’inspiration graphique qui a pour but d’imaginer un style graphique particulier en fonction des objectifs définis dans le cahier des charges. Celui-ci peut être composé d’une gamme de couleurs, un choix typographique, des images et pictogrammes. L’objectif est de valider un style graphique avant de lancer la conception graphique.

Elaboration de la charte graphique

L'élaboration de la charte graphique d'un site internet consiste à définir un ensemble de directives visuelles cohérentes et uniques qui guideront la conception et l'apparence graphique du site. La charte graphique joue un rôle clé dans l'identité visuelle de la marque et contribue à la reconnaissance et à la mémorabilité du site. 

Création de l'interface graphique de la page d'accueil

La création de l'interface graphique de la page d'accueil d'un site internet consiste à concevoir visuellement cette première page que les utilisateurs voient lorsqu'ils accèdent au site. L'objectif principal de la page d'accueil est d'attirer l'attention des visiteurs, de communiquer efficacement le message de la marque et de faciliter la navigation vers les différentes sections du site.

Création de l'interface graphique des pages types

La création de l'interface graphique des pages types d'un site internet fait référence à la conception visuelle et interactive des différentes pages qui composent le site, en dehors de la page d'accueil. Ces pages types comprennent souvent des modèles de mise en page réutilisables pour différents types de contenu ou sections du site.

Création de l'interface graphique de la newsletter

Dans la continuité de la conception du site, il peut être envisageable de réaliser un modèle de newsletter. Pour cela la charte graphique du site sera utilisé. La création de l'interface graphique d'une newsletter fait référence à la conception visuelle de la mise en page et du contenu d'un email envoyé périodiquement aux abonnés d'une liste de diffusion. L'objectif principal de l'interface graphique de la newsletter est de rendre le contenu attrayant, facile à lire et à comprendre, et de favoriser l'engagement des abonnés.

Validation graphique avant production

La validation graphique fait référence au processus de vérification et d'approbation de l'apparence visuelle de l’interface graphique avant sa mise en production ou sa diffusion. Elle vise à s'assurer que le travail graphique correspond aux attentes, aux exigences et au cahier des charges préalablement établie.

Création du code source des pages-types

Il s’agit du développement des fichiers de code nécessaires pour construire et rendre fonctionnelles les différentes pages d'un site internet. Processus réalisé a l’aide de code en HTML, CSS et JavaScript.

Découpage et optimisation des éléments graphique sur les pages

Il s’agit du processus de conversion des éléments visuels, tels que les images, les icônes, les logos, les boutons, etc., en fichiers adaptés à l'affichage sur un site web. Cette étape est essentielle pour améliorer les performances du site en réduisant la taille des fichiers graphiques, tout en maintenant une qualité visuelle optimale.

Insertion des contenus statique textes, images, animations…. (Pour les sites statiques)

Concernant les sites statiques, il s’agit de la création et de l’intégration des éléments visuels dans le code HTML d'une page web. Ces contenus sont affichés de manière fixe et ne sont pas modifiés dynamiquement en fonction des actions de l'utilisateur.

Création des bases de données pour les contenus dynamiques

Cette étape consiste à concevoir et mettre en place une structure de stockage organisée pour les données qui seront affichées et gérées de manière dynamique sur le site. Cette base de données permet de stocker et de récupérer les informations nécessaires pour alimenter les fonctionnalités interactives et personnalisées du site.

Création du back Office d'administration (CMS)

Le CMS (Content Management System), fait référence à la conception et au développement d'une interface conviviale permettant de gérer et de mettre à jour facilement le contenu et les fonctionnalités du site.

Production des pages-types en php pour rendre le site dynamique

Il s’agit ensuite du procéder au développement des fichiers PHP qui génèrent dynamiquement le contenu des pages web en fonction des données stockées dans une base de données ou d'autres sources de données externes.

Optimisation technique des pages pour le référencement

Le SEO technique, désigne l'ensemble des actions visant à optimiser la structure, le code et la performance d'un site web afin d'améliorer sa visibilité et son classement dans les résultats des moteurs de recherche.

Optimisation des mots clés

Il s’agit de l’élaboration d’une stratégie visant à sélectionner et à intégrer judicieusement des mots clés pertinents dans le contenu du site, afin d'améliorer son classement dans les résultats des moteurs de recherche.

Création d’un plan de site pour indexation Google avec mise à jour dynamique

Afin de faciliter l'indexation par Google et les autres moteurs de recherche, nous adressons un plan complet des pages du site internet au format XML avec mise à jour automatique.

Inscription dans les moteurs de recherche

Il s’agit pour nous de soumettre le site aux moteurs de recherche afin qu'ils le connaissent et l'indexent dans leur base de données. Cela permet au site d'apparaître dans les résultats de recherche lorsque les utilisateurs effectuent des requêtes liées à son contenu.

Réécriture du nom des pages dynamiques (option dynamique)

Egalement connue sous le nom de URL rewriting, la réécriture est un processus qui consiste à modifier les adresses URL des pages générées dynamiquement par le site. L'objectif principal est de rendre les URL plus lisibles, conviviales et compréhensibles pour les utilisateurs et les moteurs de recherche.

Statistiques complètes depuis l’hébergement

Votre hébergement bénéficies de statistiques sur l'utilisation et la performance d'un site web à partir de l'infrastructure utilisée. Cela inclut généralement les statistiques de trafic, les données de chargement des pages, les informations sur les visiteurs et d'autres mesures de performance clés.

Statistiques avec le CMS

Le CMS dispose généralement de statistiques sur le trafic, les pages les plus visitées, les mots clés,  les commandes, etc.

Statistiques avec Google Analytics

La plateforme d'analyse web gratuite proposée par Google permet de collecter et d'analyser des données détaillées sur l'activité de votre site web.