Technologies web : approches théoriques
Graphic World
27 mars 2008
Une mise en forme comme mise en sens : la "Galaxie Gutenberg"
Note : ce texte fait suite à "Contenus uniques - utilisateurs multiples"
Jusque dans les années 1990 le travail de graphiste consistait à partir d'un contenu donné (par exemple un texte au kilomètre) et d'en faire (toujours par exemple) un article de presse compréhensible par le lecteur final. Pour cela il disposait d'outils, manuels d'abord puis numériques (PAO) ensuite, grâce auxquels il parvenait, partant de ce texte brut, à organiser un sens sans lequel l'acte de lire serait éprouvant. Quiconque a déjà eu à lire un court texte sans titrage ni retours à la ligne ni enrichissements graphiques sait de quoi il retourne.
Ce texte brut, une fois découpé en objets distincts (titres, sous-titres, intertitres, paragraphes, encadrés, etc...), enrichi convenablement (différentes typos de tailles, couleurs et styles différents) et mis en page de façon ad hoc (gestion des gris optiques, des marges blanches, rapports images-textes, mise en place de filets et de cadres, etc.) donnait au final un document utilisable, pratique et agréable. En un mot, fonctionnel.
Des moines copistes du XIIème siècle aux graphistes d'aujourd'hui, c'est donc toute une tradition de savoirs-faire éprouvés, formant une authentique culture, avec ses règles, ses codes, ses héros anonymes ou pas, qui s'exprime à travers une vaste production de documents : livres, journaux, affiches, publicité, design objets, etc.
Si vous avez du mal à comprendre ce qu'est la fonction du graphisme, imaginez une suite de mots émaillée de chiffres selon une distribution apparemment arbitraire... selon que cette suite sera présentée linéairement ou en tableau, son sens apparaitra ou pas. Présentée en tableau on comprendra qu'à chaque mot correspond des valeurs précises :
| Qui | Chiens | Chats | Poissons | Oiseaux | Autres | |
|---|---|---|---|---|---|---|
| Animaux | Pierrot | 23 | Aucun | 4 | 21 | 60 |
| Jeannot | 12 | 22 | 5 | Aucun | 14 | |
| Julot | 30 | 2 | 12 | 1 | 32 |
...alors qu'en séquence linéarisée sans enrichissement graphique, la compréhension du sens devient pratiquement impossible :
QuiChiensChatsPoissonsOiseauxAutresAnimauxPierrot23Aucun42160Jeannot12225Aucun14Julot30212132
Rappelez-vous que l'époque romaine au haut Moyen-âge c'est ainsi qu'on présentait les écrits, sans espaces ni enrichissements. Il y a donc, historiquement parlant, une interpénétration et une interdépendance étroite entre forme et sens, l'une venant apporter l'autre. Sans mise en forme, pas de sens possible. Née vers le milieu du Moyen-âge, c'est cette longue interpénétration qui, culminant avec l'invention de l'imprimerie, a formé ce qu'on a appelé la "Galaxie Gutenberg".
Une mise en sens sans mise en forme : la "Galaxie Internet"
A la "Galaxie Gutenberg" succède la "Galaxie Internet". L'irruption du numérique a radicalement changé la façon d'envisager la relation entre la forme que prennent les choses et le sens qu'elles portent. Pourquoi ? Tout simplement parce que l'information numérique permet ce que ne permettait pas l'information "Gutenberg" : s'adapter aux besoins de chacun et être générée par les besoins de chacun. Concrètement, cela signifie que le sens des choses peut être détaché de leur forme et que cette dernière dépendra des besoins et envies de chacun.... c'est un peu comme si, au lieu d'imprimer le même journal à 200 000 exemplaires, on imprimait 200 000 journaux tous différents, l'un avec de plus gros textes, un autre sans photos, un autre encore avec seulement le résumé des principaux articles, un dernier enfin écrit dans une autre langue. Et il nous reste encore 199 995 autres options...
Alors quand vers 1993-95 les graphistes s'emparèrent du nouveau média Internet (je le sais, j'en étais...) ils y appliquèrent tout leur savoir-faire historique et réussirent à convaincre leurs clients que c'était là l'essence même du web : de belles pages bien mises en pages. Tant qu'ils ont été les seuls détenteurs des techniques de production de contenus ils ont pu contrôler au pixel près que l'image était alignée comme il le fallait, que le texte coulait là où on en avait besoin, et que les couleurs étaient bien conformes à la charte papier de leurs clients.
Sauf que...
Sauf que le monde avançait sans eux ! Avec la démocratisation de l'accès aux contenus du web s'est posée la question des personnes qui, par choix ou par contraintes, n'arrivaient pas à utiliser les contenus web de façon optimale. Apparurent alors sur le marché de nouveaux outils (lecteurs d'écran, tablettes, écrans énormes ou tout petits), de nouvelles fonctionnalités (agrandir les textes à volonté, changer ou supprimer les couleurs, zoomer des parties de pages), de nouvelles pratiques (mashup et échanges de contenus), etc.
Quid alors de la savante mise en page si élégamment élaborée ? Les graphistes décidèrent qu'on n'avait pas à remettre en question un savoir-faire pluri-séculaire et réussirent à convaincre leurs clients de le penser aussi (...d'ailleurs on les comprend les pauvres, ils ont mis près de 20 ans à acquérir des notions assez ardues telles que celles de lisibilité, de contrainte de mise en page, de cohérence d'image, d'utilité d'une charte graphique, d'identité visuelle, etc. et voilà qu'en quelques mois, zou, tout est balayé sans plus d'explications...)
Sauf qu'un document web n'est pas un document imprimé et que les limites technologiques posées par l'imprimerie n'y ont plus cours !
Un langage pour ça...
Imprimer un document papier de format donné n'est pas mettre en ligne sur écran (ou tout autre outil de restitution), et inversement. Le langage qui porte les informations web est "sémantiquement" faible mais il existe bel et bien : il dit ce qu'est un texte sous forme de paragraphe, ce qu'est une liste numérotée, ce qu'est un tableau contenant des données (comme celui ci-dessus), ce qu'est une image, etc. Mettre en sens c'est s'appuyer sur ce langage pour ordonner et structurer l'ensemble des éléments contenus dans la page. Inversement, mettre en forme c'est utiliser ce langage de façon inadéquate ou inadaptée. Par exemple, un tableau est sensé délivrer des informations structurées en colonnes et en lignes... si l'on décide de placer par exemple une colonne au dehors du tableau, celui-ci perdra aussitôt une grande partie de son sens. De même si on souhaite lister par exemple des modèles de produits dans une gamme, utiliser des paragraphes est moins pertinent qu'utiliser l'encodage qui décrit une liste.
L'utilisation structurelle et rationnelle du langage s'inscrit donc dans une démarche cohérente de relation entre l'outil et le contenu. A l'inverse, utiliser comme on le voit encore trop souvent (plus de 90% des sites ?) un tableau pour effectuer une mise en page est à proprement parler un "abus de langage". Qu'optiquement cela ne change rien à la présentation (mise en forme) ne signifie pas qu'il n'y ait pas de conséquences néfastes induites : autant en "papier" (là où la forme porte le sens) ça n'a aucune importance, autant en "information numérique" les effets induits peuvent être désastreux, jugez-en plutôt : certains modèles de mobiles, reconnaissant qu'il s'agit d'une table de données, afficheront les cellules de tableaux les unes au dessous des autres mais dans un ordre cohérent avec la structure de la table et donc votre précieux graphisme se présentera comme une suite de blocs séparés les uns des autres sans plus aucun sens ni forme. Idem pour certains lecteurs d'écran qui à chaque ligne répéteront l'intitulé des colonnes, croyant vous rendre service...
Même la question des titres est complexe à appréhender et à résoudre : le langage d'internet définit 6 niveaux de titres, allant du plus grand (h1 : h pour headers ) au plus petit (h6). Si pour des raisons de mise en page et d'esthétique on décide d'avoir des sous-titres plus forts que les titres (cette page en est un exemple : regardez tout en haut, "Technologies web : approches théoriques" est visuellement inférieur à "Graphic World" mais, sémantiquement parlant, "Technologies web : approches théoriques" est le contenant global qui contiendra "Graphic World" qui, pour le coup, n'est qu'une sorte de sous-boîte. "Graphic World" étant hiérarchiquement inférieur à "Technologies web : approches théoriques" (il en dépend et il en fait partie et non l'inverse), il devrait logiquement être plus petit... oui si l'on raisonne en terme de mise en forme ! Si l'on raisonne en terme de sens de ce qui est visible, ce qui importe n'est pas "Technologies web : approches théoriques" - qui devient ici un genre de surtitre - mais bien "Graphic World" qui explique de quoi cette page parlera.
Ainsi quelqu'un navigant sur cette page avec un outil permettant de passer de titres en titres de façon cohérente (fonctionnalité incluse dans Firefox par exemple) suivra bien le cheminement le plus logique et le plus cohérent pour arriver là où il veut aller. Inversement, doter "Graphic World" d'un niveau de titre hiérarchiquement supérieur (conformité "sens-forme") aurait renseigné "Technologies web : approches théoriques" de façon erronée et n'aurait pas permis la perception de la page en tant que structure d'informations. Un détail direz-vous ? Peut-être. Maintenant prenons l'oeil de Google, l'aveugle le plus célèbre du web... pour référencer et décrire correctement cette page, qu'est-il important qu'il décèle en premier, "Technologies web : approches théoriques" ou "Graphic World" ? Voilà, tout est dit.
VDN : le sens des choses
De notre travail originel de graphiste nous n'avons gardé que l'essence la plus noble et la fonction la plus pertinente : mettre en sens comme pivot central de nos activités, abandonnant peu à peu la mise en forme à son rôle de simple décor. Est-ce pour autant que nous avons choisi d'oublier l'esthétique ? Non. Seulement elle vous est offerte en prime. En surcouche additionnelle que chacun sera libre d'accepter telle quelle ou de modifier à sa guise. Un exemple ? Cliquez tout en haut de page sur "Version Texte"... vous consulterez strictement la même page mais sous une forme très différente. Elle ne vous plaît pas ? Si vos outils le permettent changez les couleurs, les polices, etc. jusqu'à obtenir votre page.
Alors au moment d'acheter un "beau site" demandez-vous à quoi ce "beau" peut bien servir, économiquement parlant. Opterez-vous pour une "solution Gutenberg" en vous condamnant à une refonte complète dans moins de deux ans, ou opterez-vous pour une "solution Internet" pérenne et multiplateformes telle que nous vous proposons de la découvrir au fil de ces pages ?
- en 1985 nous avons été parmi les premiers à Strasbourg à travailler opérationnellement sur Mac et à utiliser la technologie numérique (PAO) pour produire les outils de com de nos clients (mais pas encore sous le nom de Vol de nuit...),
- en 1993-94 nous avons encore été parmi les premiers à Strasbourg à nous intéresser de près à Internet et à proposer l'année suivante (1995) des solutions professionnelles à nos premiers clients web,
- en 2003-2004 nous avons été toujours parmi les premiers à Strasbourg à nous intéresser au web sémantique, à l'accessibilité et à l'interopérabilité des contenus web,
- aujourd'hui nous sommes une fois encore parmi les premiers (et peut-être même cette fois les seuls !) à Strasbourg à développer des solutions numériques accessibles, conformes aux recommandations internationales et interopérables avec d'autres environnements : mobiles, univers virtuels, etc.
Tout comme demain nous serons probablement les seuls avant longtemps à Strasbourg à vous proposer des solutions de web 3D 100% interactives couplées avec vos projets web dans une dynamique cohérente, rationnelle et innovante.
