Concevoir un site web

Durant mon stage cet été à Faeria, nous avions rencontré quelques problèmes quant à la conception des sites web, ce qui m'avait poussé à écrire un petit tutoriel de conception. La méthode n'est sans doute pas parfaite, et ne se base sur aucune grande méthode de conception connue, seulement mon expérience personnelle. Je serais ravi d'échanger à ce propos si vous y voyez à redire.

Cet article présente les différentes étapes de la construction d'un site internet afin d'optimiser la productivité, votre temps et éviter les erreurs classiques. Il est important de prendre le temps de concevoir une application avant de la développer, il faut savoir voler avant de se jeter dans le vide ! Réfléchir sur un brouillon est donc une étape à ne pas négliger.

Plus une erreur est découverte tardivement dans le processus de conception & développement, plus elle coûte cher !

Touver un thème, un but

Avant toute chose, il faut connaître le but d'un site web et le publique visé. Quelle est sa fonction ? Qui ira le voir ?

• Mon site sera le portail francophone de l'équitation aquatique. Ce sera un site communautaire qui visera tous les amateurs d'hippocampes.
• Mon site sera la vitrine de mon produit : le réchauf'steak. Il vise tout acheteur potentiel, où qu'il soit et apportera régulièrement de nouvelles informations sur le réchauf'steak.
• Mon site sera le site officiel de Runes, un MMO de malade sur téléphone mobile. Il vise les joueurs de Runes qui y trouveront de l'aide sur le jeu.

Lorsque l'on sait ce qu'on veut faire, et quel public on vise, alors vient l'étape suivante.

Établir les contraintes

Il existe beaucoup de contraintes qui peuvent encadrer un site. Généralement ce sont des contraintes qui suivent les grandes lignes du thème du site, mais elles peuvent aussi être physiques.

IL EST ABSOLUMENT IMPÉRATIF DE CONNAÎTRE TOUTES LES CONTRAINTES DU SITE AVANT DE SE LANCER DANS LE DÉVELOPPEMENT DU SITE. Une fois ces contraintes définies, un retour en arrière est très couteux en temps. Il est donc important de parfaitement connaître chacune des questions suivantes, et d'y trouver des réponses.

Contraintes logicielles

• Le site doit-il être visible correctement par tous les navigateurs ?
  • Internet Explorer < 5.0 ?
  • Internet Explorer 6, qui ne supporte pas la transparence sur les PNG 24bits ?
  • Internet Explorer 7 et sa méprise des standards ?
  • Navigateurs pour téléphones mobiles (iPhone, Android) qui ne connaissent pas les scrollbar dans un site ?
  • Les navigateurs en ligne de commande (elinks...) qui peuvent assurer l'accès à un site à un technicien effectuant de la maintenance sur un serveur par exemple ?
• Le site doit-il utiliser Flash ? Flash permet une grande flexibilité graphique mais est plus que médiocre en terme de référencement.
• Le site doit-il utiliser un CMS ? Les CMS permettent généralement de développer un site rapidement mais ne sont pas aussi bien référencés et si flexibles que les sites écrits à la main.
• Le site doit-il respecter les standards W3C ? Ces standards assurent la compatibilité des sites entre tous les navigateurs qui les respectent. Ces normes tendent à être utilisées par tous les navigateurs, mais certains comme les vieilles versions d'Internet Explorer ne les respectent pas et risquent de ne pas rendre le site correctement. Le respect de ces normes peut donc parfois être bridant.
• Utilisera-t-on Javascript ? Javascript permet d'animer le contenu des pages web, notamment grâce à des librairies telles que JQuery ou Scriptaculous. Cependant celles-ci ne sont pas supportées par tous les utilisateurs, et peuvent parfois être coûteuses en ressources. Une solution intermédiaire peut être de choisir de ne rien laisser dépendre de Javascript, et de prévoir des mécanismes de secours pour que le site s'affiche quand même correctement même quand Javascript est désactivé.

Contraintes matérielles

