Le tao du design Web
Par John Allsopp
Introduction
Le Tao Te Ching fut aux années 1990 ce que fut le zen aux années 1970 (célèbre surtout en matière d'entretien des motos). Du monde de Porcinet et Winnie l'ourson à celui de la physique et vice-versa, nombreux sont ceux qui se sont mis en quête de sens en appliquant le tao à quelque chose (le tao de la physique), ou quelque chose au Tao Te Ching (le tao de Winnie l'ourson). La démarche est peut-être un peu facile, mais récemment il m'est apparu que la compréhension du design Web pouvait être beaucoup plus vaste qu'il n'y paraît, lorsqu'on l'observe à la lueur du Tao.
Le taoïsme est une philosophie. À l'instar du bouddhisme, c'est un art de vivre, une façon d'être partie intégrante du monde. Issu d'un texte de l'antiquité, le Tao Te Ching, dont les 81 versets sillonnent énigmatiquement les océans de l'expérience humaine, mais portés par un vaisseau-thème universel et fort, celui de l'harmonie.
Au cours des quelques dernières années, pour le meilleur et pour le pire, ma vie a plus qu'un peu tourné autour des feuilles de style. J'ai écrit des logiciels, des didacticiels, et des guides sur elles; j'ai répondu à d'innombrables questions par e-mail et dans des newsgroups; je me suis battu pour leur adoption, via le Web Standards Project. Et puis, doucement, j'ai commencé à comprendre le design Web de façon tout à fait différente grâce à ces feuilles de style, et à entrevoir une forte association entre le design et le tao.
Ce que je ressens, c'est une réelle tension entre le Web tel que nous le connaissons, et le Web tel qu'il devrait être. Il s'agit de la tension entre un média déjà en place, l'imprimé, et son rejeton, le Web. Il est temps de vraiment comprendre la relation entre le parent et sa progéniture, et de laisser cette dernière voler de ses propres ailes.
Le même bon vieux média ?
Les hiérarchies bien implantées ne se déracinent pas facilement.
Les croyances bien ancrées ne sont pas aisément lâchées.
Le rituel asservit ainsi génération après génération.
Tao Te Ching; 38 Rituel
Si vous n'avez jamais visionné les toutes premières émissions de télévision, sachez qu'il s'agit là d'une activité fort enrichissante. À ses débuts, on voyait souvent la télévision comme « une radio avec des images », ce qui est une description assez exacte. À cette époque, la plupart des émissions télévisées adoptaient le format de la radio populaire. À vrai dire, des émissions comme le Tonight Show et ses multiples variantes, que l'on retrouve sur la plupart des chaînes du monde (incluant au programme un orchestre, des causeries avec l'animateur et un public en studio), ou encore les actualités, avec leurs présentateurs aux complets sobres, sont des vestiges de la préhistoire télévisuelle. Un palimpseste du passé médiatique.
Songez aussi aux premiers vidéoclips (quelques-uns d'entre nous doivent être assez âgés pour cela). Le groupe musical ne se contentait essentiellement que de se mimer lui-même, interprétant une chanson. Sidérant.
Lorsqu'un nouveau média emprunte à un média préexistant, une partie de cet emprunt est sensée, mais le reste n'est pas réfléchi, il est « rituel », et limite souvent le nouveau support. Avec le temps, le dernier-né développe ses propres conventions, rejetant celles qui ne veulent plus rien dire.
Si vous avez un jour la chance de visionner une des premières dramatiques télé, vous constaterez qu'elles en sont un exemple frappant. Parce que la radio rendait nécessaire l'emploi d'une narration pour décrire ce que les auditeurs ne voyaient pas, les premières dramatiques télé avaient souvent recours à une voix hors champ, qui décrivait ce que les téléspectateurs, eux, voyaient. Il s'agit là d'un exemple simple mais flagrant de ce qui se passe lorsqu'un nouveau média se développe sur les bases d'un de ses prédécesseurs.
Le Web est un nouveau média, bien qu'il soit né du média imprimé et qu'il soit fortement influencé par les vertus, la sémantique linguistique et les conventions de celui-ci. Aussi est-il souvent trop modelé sur la source qui l'a inspirée. « Les sites Web vedettes » sont souvent ceux qui domptent l'aspect sauvage du Web en restreignant les frontières des pages comme si elles étaient de papier - la PAO du Web. Ce comportement conservateur est naturel, les croyances bien ancrées ne sont pas aisément lâchées
, mais il est temps d'aller de l'avant et de reconnaître le statut propre du Web en tant que média. Il est temps de reléguer aux oubliettes les rites de l'imprimé, et de s'engager à fond dans le média virtuel et sa nature propre.
Il n'est pas ici question de prôner le reniement de centaines d'années d'érudition en matière d'imprimerie. Mais nous devons comprendre quels sont les apprentissages qui serviront le Web, et quels sont ceux qui seront relégués au rang de rites désuets.
Contrôler la page Web
Le Sage
... accepte le flot et le cours des choses,
les entoure, mais ne les possède pas,
Tao Te Ching; 2 Humilité
Consacrez un peu de temps aux listes de diffusions et forums voués au design Web, et vous y trouverez quelques mots et idées communes répétés incessamment. Question après question, bien sûr, vous retrouverez le « comment puis-je faire ? ». Mais les questions du type « comment puis-je faire en sorte que mes pages conservent la même apparence d'une plateforme à l'autre ? » et « comment puis-je rendre la même police de caractère sur Macintosh et sur Windows ? » en dissimulent une autre-« comment puis-je contrôler le navigateur de l'utilisateur ? ». Le mot contrôler surgit à une fréquence surprenante, c'est indéniable.
Pour soutenir tout cela, existe la croyance que les designers sont des contrôleurs (pensez aux implications de l'expression « mécanicien des pixels »). Les designers veulent passer outre les souhaits des utilisateurs, et les choix qu'ils ont effectué pour leur expérience visuelle (en « fixant » la grandeur de police, par exemple). Les designers veulent anticiper les différences entre plateformes, causées par les différentes résolutions logiques (par exemple, les 72 ppp de Macintosh contre les 96 ppp de Windows). Les designers se pensent omniscients, et ne tolérent rien de moins qu'une similitude au pixel près entre le rendu sur leur écran et celui sur ceux des autres utilisateurs.
Bien sûr, il y a de l'exagération dans tout cela, mais pas tant qu'il n'y paraît. Un des exemples les plus marquant en la matière est le désappointement maintes fois manifesté par les développeurs lorsqu'ils apprennent que les feuilles de style ne sont pas « de la PAO pour le web ». D'ailleurs, si vous êtes un utilisateur Mac, vous êtes particulièrement au courant de l'abus commis par les plus grands sites dans l'utilisation des feuilles de style, rendant leurs pages illisibles. Il y a fort à parier qu'ils utilisent le pixel ou le point comme unité de mesure de la police de caractères. La philosophie du « designer-contrôleur » est sous-jacente à ce choix.
D'où vient cette idée ? Je crois qu'elle provient du média imprimé. Dans l'univers de l'imprimé, le designer est Dieu. Les éditeurs WYSIWYG ont donné naissance à une immense industrie, et nombre de designers du Web se fondent toujours sur les croyances, les pratiques, et les rituels de l'imprimé. En tant que designers, nous devons repenser ce rôle déifié, abandonner l'idée du contrôle, et explorer un nouveau mode relationnel avec la page.
Pourquoi est-ce important ?
Le nouveau-né est fragile et souple.
Un cadavre, dur et raide.
Les arbres et les animaux vivants sont tendres et flexibles.
Morts, ils deviennent secs et rigides.
Souplesse et fragilité sont donc le propre de la vie.
Rigidité et dureté, celui de la mort.
Tao Te Ching; 76 Souplesse
Il est possible que l'incapacité de « contrôler » une page soit contraignante; un bug du Web. Sortis tout droit du monde du WYSIWYG, nos premiers instincts nous portent du moins à le penser. Je suis forcé d'admettre que ce fut ma première réaction, et que je me suis longtemps raccroché à cette croyance. Mais je ne pense plus que cela soit une limitation, j'y vois plutôt la force d'un nouveau média.
Regardons maintenant tout ça par l'autre bout de la lorgnette. Le fait de pouvoir contrôler une page imprimée est en réalité un confinement du média. Vous pouvez penser - je peux fixer la taille du texte - ou vous pouvez penser - la taille du texte est inaltérable. Vous pouvez penser - les dimensions d'une page peuvent être contrôlées - ou - les dimensions d'une page ne peuvent être modifiées. Ce sont là de simples caractéristiques du médium.
Et elles ne sont pas nécessairement des caractéristiques positives, particulièrement pour le lecteur. Si l'acuité visuelle du lecteur n'est pas suffisante, le risque est grand que le choix du designer rende le texte trop petit pour qu'il soit lu aisément sans l'aide d'un quelconque outil de grossissement. Si le lecteur se trouve dans un espace réduit, un train en direction de son travail, ou un avion, le journal grand format exige trop d'espace. Et il n'y a pas grand chose que le lecteur puisse y faire.
Le contrôle que connaissent les designers au sein du média imprimé et qu'ils désirent souvent retrouver au sein du virtuel est simplement le produit d'une limitation de la page imprimée. Nous devrions accepter le fait que le Web n'a pas les mêmes contraintes, et créer en fonction de cette flexibilité. Mais tout d'abord, nous devons « accepter le flot et le cours des choses ».
Adaptabilité et accessibilité
L'homme parfait est à l'image de l'eau,
Apportant ses bienfaits à toutes choses, et n'entrant pas en conflit avec elles,
S'insinuant en des lieux que d'autres dédaignent,
Où elle est en harmonie avec la Voie
Tao Te Ching; 8 L'eau
Certains trouveront que le tao est fataliste. Une lecture simpliste laisse à penser que l'on doit errer, sans méthode, permettant aux choses d'arriver pour y réagir ensuite. Je l'interprète plutôt comme une invitation à se libérer d'une perspective rigide, avec des objectifs lointains. Nous devons faire montre de capacités d'adaptation, en évitant d'être prisonniers de nos opinions et de nos visées.
Comme observer le detail est clarté,
Alors maintenir la flexibilité est force;
Utilise la lumière, mais n'éclaire pas,
Ainsi tu ne te causes pas de tort,
Mais embrasses la clarté.
Tao Te Ching; 52 Clarté
La notion de flexibilité dont j'ai parlé jusqu'ici fait référence à « l'adaptabilité ». Tout ce que j'ai dit jusqu'à présent pourrait se résumer à ceci : construisez des pages que l'on peut adapter. Construisez des pages qui sont accessibles, indifféremment de la plateforme ou de l'écran que votre lecteur a choisi ou qu'il doit utiliser pour parvenir jusqu'à vos pages. Cela signifie faire des pages qui sont lisibles indépendamment de la résolution ou de la taille de l'écran, du nombre de couleurs (et rappelez-vous aussi que certaines pages doivent être imprimées ou lues par des logiciels de synthèse vocale, ou encore lues via des navigateurs braille). Cela signifie des pages qui s'adaptent aux besoins d'un lecteur dont la vue est tout sauf parfaite et qui désire lire des pages avec des polices de caractères de très grande taille.
Concevoir des pages que l'on peut adapter, c'est concevoir des pages accessibles. La terre promise du Web, dont nous sommes bien loin, est sans doute l'accessibilité de l'information, en dépit des difficultés. Il s'agit là d'une importante conviction du World Wide Web Consortium, et elle est en train de devenir un impératif du design Web, puisque l'accès universel aux pages Web sera prescrit par la loi, tout comme les codes du bâtiment de par le monde exigent des immeubles accessibles.
Le design d'une page Web universelle semble tenir de l'utopie. Peut-être n'est-ce encore qu'une aspiration, à cause de ces navigateurs si mal conçus et de tout ces appareils grâce auxquels nous accéderons au web qui n'en sont qu'à leurs premiers balbutiements ou même, pas encore nés. Mais nous pouvons déjà faire beaucoup afin de jeter les premières fondations de pages qui s'adapteront aux désirs et aux besoins des utilisateurs, et seront ainsi accessibles.
La Voie
L'usage forme la Voie,
Mais alors, la forme est perdue.
Ne t'accroche pas aux formes
Mais laisse les impressions s'insinuer dans le monde
Comme la rivière s'insinue vers la mer.
Tao Te Ching; 32 Formes
Comment pourrait-on donc agir sur le design pour le rendre adaptable, et donc accessible ? Il y a tout d'abord quelques façons de penser qui peuvent s'avérer fort utiles. Ensuite, j'ai quelques suggestions pratiques à propos des étapes à franchir afin d'éviter de rendre vos pages inaccessibles.
Premièrement, concentrez-vous sur le rôle de vos pages et non sur leur apparence. Laissez votre design émerger des services qu'elles offriront à vos utilisateurs, plutôt que d'une quelconque idée dominatrice régissant l'aspect que vous désirez leur donner. Laissez la forme emboîter le pas à la fonction, plutôt que de tenter de prendre un design spécifique et de le faire "fonctionner".
La distinction entre le contenu et son apparence est une des pierres angulaires de cette approche. Vous avez probablement entendu cette phrase une bonne centaine de fois, mais c'est probablement l'étape la plus importante que vous aurez à franchir. Examinons un exemple simple. Sur une page, du texte doit être mis en italiques. Pourquoi est-il mis en italiques ? C'est peut-être pour le mettre en évidence. Il s'agit peut-être d'une citation. Il s'agit peut-être d'un mot étranger utilisé dans le corps d'un texte rédigé en français. Dans le contexte de l'édition traditionnelle, la forme découle du rôle. L'avantage de l'édition Web est qu'elle peut rendre explicite ce qui n'est qu'implicite sur papier. Si la raison d'être de l'italique est l'emphase, pourquoi marquer votre page avec la balise <i>
? Utilisez plutôt la balise <em>
et ainsi, les navigateurs autres que ceux disponibles sur les PC pourront la traiter de façon appropriée.
Sur une plus grande échelle, n'utilisez pas le HTML pour la présentation. Pas de <font>
ou de <b>
, de <i>
ou toute autre balise de présentation. Là où le HTML offre une balise appropriée, utilisez-la. Là où il ne le fait pas, utilisez les classes. Et bien sûr, ayez recours aux feuilles de style pour vos données de présentation. Le temps est venu de regarder vers l'avenir, et non de se cramponner au passé.
Si vous utilisez correctement les feuilles de style, pour suggérer l'apparence d'une page et non pour la contrôler, et que vous ne dépendez pas de la feuille de style pour acheminer l'information, alors vos pages « marcheront » bien dans tous les navigateurs, existants ou à venir. Les navigateurs qui n'acceptent pas les feuilles de style ne feront que simplifier un tant soit peu son apparence. La plus grosse inquiètude vient des navigateurs qui ont un support erroné des feuilles styles. Ils représentent actuellement un réel problème. Mais dans peu de temps cette difficulté s'estompera. Pour le moment, vous pouvez vous limiter à un sous-ensemble des CSS qui est plutôt bien traité, et qui permet quand même plus de possibilités de présentation que le HTML. J'en ai écrit pas mal sur le sujet ailleurs, j'éviterai donc de me répéter ici.
D'un point de vue pratique, il y a des choses que vous devriez faire et d'autres que vous devriez éviter lorsque vous concevez des feuilles de style qui auront un impact sur l'adaptabilité de vos pages. Mais par-dessus tout, ne dépendez jamais de quelque portion de la feuille de style que ce soit pour rendre votre page accessible. Les unités absolues, parmi lesquelles figurent les pixels et les points, sont à éviter (si cela vous surprend, continuez votre lecture). Les couleurs doivent être utilisées avec circonspection, et vous ne devez jamais dépendre d'elles.
Polices de caractère
Généralement, Windows, Macintosh, ou tout autre système d'exploitation, n'ont qu'une poignée de polices de caractère installées. Il y a très peu de similitude entre les polices de caractères installées par défaut sur ces différents systèmes. Certains navigateurs (et d'autres bientôt) permettent déjà au lecteur de choisir la police d'affichage des pages Web visitées. Avec les feuilles de style en cascade, vous pouvez suggérer un certain nombre de polices, et couvrir ainsi le plus de supports possible. Mais ne vous reposez pas sur la disponibilité d'une seule police, aussi commune soit-elle.
La taille de police est plus importante encore. Vous savez sans doute déjà que la même police, au même nombre de points, « paraîtra plus petite » sur un Macintosh que sur la plupart des machines Windows. En gros, ce phénomène dépend du fait que la « résolution logique » d'un Macintosh est de 72ppp, alors que la valeur par défaut de Windows est de 96ppp. La portée de ces particularités est significative. De toute évidence, elles garantissent qu'il est pratiquement impossible de rendre un texte de la même façon sur l'écran d'un Macintosh que sur celui d'un Windows. Mais si vous adhérez à la philosophie de l'adaptabilité, ça n'a aucune importance.
Pardon ? Si vous êtes toujours préoccupé par l'apparence exacte de la page Web, cela signifie que vous ne pensez toujours pas en fonction de l'adaptabilité de votre page. L'un des obstacles majeurs que rencontre l'accessibilité est la taille des polices. Les polices de taille réduite sont plus difficiles à lire. Ceux d'entre nous qui jouissent d'une bonne vue seront peut-être stupéfaits d'apprendre qu'un pourcentage significatif de la population éprouve des difficultés à lire une police inférieure au Times 14 points sur papier. Les écrans sont moins lisibles que l'imprimé, à cause de leur plus faible résolution.
Cela revient-il à dire que nous devrions toujours choisir une taille de police minimale de 14 pts ? Cela n'aidera en rien ceux qui sont affectés d'une déficience visuelle plus marquée. Alors quelle est la taille minimale de police que nous devrions choisir ? Aucune. N'utilisez pas les points. Cela permettra au lecteur de choisir la taille de police qui lui sied le mieux. Le même raisonnement vaut pour les pixels. À cause de la différence de résolution logique, un pixel sera différent d'une plateforme à l'autre.
Vous pouvez toujours suggérer des tailles de polices plus imposantes pour les titres et autres éléments. Les feuilles de style offrent différentes manières de suggérer la taille du texte, de façon à contribuer à son adaptabilité. Nous en survolerons une, afin de mieux comprendre.
Les feuilles de style en cascade vous permettent de specifier une taille de police comme étant un pourcentage de la taille de police d'un élément parent. Par exemple, les entêtes sont à l'intérieur de l'élément body
de la page. Si vous ne déterminez pas de tailles pour le texte à l'intérieur du body
, ce dernier adoptera donc la taille par défaut choisie par le lecteur. Déjà, tout simplement en ne faisant rien, nous avons favorisé l'adaptabilité !
Vous pourriez rétorquer mais le texte paraît beaucoup trop gros
si je le laisse ainsi. Rapetissez-le, alors. Mais dans votre navigateur. Et vos lecteurs auront ainsi la possibilité de le rendre plus petit ou plus grand dans leurs propres navigateurs, le tout selon leurs goûts et leurs besoins.
On peut réussir à mettre en évidence les en-têtes et autres éléments en spécifiant que la taille de police des titres de niveau 1 doit être, disons, 30% plus grande que le corps du texte, 25% plus grande pour le niveau 2, et ainsi de suite. Ainsi, indépendamment de la taille de texte choisie par l'utilisateur pour le texte principal, l'échelle des en-têtes sera dimensionnée proportionnellement au texte principal. De la même manière, l'échelle de certaines portions de texte peut être réduite par rapport au texte principal. Cependant cela peut mener à des situations où le texte sera si petit qu'il en deviendra illisible. Usez donc de la manoeuvre avec prudence.
Nous n'avons vraiment pas fait grand chose, sinon éviter d'utiliser des tailles de police absolues, et mis en pratique l'application de tailles proportionnelles pour les en-têtes. Mais déjà nos pages sont beaucoup plus adaptables et accessibles.
Mise en page
Les marges, les largeurs et hauteurs de page et l'indentation sont toutes des aspects du design qui peuvent favoriser la lisibilité. Le web présente pour chacun d'entre eux des difficultés au designer. Les fenêtres des navigateurs peuvent être redimensionnées, modifiant ainsi la grandeur de la page. Divers périphériques (webtélé, moniteurs à haute résolution, assistants numériques personnels) ont des tailles de fenêtre minimales et maximales fort différentes. À l'image des tailles de polices, les mises en page fixes peuvent générer des problèmes d'accessibilité sur le Web.
Tout comme pour les polices de caractères, certains aspects de la mise en page peuvent être spécifiés en pourcentages, pour créer des pages adaptables. Il est possible de définir les marges en pourcentage de la grandeur de l'élément parent.
L'utilisation de pourcentages (ou d'autres valeurs relatives) afin de définir la mise en page dans les feuilles de style génère automatiquement des pages adaptatives. À mesure que les fenêtres de navigateur s'élargissent et rapetissent, la mise en page d'un élément s'adaptera afin d'en respecter les proportions, et la disposition de la page entière réagira de même. Les lecteurs pourront ainsi choisir la taille de fenêtre qui leur convient le mieux.
Les marges, les retraits de ligne, et les autres aspects de la mise en page peuvent également être déterminés en relation avec la taille du texte qu'ils contiennent, en utilisant l'élément em
pour les définir. Si vous spécifiez
P {margin-left: 1.5em}
cela signifie que la marge de droite du paragraphe doit être 1,5 fois plus grande que la police de caractère de ce même paragraphe. Conséquemment, lorsqu'un utilisateur ajuste la taille de police afin d'améliorer sa lisibilité, les marges croissent en proportion; si le lecteur diminue la taille de police, les marges décroissent.
Couleurs
Le Web est de loin un média beaucoup plus coloré que l'imprimé. La couleur est beaucoup moins chère sur le Web. Elle peut être décorative, contribuer à l'établissement d'une identité visuelle, ou avoir une valeur pratique (le rouge peut attirer l'attention sur une information importante). Mais les couleurs, elles aussi, apportent un lot d'embûches à l'accessibilité.
Saviez-vous que dans plusieurs pays (sinon tous), il est impossible aux daltoniens d'obtenir un permis de pilote d'avion ? Cela est uniquement dû au fait que, en dépit de toutes les autres possibilités, les principaux indicateurs de danger et de sécurité reposent quasi immanquablement sur le rouge et le vert. Quel dommage que les voyants lumineux ne soient pas tout simplement adaptables.
Vos pages Web sont elles aussi discriminatoires envers certains groupes de personnes ? Cela serait dommage, d'autant plus que dans un futur proche la majorité des navigateurs offriront aux lecteurs des moyens faciles d'ajuster la couleur des éléments d'une page Web, par le biais des feuilles de style utilisateur qui pourront prévaloir sur les vôtres. (On peut déjà le faire avec l'édition Macintosh d'IE5.)
Comment éviter ce genre de contrariété ? Préférez l'utilisation des feuilles de style à celle de l'élément HTML <font>
. Vous éviterez ainsi d'avoir à vous reposer sur les combinaisons de couleurs pour véhiculer le sens du texte.
Le périple
Un arbre trop gros pour être étreint par un homme est né d'une minuscule pousse;
Un barrage dont la force excède celle du débordement de la rivière est né d'une poignée de terre;
Un périple de cent milles est né de l'empreinte d'un simple pas.
Tao Te Ching; 64a La diligence initiale
Modifier nos manières de penser et d'agir n'est pas chose facile. Les croyances bien ancrées ne sont pas aisément lâchées.
Mais j'ai doucement pris conscience que la quasi-totalité de ce que je tenais pour acquis devait être remis en question. À la lumière de ce que j'ai vu, ce que j'ai lu, des conversations que j'ai eues, des emails que j'ai reçus ces dernières années, j'ai pu constater que beaucoup se raccrochent à leurs croyances et auraient aussi besoin de les repenser.
Le temps est venu pour le média Web de se redéfinir au-delà de ses origines, au-delà de l'imprimé. Non pour le simple plaisir d'abandonner autant d'érudition et d'expérience, mais pour tracer, lui aussi, sa propre voie, lorsque cela est indiqué.
Je crois que la plus grande force du Web est souvent perçue comme une limite, comme un défaut. La flexibilité fait partie intégrante de la nature du Web et c'est notre rôle à nous, concepteurs et développeurs, d'épouser cette souplesse, et de créer des pages qui, fortes de cette adaptabilité, deviendront accessibles à tous.
Le périple commence par l'abandon du contrôle et l'adoption de la flexibilité.
Les citations (en anglais) sont issues du Tao Te Ching GNL's not Lao, (C) 1992, 1993, 1994, 1995 Peter A. Merel.
NdT: Dans un souci "d'adaptabilité et d'accessibilité" en contexte de compréhension du texte, et pour favoriser la corrélation des passages du Tao Te Ching avec l'interprétation qu'en fait l'auteur, les versets ont été exceptionnellement, et en dépit de l'éthique, traduits de l'anglais au français.
http://alistapart.com/articles/dao/