Créer une page WEB,
c'est comme du traitement de texte ?

Quelques réflexions pour aborder la rédaction de pages HTML (WEB) efficacement.

Le problème :

Depuis l'avènement du WEB, chacun se sent incité à transférer ses documents papier vers le web. De plus, la plupart des logiciels de traitement de texte offrent une conversion vers le format HTML du WEB.Ces 2 média sont en fait très différents et la transposition directe n'est pas forcément judicieuse.

Dans ce document nous essaierons de comprendre les différences d'approche d'un document HTML (WEB) par rapport à un document de traitement de texte.

1. Différences liées au langage HTML
2. Différences liées à la lecture à l'écran
3. Différences liées au média qu'est le WEB.

Différences liées au langage HTML

Par sa conception, le langage HTML (HyperText Markup Language) offre certaines possibilités et rend malaisées d'autres. Il influence donc la rédaction et la structuration du message visuel.
Inévitablement la vision des concepteurs transparaît dans l'organisation du langage.

En particulier, il est bien d'avantage un langage de structuration de la page qu'un langage de description visuelle de la page.

D'autre part il est interprété à chaque lecture par le browser (Butineur; Netscape par exemple). On ne compose pas une page, mais du code HTML (Cf Qu'est-ce que HTML ?) qui sera transmis -généralement via internet- au lecteur qui voit la page se constituer devant lui dans son Browser. (Elle est interprétée). Cette page affichée à l'écran n'a de réalité que fugace puisque les mêmes instructions sont interprétée chaque fois avec des nuances importantes en fonction des réglages particulier de chaque ordinateur, de chaque logiciel, etc.

Fonctionnalités de structuration du texte.

Issu du monde scientifique (CERN) et inspiré d'un langage d'origine administratif, HTML était à l'origine destiné à structurer le texte, indépendament de la manière dont il peut être lu.
Il y a une très nette volonté de séparer le fond (texte et structure) de la forme (taille, fontes, couleurs, typographie, etc.) Clairement l'évolution du WEB est en train de pervertir cet objectif et de privilégier la forme, souvent par ignorance ou incompréhension de la logique du HTML, parfois parce que l'expéditeur du message accorde plus d'importance à la forme que qu'au fond, ou que cette structure ne convient pas à la manière de structurer le document.

Il inclut notamment :

Des listes numérotées,

1. Elément 1
2. Elément 2
3. Elément 3
4. etc.

Des listes à pastilles,

• Elément 1
• Elément 2
• Elément 3
• etc.

Des possibilités d'indentation

Les scientifiques aiment structurer les textes

en indentant les éléments
qui sont hiérarchiquement subordonnés
ou qui sont dépendants. Cette habitude est très profondément ancrée chez les informaticiens de tout poil, où elle sert à visualiser les niveau d'imbrication des structures logiques. (If-then ou repeat-until,etc.)

 

6 niveaux de titres

Ces niveaux révèlent à nouveau une vision du document comme d'un ensemble structuré de manière hiérarchique.

