documents

Visuel contre structurel

Selon un sondage récent paru dans un forum majeur de la conception graphique Web, le premier réflexe de la plupart des concepteurs graphiques Web lorsqu'on leur demande un nouveau site Web est de lancer Photoshop. Pour d'autres, cette approche paraîtra plutôt rétrograde : ils baliseront le contenu avec un œil sémantique avant d'appliquer la mise en pages et les fonctionnalités. Le choix entre l'approche visuelle et l'approche structurelle influence-t-il l'accessibilité ou la convivialité du site ? Y aura-t-il des différences esthétiques entre les deux ? Les concepteurs visuels perçoivent la page Web comme une image : les couleurs, les formes et les images définissent la page, et le contenu est quelque chose qui occupe les diverses régions de l'image. C'est une démarche centrée sur le visuel.

Les concepteurs structurels voient la page Web comme un document. L'information véhiculée est la chose principale, tandis que la création visuelle vient ensuite pour rendre le tout plus appétissant. C'est une démarche centrée sur le contenu. En supposant des compétences égales pour le HTML, le CSS, l'accessibilité, la convivialité et les arts graphiques, la différence entre une page créée par un concepteur visuel et une page créée par un concepteur structurel peut sembler minime. Elles peuvent même être visuellement identiques.

Les concepteurs visuels commencent par la création graphique en s'assurant que la page présente bien dans les navigateurs principaux. Ils créeront ensuite un fichier avec l'ossature HTML composée d'éléments div, chacun correspondant à une partie principale de l'image conceptuelle. À ce stade, les éléments div seront souvent remplis par du texte « lorem ipsum » fictif. L'étape suivante consistera à créer la feuille de style CSS et à arranger ces éléments div entre eux, en appliquant des images d'arrière-plan découpées dans la maquette Photoshop. Enfin, le texte fictif est remplacé par le contenu véritable avec un balisage sémantique.

Les concepteurs structurels commencent par le contenu en s'assurant du balisage sémantique et de l'ordre logigue de l'ensemble. Cela fait, ils appliqueront le style, souvent en travaillant d'après une maquette Photoshop comme les concepteurs visuels. Certains auteurs de ce groupe n'utilisent même pas de maquette et laissent le contenu dicter le style.

Et en ce qui concerne l'accessibilité, la convivialité, l'esthétique ? Les conceptions visuelles qui utilisent beaucoup d'images d'arrière-plan tendent à avoir une largeur fixe où les dimensions des diverses régions de la page sont définies en pixels. Cela peut être au détriment des utilisateurs de petits écrans (par exemple, les appareils portables) et des utilisateurs avec une mauvaise vue qui ont besoin d'un texte de grande dimension. Avec l'approche structurelle, le concepteur sait combien il y aura de contenu dans chaque région avant de commencer avec le CSS, et il peut donc définir plus facilement des dimensions en unités relatives de police comme le em et le %.

La page d'un concepteur visuel comparée à celle d'un concepteur structurel contiendra vraisemblablement plus de balisage. En partant d'une ossature d'éléments div, l'approche visuelle ne tire pas avantage de l'apparition naturelle des éléments pour appliquer le style. Toutefois, les concepteurs visuels expérimentés et compétents peuvent optimiser leur balisage et supprimer les éléments div superflus une fois le contenu en place. Dans des cas extrêmes, il peut y avoir un impact pour les utilisateurs en accès commuté ou ceux en déplacement (notamment parce que les pages fondées sur du graphique tendent à utiliser plus d'images), mais les différences sont probablement négligeables dans la plupart des cas.

Bien que des études semblent indiquer que l'ordre dans la source n'a pas une importance énorme pour la majorité des visiteurs, il a un impact réel sur la convivialité pour certains groupes d'utilisateurs, principalement les utilisateurs qui naviguent au clavier (à cause d'un handicap ou pour des préférences personnelles). Une page créée par un concepteur structurel aura automatiquement un ordre logique dans la source puisque le contenu est balisé avant l'application du style.

Une page créée par un concepteur visuel peut également avoir un ordre logique dans la source mais il n'est pas rare, avec un graphisme complexe, que le contenu soit séparé en parties rien moins qu'illogiques lorsqu'il est contraint dans une structure créée d'après une conception visuelle. En ce qui concerne l'esthétique, il n'y a rien dans l'une ou l'autre approche qui limite techniquement les possibilités de création. En réalité, les graphistes expérimentés tendent naturellement vers une conception centrée sur le graphisme. Ceux qui ont une approche centrée sur le contenu sont souvent mais pas obligatoirement moins doués pour les arts graphiques.

