Close

Gérer un projet web : exemple, cas pratique

Voici l’exemple du site du Centre d’information sur l’eau lors du forum mondial de l’eau en France : www.forum-eau2012.fr

Ce site internet événementiel, entièrement animé sans flash, est accessible sur Tablette, Smartphone et Ordinateur grâce à son développement en Responsive design : il s’adapte au support de lecture. Le site est même nominé aux CSS Award pour la technique utilisée.

Ludique et pédagogique, on apprend aux travers des différentes pièces visitées de la maison l’importance de l’eau en France et dans le Monde : on n’a pas forcément tous la même chance.

Comprendre le brief du client

Le brief du client : se servir de l’événement pour se faire connaître. La demande concernait un site événementiel ludique mais savant, permettant d’en apprendre davantage sur l’eau tout en étant divertit par le site.

La simple agence s’est servie des derniers standards afin de rendre le site accessible à tous, sur tous les supports. Cette technologie appelée responsive design permet d’utiliser une seule adresse web pour afficher plusieurs mises en page différente, qui s’ajuste en fonction de la largeur du support.

Le cahier des charges a donc été constitué, reprenant ainsi toutes les fonctionnalités à y inclure :

  • Flux Twitter
  • Des pages d’information
  • La visite d’une maison française et comparaison avec le reste du Monde
  • Multisupport

L’étude du projet a permis de soumettre l’idée de faire un site animé par des photos et d’en faire une navigation ludique dans la maison.

Création et soumission des axes

Ensuite, on passe à la création de la maquette. Plusieurs axes sont soumis au client, il doit alors choisir l’esprit qu’il désire à la maquette.

Voici les axes créés pour le site internet :

Cliquez sur la miniature pour l’agrandir

Après une réunion en interne dans l’agence, on va se fixer sur deux axes à présenter au client. D’abord, on corrige les petites imperfections en prenant en compte l’avis de chacun, puis on va organiser une présentation au client pour « vendre » les deux axes préférés. En effet, même si quatre axes sont créés, l’agence décide de ne présenter que les deux meilleures, c’est son rôle de conseil qui intervient dans cette étape.

Les deux axes présentés au client :

 

Cliquez sur les miniatures pour les agrandir

Axe bleu et axe beige, présentés lors de la réunion graphisme au Centre d’information sur l’eau.

Après discussion, l’axe beige est sélectionné puis modifié pour s’ajuster au plus juste aux demandes clients. L’intégrateur passe à l’action est va transformer la maquette réalisée sous Photoshop en maquette internet lisible sur un navigateur internet (Firefox, IE, Chrome, etc.). Cette intégration utilise des grilles responsive design qui permettent de rendre flexible la mise en page du site selon le support utilisé.

Rendre responsive et développer le site évènementiel

Ainsi le rendu n’est pas le même sur mobile que sur Ordinateur. C’est normal car l’utilisation d’un site internet ou d’une ressource en ligne, n’est pas la même selon le support. Sur ordinateur, l’espace de lecture est plus grande par exemple. Il faut donc bien choisir les informations à présenter sur mobile, les fonctionnalités à privilégier.

Le développement du site internet prend le relais à l’intégration. Le développeur prépare les fichiers et réserve l’espace sur le serveur. Tant qu’il n’est pas en ligne, on dit d’un projet web qu’il est en préproduction. Lorsqu’il sera en ligne on dira qu’il est en production. Toutes les évolutions et modifications d’un site internet ne se font jamais directement en production, elles sont forcément réalisées en préproduction. Après validation par le client, les évolutions et modifications passent alors en ligne, en production.

Ensuite, on passe en phase de tests (ou recettage) avec pour chaque fonctionnalité un état défini à OK ou KO. Si l’état est à OK, la fonctionnalité fonctionne. Si l’état est à KO, la fonctionnalité a planté, ou bien ne s’est pas réalisée entièrement. Ces lignes représentent donc la phase de recette, ou recettage.

Exemple de recettage pour le site du forum sur l’eau :

Fonctionnalité Etat Détails
Passer à la page forum OK
Aller dans la cuisine OK
Aller dans la salle de bain KO L’une des photos disparaît avant la fin de l’animation

Il ne faut pas négliger cette partie car c’est généralement en bout de chemin que l’on espère gagner un peu de temps et souvent la phase de recette est raccourcie. Cependant, c’est primordial de le faire pour que l’expérience utilisateur ne soit pas entaché d’erreurs ou de bugs qui aurait pu être évités.

Ensuite, on met en ligne les différents fichiers, sur le serveur de production, dès que le client a validé  la bonne conformité de ces attentes en se rendant sur le site terminé en préproduction.

Le site est disponible pour l’exemple à l’adresse suivante : http://www.forum-eau2012.com

Version mobile

Version ordinateur

About the author Styven

Je poste de tout ici, photos, impression, vidéo. C'est une trace que je laisse pour me rappeler des choses que j'ai tendance à oublier...

All posts by Styven →

Leave a Reply

Your email address will not be published. Required fields are marked *