Ces structures s'imposent tant par la présence ostentatoire des commandes permettant des les sélectionner dans les éditeurs d'HTML que par l'absence d'autres.
Elles ne sont pas du goût de tous, notamment de certains littéraires. En effet ces formes d'organisation du document donnent au texte une connotation rigoureuse, "carrée" qui ne convient pas forcément à la poésie par exemple... Il faut aussi noter qu'il existe d'autres forme de structuration du texte qui ne sont pas apparentes dans l'apparence visuelle (2-D) de la page, mais dans le contenu du texte. (Un roman, par exemple a une structure qui n'est guère apparente, puisque le texte est essentiellement linéaire, ponctué de chapitres seulement)

Fonctionnalités de mise en forme du texte.

Niveau paragaraphe

Au niveau du paragraphe outre les listes déjà citées, les possibilités de mise en forme sont liées à une vision assez structurante du texte ;
Alors que ces attributs ressemblent beaucoup aux styles (feuilles de style) d'un traitement de texte comme WORD ou ClarisWorks, ils s'en distinguent par le fait qu'ils définisssent une unité d'apparence mais pas la forme particulière que prennent tous les éléments du même style. D'un cas à l'autre l'atribut "Titre3" peut être du Times 18 ou du Arial 24, mais sur une même page affichée sur un ordinateur tous les "Titre3" seront identiques. Les titres sont donc plutôt des attributs structurants qu'une mise en forme.

Des styles qui définissent la nature du texte :

Par exemple on peut définir du texte comme étant une adresse ou une définition ou un terme..(NB : ces 2 derniers définissent aussi une structure : ils génèrent un forme de liste adaptée à la définition et aux termes de cette définition)

 

Niveau caractère

Au niveau du caractère les possibilités de structuration, qui servent à définir la nature de ce texte sont souvent perçues comme des outils de mise en forme et paraissent alors assez élémentaires :

• On dispose du Gras, de l'italique, de possibilités d'accroître la taille ou de la réduire, ainsi que des indices (CO₂) et des exposants (x²) indispensables aux matheux ou aux chimistes.
• D'autres formes, souvent perçues comme inutiles dans une logique de mise en forme, définissent la nature du texte ou sa pertinence:
  • Teletype, fonte à espacement fixe qui permet d'évoquer une machine à écrire, des OS comme le DOS ou UNIX, ou d'aligner des caractères puisque chaque caractère occupe la même largeur sur sa ligne que ce soit un I ou un M etc.
  • Citation qui définit comme une citation ces caractères.
  • Des styles qui définissent la sémantique du texte : Par exemple on peut définir du texte comme Strong ou Emphasis, c'est-à-dire qu'on veut parler fort ou porter l'accent sur ces mots.
• Le choix d'une fonte en particulier n'est pas facile. Si on peut l'indiquer dans les versions récentes de HTML, on reste tributaire des fontes installées chez l'usager.
  

Remarque générale 

Cohérence vs forme visuelle.

En tant que créateur de pages WEB, on peut compter sur la cohérence de la structure du document visuel qu'on crée, mais pas de son allure précise puisque les codes HTML sont visualisés par chaque interpréteur, selon des réglages que l'usager peut modifier à son gré.

Typographie

En particulier, pour chaque browser, le choix des polices employées, de leur taille etc. varie beaucoup. Essayer de les contrôler sort clairement du cadre de ce que les concepteurs ont initialement prévu : définir la structure et la nature du texte, la forme étant laissée à l'usager...
Si l'on tient absolument à maîtriser la typographie, on recourt à une astuce : le texte est transformé en une image (un GIF généralement) qui garantit une concordance etre ce qu'on réée et ce que l'usager voit, mais qui pénalise la page en augmentant la taille considérablement, et en la rendant plus complexe à modifier. De plus on est très loin du but original de HTML puisqu'on contourne la structuration du document, au profit de son apparence.

Images

De même le contraste des images est fonction du réglage du moniteur, et les valeurs considérées comme normales varient d'une plateforme à une autre. (Bien plus contrasté sur PC que sur Macintosh par exemple, fontes plus petites sous PC que sur mac )

Différences liées à la lecture à l'écran.

Ergonomie

Les pages web sont destinées à être lues à l'écran, dont la qualité optique est réduite :

Lisibilité des écrans par P. Dillenbourg

• Résolution du point sur papier 300 Dpi, et souvent plus, sur l'écran 72 (parfois un peu plus).
• Netteté limitée et scintillement surtout avec les écrans bon marché.
• Contraste plus faible à l'écran, risques de reflets, possibilités d'orienter optimalement la page réduites, etc.

La position de lecture est très statique, l'ergonomie restreinte. On ne peut pas souvent lire à l'écran dans un bon fauteuil au coin du feu !

Les parchemins du web mort...

Les écrans ont une taille limitée : une fenêtre à travers laquelle on observe le document. Pour les pages WEB qui sont longues, on recourt aux ascenseurs qui permettent le défilement "scrolling", c'est fastidieux, et les repères topographiques ne sont pas faciles. Dans un livre on sait à l'épaisseur des pages où on en est dans l'ouvrage, dans une page il faut observer la position d'un ascenseur, dans une bande de défilement au bord de la fenêtre.

Au lieu de pages on devrait plutôt parler d'un long parchemin qu'on observe à travers une fenêtre et qu'on déroule au fur et à mesure pour le lire.

Cf aussi sur la dimensionnalité d'une page : Jakob Nielsen, Differences Between Print Design and Web Design

Couleur

 Le contraste et le choix des couleurs du texte sont des paramètres qu'on choisit souvent pour d'autres raisons (Look moderne, tentative de faire "cool") que dans une perspective ergonomique et de lisibilité optimale. Le texte couleur surtout le bleu est en fait à éviter. Cf Recommandations pour les couleurs à l'écran. Le résultat est souvent une sorte de kaléidoscope pénible à lire. En conséquence on ne lit pas, on absorbe comme une séquence de TV.

Pour des conseils ergonomiques sur le travail à l'écran cf brochure de l'association des opticiens. ou l'université de Laval (Fr)

Différences liées au média qu'est le WEB.

Nature a-topologique

Les liens hypertexe du WEB permettent de passer à un site l'autre bout du monde d'un clic peuvent désorienter : en effet c'est à tavers la même fenêtre qu'on voit un autre endroit. Plutôt qu'aller à une page on devrait dire qu'on la fait venir. La page vient dans mon environnement, et la page n'a pas de contexte.
Poser Universalis pour prendre le Larousse c'est un geste, un papier différent un poids différent, même une odeur quzi évoque des soirées à potasser pour des examens, etc. On sait où on en est.
Il faut donc créer autrement dans les pages web ce qui fait défaut. D'où toutes les bannières, bandes latérales, bandeaux, frames qui tentent de donner à un site une unité, un contexte. (Avec le risque de frame abuse pour conséquence)

Conotations "modernes" :

Une page WEB c'est, actuellement , un média perçu comme moderne. Le lecteur (est-ce un lecteur ou un spectateur ?) arrive avec des attentes qui reflètent ses représentations du média qu'est le WEB : moderne, à jour, léger, dynamique, fun. On est loin des conotations du livre: sérieux, austère, construit, mais poussiéreux aussi. La manière dont un message passe va être naturellement modifiée par ces représentations. Ce dont les publicitaires n'ont pas manqué de se servir pour donner une image moderne à leurs produits, mais qui freine parfois les défenseurs de "la Culture", ceux qui ccordent plus d'importance au fond qu'à la forme.

Lecture graphique, rapide :

On parle de Surfer le WEB, cette image révèle naturellement une vision superficielle de l'accès à l'information (on surfe sur les vagues, pas dans l'eau.)
L'information dans une page web est en principe très courte, très dynamique, clignote ou bouge sans cesse, et se lit dans un contexte d'irritation et de frustration. En effet l'internaute vit le paradoxe frustrant des attentes énormes que notre société place d'une part sur l'"accès instantané à l'information", et d'autre part la très grande lenteur de ce média surnommé World Wide Wait !
Cette lecture dans l'urgence mène naturellement à une perception rapide, plus supercielle qui fait la part belle à l'image au détriment d'une lecture du sens. Une page web ne se lit pas vraiemnt elle se regarde.
Evidemment il y a des contextes où cette affirmation péremptoire n'est pas vraie: cette page-ci tente d'être un contre-exemple!

Pollution informationelle

De plus l'information de qualité est souvent noyée dans une masse de pages inintéresantes ou publicitaires que des firmes s'ingénient à placer sur le chemin de notre quête vers le savoir. Obligé de trier de plus en plus rapidement l'abondance d'informations qui nous submerge, le lecteur risque de perdre l'habitude d'approfondir. Dans ce contexte une page au graphisme soigné devient le seul moyen de capter l'attention d'un lecteur.

Information connectée

Dans beaucoup de cas, la valeur-ajoutée d'une page réside dans la richesse des liens et non dans les contenus. Les pages de type guide du cyber-routard, qui construisent un sens en structurant des pages dans un tout cohérent sont de bons exemples d'usage pédagogique du web. Souvent, dépassant le simple annuaire, on y trouve des pages mêlent du contenu propre et des liens sélectionnés. (Un bon exemple "Les tiques au DIP" de C. Oihénart) Cette manière de se référer à plutôt que de copier, correspondent bien à la logique académique (Les chercheurs du CERN concepteurs du WEB réapparaissent ici) de citer ses sources. Elle change aussi la posture pédagogique du créateur de la page: plutôt que de dispenser un savoir la page devient un moyen de mettre en scène une situation pédagogique, de faciliter l'accès à un savoir qui réside ailleurs et de motiver les élèves.

Retour à la table des matières de ce document 

Retour à la page de fiches multimédia @ TECFA