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 :
DOCTYPE, l'élément head,
les balises body, etc. (cette étape est souvent combinée à la précédente) ;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 ;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 ;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 ;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.