Ex navigateur ou ex Photoshop

Quand on évoque la conception d’un site web, notamment lors de séminaires ou de conférences rassemblant des acteurs d’internet, un sujet polémique est celui la « bonne » approche. À défaut de combat des anciens contre les modernes, il y a celui, forcément caricatural, des graphistes et des intégrateurs. Il s’agit d’une discussion sur les outils les mieux à même de permette de créer, in fine, une maquette de site — maquette au sens employé pour la réalisation d’un livre ou d’un magazine. Chacun défend alors son métier et rapidement se voit affublé de l’étiquette de « dingue irréaliste » ou de « castrateur sans goût ». La demi-mesure n’en mène alors pas large…

Le problème réside sans doute en partie dans le cloisonnement prononcé, en France, qui existe entre créas et intés, cloisonnement entretenu par le mode de fonctionnement de la plupart des agences. Sur la scène web anglo-saxonne cette querelle de clochers me paraît désormais dépassée ou tout du moins grandement apaisée. Il faut y voir le résultat d’une approche plus libérale, moins typée, de ces métiers.

Mon cœur balance

En dépit de ma formation initiale dans une école d’arts appliqués, sept années passées chez l’annonceur à mener gros projets et petits dépannages m’ont amené à délaisser peu à peu l’univers autrefois rassurants des calques et des palettes pour celui, perçu comme austère, des lignes de texte brut. Désormais indépendant, le dilemme est de savoir comment organiser mon travail. Dois-je commencer par saisir le stylet où m’emparer du clavier — voir du iPad mais ceci est un autre sujet — pour attaquer un nouveau projet ?

Penser au contenant

Le mentra « d’abord le contenu » est pour moi bien évidemment au cœur de tout projet de site. Cependant, une fois le concept de celui-ci établi et son contenu esquissé, avant de concevoir quoi que je soit je pense aux pages et à leurs structures, en termes de « container ». En clair ? Je découpe celles-ci en objets sémantiques ou fonctionnels qui seront nécessaire à l’organisation de l’information et au fonctionnement du site. Sont alors recensés les zones principales (navigation, annexes, corps du texte…) ainsi que les micro éléments textuels avec leurs variantes (niveaux de titre, différents types de lien, éléments de datation ou de signature, etc.).

Une fois cette liste à la Prévert établie, il me reste à matérialiser les futures pages à l’aide de l’outil avec lequel je suis le plus à l’aise sur le moment : Textedit (ou wordpad) ou Fireworks par exemple. Je peux éventuellement passer par une phase intermédiaire de prototype à l’aide d’un outil comme Mockup de Balsamiq.

Rien que de très classique

Cette démarche ressemble beaucoup à celle de zoning utilisée pour préparer l’intégration de pages dans un système de gestion de contenu mais cette dernière est d’habitude réalisée en aval, sur les pages déjà maquettées. Elle dénote plus d’une culture d’intégrateur que de créatif mais elle permet d’anticiper, aussi bien du point de vu du graphisme que de celui du montage html, tous les objets qui permettront de mettre en forme le contenu du site.

Éviter le flou et l’improvisation

J’ai développé cette habitude de travail après quelques mésaventures vécues au cours, ou plutôt après, de projets de déploiement de systèmes de gestion de contenu. En partant de maquettes de pages réussies et équilibrées, avec une équipe de monteur HTML compétente et une intégration fidèle dans le CMS, on arrivait à des pages « réelles » bancales et quelques horreurs typographiques.

Comment est-ce possible ? Et bien en ne prévoyant pas une mise en forme de toutes les balises de titre par exemple, ni les mises en indice ou exposant, en n’ayant pas anticipé des textes longs ou l’utilisation de telle ou telle balise. On se retrouve alors avec la mise en forme par défaut du navigateur ou aucune mise en forme si une mise à zéro (reset) CSS à été appliquée.

En ne préparant pas au maximum la cartographie de ses pages on s’expose à passer à côté de petites choses qui deviendront alors potentiellement de gros grains de sables.