Iconologic et les standards

Par Aaron Boodman

Note : cet article a été écrit à l'origine [Ndt : en juillet 2001] pour tenter de convaincre les huiles d'Iconologic (où je travaille) que se conformer aux standards est une bonne chose. Je le publie ici pour la postérité.

Préambule

Je viens d'arriver chez Iconologic. En vérité, je n'y suis que depuis quelques semaines et j'ai déjà assez râlé en parlant des standards pour qu'on me pousse à écrire un petit article pour les expliquer. A travers ce papier je veux donc vous convaincre, vous le chargé de clientèle, vous l'architecte technique, vous le designer, de l'importance de construire des pages qui sont conformes aux standards. J'espère aussi suffisamment vous aguicher pour vous donner envie d'entrer dans ce nouveau monde. Alors allons-y.

Qu'entend-on par "conforme aux standards", en fait ?

En général, quand quelqu'un dit d'une page web qu'elle est "conforme aux standards", "montée selon les standards Web", ou toute autre phrase-choc du genre, il veut dire que la page est construite en n'utilisant que des langages standardisés et/ou recommandés par le World Wide Web Consortium. Le W3C (diminutif du Consortium utilisé par tous, lui y compris) est un organisme indépendant similaire à l'ECMA, qui s'est fixé comme tâche de développer, de standardiser et de tenir à jour toutes sortes de langages de programmation utilisables pour le web.

Pour vous et moi, les plus importants de ces langages sont probablement le XHTML (peu différent du HTML) et les CSS (Cascading Style Sheets, ou Feuilles de Styles en Cascades, pour tout ce qui est relatif à la présentation, comme la typographie, les marges, les couleurs...). En résumé, quand quelqu'un annonce que sa page est "conforme aux standards", ce qu'il veut très certainement dire c'est qu'elle est construite avec du XHTML et des CSS, et qu'elle ne contient pas de langages (ou d'extensions) propriétaires.

C'est tout ? Mais on le fait déjà...

Oui. Un grand nombre de pages qu'on trouve sur le web, y compris un certain nombre faites par Iconologic, sont déjà conformes aux standards définis ci-dessus. Cependant, créer un site conforme aux standards demande une démarche plus conceptuelle que le simple respect d'une syntaxe. Les langages dont je parle plus haut ont été conçus avec des objectifs précis, pour faire des choses spécifiques, et pour travailler ensemble. Quand vous codez selon les standards, vous utilisez les langages en fonction de ce pour quoi ils ont été pensés, en évitant les contournements qui leur font faire ce pour quoi ils n'étaient pas prévus.

C'est là où la grande majorité du web part en vrille. Pendant des années, nous autres web designers n'avons eu d'autre moyen pour contrôler la présentation de nos pages que de détourner un des éléments de base du HTML et de profiter des extensions introduites par les navigateurs. L'élément table par exemple, devait à l'origine contenir des données tabulaires, comme un tableau de facturation, ou un comparatif du PNB des pays de l'Union sur les quinze dernières années. Mais, depuis 1995 au moins, on l'a perverti pour en faire un système délirant de mise en page, où le produit fini du designer est découpé en une hiérarchie invisible d'éléments table, la plupart pouvant contenir des éléments aussi insignifiants qu'une image transparente d'un pixel.

CSS1 a été finalisée en 1996. Dès 1998, toute cette folie aurait dû être dépassée. Malheureusement, les fabricants de navigateurs ont pris plus de temps que prévu et nous n'avons pas eu de bon navigateur qui supporte les CSS1 jusqu'à... Hé bien, jusqu'à ces six derniers mois.

Du web design conceptuel ?

Oui, bon...

HTML (dont la plus récente version est appelée "XHTML"), ne concerne que la structure et n'a rien à voir avec le design. Par exemple, la structure de ce texte est relativement simple, elle est définie par quelques éléments seulement : des titres, des paragraphes, des listes. Le XHTML définit un certain nombre d'autres éléments structurels parmi lesquels on trouve les divisions, les blocs de citation, les images et les films insérés dans la page. Mais le point le plus important à noter, c'est qu'aucun de ces éléments ne définit de polices, de couleurs, de marges ou de gouttières. Tous ces aspects sont relégués dans un autre langage parce qu'ils concernent la présentation. Ils n'ont rien à voir avec la structure du document.