• Combien de visiteurs sont attendus pour le site ? (10, 1 000, 10 000, un million ?) Cela influera sur le choix d'un serveur, sur le choix d'un SGBD ([http://mysql.fr MySQL], [http://www.postgresql.org/ PostGreSQL]...)
• Quelle sera la résolution minimum du site ?
  • 800*600 comme sur les écrans antiques
  • 1024*768 comme sur les vieux écrans, comme ceux des administrations, des bureaux, des secrétariats…
  • 1280*800 comme sur la plupart des pc portables
  • 1280*1024 qui était une des plus grosses résolution des écrans 4/3
  • Ou plus ?

Contraintes sur le contenu

• Le site doit-il être monolingue, multilingue ?
• Quelle sera la langue du site ? Sortira-t-il en anglais puis en français, l'inverse ?
• Le site sera-t-il statique ou dynamique ? Un site statique implique une conception sans faille où les retours en arrière et les modifications sur le contenu seront coûteuses en temps. Un site dynamique prend plus de temps à développer mais permet une plus grande flexibilité quant aux modifications de contenu.
• Enregistrera-t-on des informations privées sur les visiteurs ? Auquel cas une déclaration à la CNIL serait appréciée.
• Quelle profondeur aura mon site ? L'utilisateur doit-il pouvoir atteindre toutes les pages en trois clics ?

Contraintes graphiques

• Combien de "design" différent sera doté le site ? Un unique ? Un design pour les pages de paiement et un autre pour le reste du site ?
• Quelles sont les couleurs principales du site ? (et des différents designs ?) Il est conseillé d'avoir un jeu de deux ou trois couleurs principales qui marqueront l'identité du site. Plus de couleurs donne souvent un effet brouillon.
• Le design sera-t-il statique ou extensible ?
  • Un design statique peut afficher d'énormes marges blanches sur les trop gros écrans, et peut mal s'afficher sur les trop petits écrans. Un design extensible peut amincir les paragraphes sur les grands écrans et donner un effet "vide".
  • Le background du site présentera-t-il un motif répété ? Si non, il sera sans doute nécessaire de prévoir un fondu vers une couleur de fond sur les bordures du site.

Cette étape peut être fait en parallèle de la suivante.

Qui fait quoi ?

Il est nécessaire de définir les rôles des contributeurs du site :

• Qui commande, qui valide ?
• Qui développe ?
• Qui designe ?
• Qui écrit le contenu ?

Il est important que chacun des acteurs connaisse l'ensemble des contraintes qui le concernent. Un acteur ne devrait pas joueur un rôle qui ne lui est pas assigné, sauf s'il est clairement défini qu'il le fasse.

Une fois que l'on a défini les contraintes et les rôles, on peut passer à l'étape suivante.

Penser et tester

Nous arrivons au moment où l'on va réellement imaginer ce que comportera le site : quelles pages, quels designs, quels effets etc. Les étapes suivantes sont à effectuer dans l'ordre sauf contre-indication.

Quelles pages ?

Pages

Dans cette étape doivent être définie la liste des pages qui composeront le site. À ce moment vous devez savoir quelle page sera statique et quelle page ne le sera pas, dans le cadre d'un site dynamique. Il peut être utile pour les gros sites de catégoriser ces pages, afin de définir les menus s'il y en a.

Footer, Header, Menus

Une fois la liste des pages définie, il faut aussi définir les liens que comportera le site. Où mettra-t-on les liens vers les pages (dans un menu, dans une speedbar, dans le footer...) ?
Il faut aussi définir à ce moment le chaînage des pages : quelle page pourra-t-on atteindre depuis quelle page ?
Fait-on des menus ? Si oui sera-t-il déroulant ? Sera-ce une speedbar ?
Quelles informations mettra-t-on dans notre footer ? Liens vers des partenaires ? Liens vers des réseaux sociaux ?

À la fin de cette étape, un document listant la liste des pages devrait être produit, et validé par l'équipe

Quel contenu

Ici on doit définir le contenu du site. La totalité des textes, dans la langue de base du site au moins, doit être écrite à partir de maintenant. Les images, les photos et la mise en page ne sont pas concernées ici, ce travail doit être fait de concert avec le designer, à l'étape suivante.

À la fin de cette étape, un document par page devrait être produit

Quel design ?

Design

C'est à ce moment que l'on va mettre en forme le site. Doivent être définies à ce moment la mise en page :

• Quelle police de base ?
• Quel background ?
• Comment agencer le header, le footer, les menus ?
• Comment agencer le contenu de chaque page ? Attention, il est important de travailler, voire de produire des maquettes, sur chacune des pages du site définies auparavant.
  • Quel mise en page aura-t-on ?
  • Quelles images seront présentes ?
  • Quel background aura-t-on sur cette page ?

À la fin de cette étape, une maquette par page (de design différent) devrait être produite et validée. Chacune des images qui apparaîtra sur le site doit être produite et prête à intégrer. Un document présentant les aspects généraux de la mise en page doit être produit : (polices, couleurs utilisées pour les fonds, etc)

Quels effets ?

Cette étape concerne les éléments de design gérés par Javascript, (et donc le développeur plus que le graphiste), comme les effets. Cela inclut :

• Des menus déroulants
• Des menus accordéons
• Des slideshow
• Des carousels
• et tous les autres effets et animations souhaitées sur le site non gérées par flash.

À la fin de cette étape, une maquette par effet désirée devrait être produite et validée

Pré-développement

Le travail de conception à ce stade est terminé. Il peut être intéressant à ce moment de faire une rétrospective sur ce qui va et ne va pas et d'effectuer les derniers changements. Passé cette étape, presque seul le développeur sera nécessité, mais chaque changement peut remettre en cause l'intégrité de la structure du site au niveau de la programmation. Le site risque donc d'être plus buggué, plus dur à maintenir, plus dur à documenter…

Développement

À partir de ce moment le développeur doit avoir un cahier des charges précis, et toutes les ressources dont il aura besoin (documents précédemment cités). Avec tout cela le développement peut aller très vite (plus vite que la conception dans certains cas). Le développeur fera valider au validateur une à une les fonctionalités qu'il aura implémentées.

Déploiement

Pré-production

Une fois le site fini de développer, il doit être déployé en pré-production. La pré-production doit être considérée "comme ci c'était la production". Les textes écrits via le back office d'un site dynamique doivent être vérifiés à ce moment là. Une séance de tests intensifs, avec toutes les personnes disponibles, est conseillée. Le but de ce teste est de faire toutes les conneries que peut faire un utilisateur : principalement rentrer des champs erronés dans les formulaires pour tester leur bon fonctionnement.
Quand l'intégralité du site est validé en pré-production alors il peut être mis en production.

Production

Étape simple et rapide qui consiste en la simple copie du site préalablement validé en pré-production, et à quelques réglages. Il est IMPENSABLE de mettre en production un site qui n'aie pas été dument testé et validé auparavant.