Le découpage HTML / CSS

Le découpage HTML est une étape de la phase de réalisation qui consiste à créer des fichiers HTML à partir des maquettes fournies par les graphistes. Ces fichiers ont la particularité de pouvoir être interprétés (lus et affichés) par les navigateurs Internet. Il s'agit ici de reproduire au pixel près les écrans conçus par le graphiste et validés par le client.

Cette partie va rapidement décrire les avantages et inconvénients des deux principales méthodes disponibles pour le découpage ainsi que celle qui a été choisie. Elle mettra aussi l'accent sur mon retour d'expérience vis à vis du découpage HTML.

V.5.1 Les techniques de découpage

Il existe deux grandes méthodes de découpages. La première est celle basée sur les tableaux (balises HTML 'table', 'tr', 'td', etc.). Dans cette méthode, le contenu de la page est positionné dans les différentes cellules d'un tableau. La démarche consiste à découper la page en zones dans un premier temps, puis d'intégrer les contenus dans chaque zone dans un deuxième temps. Elle n'est plus beaucoup utilisée aujourd'hui car elle a beaucoup d'inconvénients (détournement de l'utilisation des tableaux, pas de séparation de la forme et du contenu, profondeur du DOM (Document Object Model) qui impacte de manière négative le référencement etc.)

L'autre méthode consiste à utiliser les CSS, ou Cascading Style Sheets (en français, feuilles de styles en cascade). Par rapport à la méthode des tableaux, la démarche CSS est complètement inversée. Ici l'intégrateur HTML doit d'abord partir du contenu pour ensuite travailler sur le positionnement et le design. La philosophie de cette approche est de construire le design en spécifiant des blocs de contenu. Les styles sont ensuite appliqués sur chaque bloc dans un fichier CSS. Par exemple, lorsque l'on découpe la page de liste des produits, un des blocs peut être celui d'un produit, qui sera composé d'une image, d'un texte descriptif, d'un lien d'ajout au panier et d'un lien vers la page de détail.

Ce raisonnement permet de séparer le contenu de la forme, le CSS étant indépendant des fichiers HTML. Toutefois, le CSS positionning souffre d'un défaut majeur qui est la compatibilité entre navigateurs.

Cette compatibilité est aujourd'hui la principale difficulté pour les intégrateurs. Par exemple, certains navigateurs appliquent des marges ou des bordures alors que la CSS ne les mentionnes pas. Ces comportements par défaut peuvent toutefois être corrigés à l'aide de scripts adaptés. Enfin, dernier point mais non des moindres, cette méthode a l'avantage d'être conforme avec les recommandations du consortium W3C, dont le but est de définir les standards du réseau Internet.

V.5.2 La méthodologie employée

Pour rester fidèle aux recommandations du W3C, j'ai souhaité que le découpage soit basé sur la méthodologie des feuilles de style CSS. Mickael s'est chargé seul du découpage de l'ensemble des écrans. Encore une fois, il s'agissait pour moi de déléguer et de donner des responsabilités au développeur pour que celui-ci soit impliqué dans le projet. Je pensais qu'une plus grande marge de manœuvre aurait un impact positif sur le découpage.

Cependant, le cas de Mickael était un peu différent. En effet, il s'agissait pour lui (et pour Louis) du dernier projet en tant que membre de l'équipe Skalpel. Si globalement le travail produit par Mickael a été très satisfaisant et que les délais ont au final été tenus, je pense que l'excès de liberté a peut être eu l'effet inverse de celui recherché au départ.

En effet, j'ai constaté par exemple que certains blocs étaient moins bien découpés qu'à l'habitude. Peut être était-ce dû à un manque d'envie du fait de son départ ? Ou tout simplement était-ce dû à une mauvaise analyse ?

Par exemple, Mickael avait choisi de définir une hauteur et un fond fixe pour le bloc des produits Tecdoc dans la page de listing des produits. Ce choix permet de simplifier sensiblement le découpage car il implique uniquement la spécification d’une image de fond fixe pour le bloc, quelque soit le contenu de ce dernier. Mon point de vue est donc que le découpage avec une taille fixe est peu judicieux car, dans notre cas, la taille ainsi que le nombre de descriptions (et donc, de la hauteur du bloc) varie d'un produit à l'autre.

Découper le bloc produit en séparant l'ombre du bas en une image distincte a pour grand avantage de donner au bloc produit une hauteur variable. Cela est rendu possible notamment en affichant l’ombre du bas dans un bloc à part, à la fin de la description du produit.

J'ai donc du intervenir personnellement pour corriger le découpage de certains blocs comme le montre le visuel précédent. Je savais que le découpage était une activité qui nécessitait de bonnes connaissances en HTML et en CSS. Mais j'ai aussi pu me rendre compte qu'il y avait aussi des aspects auxquels on ne pensait pas instinctivement et qu'il fallait néanmoins prendre en compte lorsqu'on réalisait le découpage d'une maquette. Par exemple le choix des formats ou des extensions pour les images ainsi que les contraintes de poids des pages à télécharger ne sont pas des points cruciaux à première vue... Ils jouent pourtant un rôle fondamental dans l'expérience utilisateur.

La formation en HTML et CSS dispensée à l'IUT Informatique n'est à mon sens pas suffisante pour faire un découpage de la complexité de celui de PiècesAvenue. En fait, je pense que beaucoup d'aspects du langage sont purement et simplement éludés. Il faut alors faire des recherches soit même ou être au contact d'experts tel que Mickael pour s'améliorer, comprendre l'intérêt et les subtilités du découpage.

Je me suis aussi rendu compte que c'est un domaine qui nécessite une remise en question constante avec l'évolution des langages (aujourd'hui HTML5) mais aussi des navigateurs. Finalement, mon opinion sur cette activité a grandement changée avant et après le projet ! Je trouvais le découpage fastidieux et trop complexe, mais finalement c'est plutôt ludique...