La tâche du développeur web moderne est donc de trouver la structure inhérente à un design, et de la définir en XHTML. Voici un exemple tiré de mon site personnel - youngpup.net - dont le but est de permettre à un utilisateur de télécharger quelques fichiers, et de l'informer de mon absence totale de responsabilité si son ordinateur explose. Comme vous pouvez le voir, j'ai fait de mon mieux pour construire un design propre et clair, en m'appuyant sur la typographie, les couleurs et les bordures. Mais si un graphiste me proposait ce type de présentation, je devrais avant tout la décomposer en composantes structurelles, puis leur attribuer des styles en conséquence.

Les designers habitués à la mise en page traditionnelle sont plus accoutumés à cet exercice, et si vous leur demandiez comment cette page est structurée, ils vous diraient que c'est un titre suivi par un certain nombre de paragraphes - ce qui serait somme toute assez proche de la vérité. Posez la même question à des développeurs web et ils vous répondront que c'est un ensemble de tables agrémentées de bordures en pixels, d'images invisibles destinées à gérer les espaces, et de balises font. Malheureusement ils se trompent complètement, puisque la véritable structure ne se résume en fait qu'à un élément anchor et à son texte, à une image, ainsi qu'à quelques paragraphes. Tous les autres éléments du design sont simplement définis par les feuilles de styles codées dans un fichier séparé.

Les feuilles de styles ? Ça me dit quelque chose...

Ça devrait en tout cas, si vous avez déjà utilisé un programme de PAO comme Adobe PageMaker ou Quark X-Press, voire un simple traitement de texte comme Microsoft Word. Les feuilles de styles vous permettent de généraliser l'apparence de vos documents sur la base de leur structure. Par exemple, PageMaker vous permet de définir les titres de niveau 1 comme étant du "Garamond 16pt gras, bleu foncé, resserré et souligné" pour vous épargner de devoir reformater manuellement chaque titre que vous taperez. Les CSS remplissent exactement le même rôle. Vous définissez, dans un fichier séparé, l'apparence des éléments structurels en XHTML, de sorte que chaque fois que ces éléments se présentent dans votre document source, le style que vous avez défini leur est automatiquement appliqué.

Les CSS contrôlent beaucoup plus que la seule typographie. Outre la taille, la police, l'espacement et la hauteur des lignes, les CSS nous permettent d'appliquer des marges, du remplissage, des gouttières, des ombrages (pas fabuleux), et toutes sortes d'éléments graphiques relatifs au texte. De même, elles vous permettent de contrôler des aspects plus globaux de la mise en page, comme le positionnement des blocs de navigation et le sens de lecture.

Quel intêret ?

Des pages conformes aux standards ne servent pas qu'à faire gagner du temps aux programmeurs fainéants. Généraliser l'usage des CSS pour la mise en page réduit radicalement la bande passante utilisée, puisque toute l'information relative à la présentation a disparu du balisage HTML. La plupart des pages maigrissent de plus de 50%, et pour certaines on monte jusqu'à 80%, de sorte que plus la mise en page est complexe, plus elle gagnera à être "CSSisée".

De plus, des pages basées sur une combinaison XHTML+CSS sont flexibles. Comme le document est défini par sa structure, plutôt que par sa mise en page, il est bien plus facile de changer le style du site si nécessaire. Le client n'aime pas le Garamond ? Qu'à cela ne tienne, on le remplace par du Times dans la feuille de styles. Une seule modification se propage immédiatement à l'ensemble du site. Vous voulez rhabiller le site pour les fêtes de Noël ? Génial - nous n'aurons qu'à créer une nouvelle feuille de styles qui abusera du rouge et du vert, et que l'on pourra jeter au feu le 26 décembre.

Encore un point presque sans importance : les sites web conformes aux standards sont compatibles avec tous les outils de navigation possibles. Enfin, presque. Leur structure reposant sur des normes définies pour l'essentiel depuis HTML 2.0, tous les navigateurs du monde peuvent donc les lire. Y compris les Palm Pilots, les téléphones WAP, et les navigateurs 100% texte comme LYNX. Si le navigateur ne comprend pas les CSS, ou certaines parties des CSS, il les ignore. Le visiteur peut encore lire le texte (ce qui est après tout le plus important), mais il ne verra pas les attributs CSS que son navigateur ne peut interpréter.