Alors pourquoi l'approche visuelle prévaut-elle donc tant sur la structurelle ? Une raison est que la majorité des gens pensent visuellement, en particulier pour la conception Web. Beaucoup trouvent difficile le raisonnement abstrait imposé par l'approche structurelle. En outre, les concepteurs visuels croient que commencer par le contenu impose des limitations aux possibilités de création. Bien sûr, la raison principale est que beaucoup de concepteurs se servent très probablement d'outils « tel écran-tel écrit » comme Dreamweaver ou FrontPage lesquels favorisent à l'extrême le graphisme.

À l'origine, le langage HTML était prévu pour le balisage sémantique de documents scientifiques pour des échanges électroniques. Divers types d'éléments de présentation furent ajoutés plus tard, d'abord comme extensions propriétaires des navigateurs, puis incorporés ensuite dans les standards. Avec le temps et parce que la plupart des graphistes ont une inclination au visuel, on considéra presque HTML comme un langage de mise en pages (quoique médiocre). Les navigateurs et autres agents d'utilisateurs traitent principalement de l'aspect sémantique des pages Web, bien que les navigateurs graphiques soient aussi capables d'appliquer des feuilles de style CSS pour styler le document. Les technologies d'assistance, par exemple les agents d'utilisateurs pour personnes handicapées, s'appuient également sur un balisage sémantique exact. Ainsi, bien que peu de concepteurs considèrent au prime abord une page Web comme un document, c'est ce que font les agents d'utilisateurs et les technologies d'assistance.

Alors comment créer une page dans une perspective du contenu ? Réduisons cela à une liste simplifiée d'instructions pas-à-pas :

  1. Avec un éditeur de texte, écrivez le contenu du document, c'est-à-dire chaque morceau d'information qui apparaîtra dans la page ;
  2. Ajoutez un balisage sémantique au contenu, en repérant les paragraphes, les listes, les tableaux, les emphases, etc. Ajoutez aussi les parties « formelles » du document HTML : la déclaration DOCTYPE, l'élément head, les balises body, etc. (cette étape est souvent combinée à la précédente) ;
  3. Si nécessaire, remplacez des parties du contenu par des images illustrant ou complétant le texte. Utilisez le texte remplacé comme contenu de l'attribut alt de chaque image. Ajoutez les images décoratives (celles qui illustrent l'article mais ne véhiculent aucune information pertinente). Utilisez un attribut alt vide (alt="") pour ces images ;
  4. Créez la feuille de style CSS. Commencez par les règles génériques, c'est-à-dire celles qui utilisent des sélecteurs simples de types d'éléments. Définissez de préférence les règles de base, comme la famille de police et la hauteur de ligne, sur l'élément html. Définissez les marges et l'espacement explicites de tous les types d'éléments car les valeurs par défaut diffèrent entre les navigateurs ;
  5. Ajoutez les règles de la mise en pages, en utilisant des flottants et/ou un positionnement absolu. Assurez-vous d'utiliser des unités relatives (em ou %). À ce stade, il faudra normalement ajouter au balisage des attributs id et class. La plupart des mises en pages nécessiteront également quelques éléments div d'emballage pour regrouper les composants de la page ;
  6. Ajoutez les règles CSS restantes qui prendront en charge des choses telles que les images d'arrière-plan (qui peuvent être créées d'après une maquette), les couleurs, les bordures, etc. Si vous stylez les liens, n'oubliez pas la pseudo-classe a:focus qui est d'importance vitale pour les utilisateurs navigant au clavier. (Le navigateur Internet Explorer l'ignore et interprète incorrectement a:active comme cible de clavier à la place).

Tout au long de ce travail, testez et vérifiez l'aspect avec le meilleur navigateur disponible (les dernières versions d'Opera, de Firefox ou de Safari). Lorsque vous avez terminé, vérifiez le fonctionnement dans tous. Puis appliquez les bidouillages et les corrections de bogues pour les versions de Internet Explorer à gérer. Cela peut paraître rétrograde et difficile pour un concepteur visuel, mais ce n'est vraiment pas le cas. Cette façon de penser est radicalement différente mais n'est pas plus dure ou plus facile que la méthode traditionnelle. La seule vraie différence est probablement un résultat plus accessible et convivial.

© 1999-2008 yoyodesign.org — Certains droits réservés