Enfin, les pages conformes aux standards sont notre futur. La plupart des développeurs le savent déjà. Jeffrey Zeldman, un des plus importants et influents membres de la communauté du web design, le clame depuis déjà un an. Tous les principaux navigateurs du marché sont compatibles avec les standards. L'ère du design à base de table et de font est (heureusement) dépassée, et il n'est plus aujourd'hui question que de la rapidité des architectes du web à adopter ces nouveaux outils. De nombreux sites sont déjà bâtis en XHTML/CSS, séparant ainsi la présentation et le contenu.

Cependant, il n'y a pas de vrai leader en ce qui concerne le pur design visuel. La plupart des personnes familiarisées à ces techniques sont des développeurs, et c'est dommage parce que ces concepts sont à la base pensés pour les designers. Voilà où Iconologic peut montrer la voie. Nous avons déjà des designers expérimentés. Nous avons des développeurs enthousiastes (au moins un !) à l'idée de manipuler ces nouveaux outils. Il nous suffit simplement de les réunir. Je n'insisterai jamais assez sur le fait que la communauté web cherche des leaders préoccupés par le design de pages conformes aux standards, et qu'il n'y a aucune raison qu'Iconologic ne soit pas un de ces leaders.

Oui, mais la compatibilité dans tout ça ?

Malheureusement, la compatibilité pose problème. Je l'ai déjà dit, nous n'avions pas de navigateur CSS satisfaisant il y a encore six mois, et même aujourd'hui tout n'est pas rose. Mais comme cela a toujours été le cas, il incombe au développeur web de trouver quelle technologie est assez répandue pour décider ou non de la mettre en place sur un projet donné. A mon avis, une partie au moins des CSS et du XHTML est comprise par un si grand nombre de navigateurs grand public que nous devrions les utiliser dans tous les projets d'Iconologic. Le reste devra être utilisé avec parcimonie jusqu'à ce que l'adoption de navigateurs conformes ne se généralise.

Ci-dessous j'ai segmenté le design conforme aux standards par groupe de techniques, et j'ai décrit dans quel type de projet les utiliser, avec ce que cela implique pour tel ou tel navigateur. Gardez malgré tout à l'esprit que je n'ai listé ici qu'un petit échantillon des outils web disponibles aujourd'hui. La caractéristique la plus importante du design conforme aux standards est qu'il fonctionne par défaut dans n'importe quel outil de visualisation web.

Fin - autres ressources

Eh bien çà y est, nous y voilà, c'est la fin... J'espère que cet article vous a ouvert les yeux sur les possibilités et la nécessité d'un monde du web conforme aux standards, ainsi que sur la place qu'Iconologic pourra y occuper. Je sais qu'après un tel discours vous voudrez sans doute voir des exemples de designs conformes aux standards, j'ai donc listé quelques-uns de mes favoris ci-dessous. Comme je l'ai déjà dit, ils sont principalement l'oeuvre de développeurs, ne vous attendez donc pas à des designs de folie. J'espère surtout que vous en verrez le potentiel. Redimensionnez votre navigateur. Voyez comme le design est fluide et s'harmonise à l'écran, grand ou petit. Essayez plusieurs navigateurs. Vous n'aurez jamais un message d'erreur du genre "Désolé mais ma page ne fonctionne pas dans votre navigateur". C'est ça, le futur, et il se réalisera, qu'Iconologic en soit un des pionnier, que nous le suivions à distance ou que nous l'ignorions complètement. Personnellement, j'espère qu'Iconologic choisira de devenir un des leaders de ce domaine, comme il l'a fait dans le monde du design.

Mes ressources favorites pour un design conforme aux standards... Un point de départ :

Fiche technique

À propos de l'auteur

Aaron Boodman est un programmeur qui a beaucoup sévi le pseudonyme de youngpup.

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Tous niveaux

Web design

© 2001-2024 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site