Couleurs, typo et la lecture sur le web

Il me semble avoir presque terminé les modifications de couleurs et de typo que je voulais faire sur Libre-Fan, en tous cas en ce qui concerne le thème Marinelli. Voyez le début des travaux : Couleurs et typo en travaux sur Libre-Fan.

En attendant un nouveau thème épuré pour ceux qui n'aiment pas les effets arc-en-ciel ou perroquet, voici quelques réflexions au sujet de la présentation d'un site web et de la lecture sur le web.

Au cours de mes lectures faites à partir de mon fier mur de flux RSS, Sur le web , je suis tombée sur une page qui m'a conduite sur une autre page, toutes deux liées à la lecture sur le web :

• Une page du Lab d'Arc90, intitulé «Readability»
• Un long article paru sur A List Apart, intitulé «In Defense of Readers», écrit par Mandy Brown.

Un petit script nommé Readability

Arc90 est une société qui fait du «web design», comme on dit. Son laboratoire nous offre «Readability», sous licence libre Apache. C'est une sorte de marque-page magique appelé «bookmarklet» (en bon français, selon Wikipédia, «applisignet»). Bref, c'est un script en forme de marque-page. Installé comme on le fait pour un marque-page, il nous permet d'afficher une page web avec une présentation épurée et sans les distractions habituelles qui encombrent de nombreux sites.

«Readability» veut dire «lisibilité» mais va plus loin. Le marque-page magique vous donne la possibilité de lire une page web presque aussi confortablement que si vous lisiez un livre.

Il suffit d'aller sur la page de Readability en expérimentation, de paramétrer les options d'affichage des pages et de tenir le clic de souris sur le bouton «Readability» tout en poussant celui-ci vers la barre des marque-pages dans votre navigateur.

Pour définir vos paramètres, vous pouvez tout essayer pour voir comment s'affiche le texte qui est sous le bandeau de la page.

J'ai choisi pour ma part les paramètres suivants :

• Dans «Style» : «Novel» (comme un roman, typo plus lisible, je trouve, que «Newspaper» (comme un journal) ;
• Dans «Size» (taille de la typo) : à vous de voir ; «Medium» me suffit, personnellement ;
• Dans «Margin» (largeur des marges qui définissent la largeur de la colonne de texte), «Wide» me convient. La largeur est bien adaptée pour la lecture sans fatigue.

Une fois le marque-page magique «Readability» placé sur la barre des marque-pages de votre navigateur (Firefox, Midori, ce genre de bons navigateurs, pas IE6,7,8…, eh), vous pouvez aller sur une page web. Tiens, pourquoi pas celle-ci qui est sous vos yeux ?

Cliquez sur ce marque-page magique et hop, vous découvrez cet article sans couleurs, sans fioritures, sans bannière, sans menus sur le côté. Le texte seul, pratiquement, à part un lien vers le Lab Arc90 tout en bas de la page et trois discrètes icônes, dont la transparence ne vous distraira pas de la lecture (en haut, à gauche du texte de l'article) :

• icône pour retrouver la page dans sa présentation d'origine (Ouf !)
• icône pour imprimer l'article (Ouf ! on vous permet de gâcher du papier)
• icône pour envoyer ce texte par email (Ouf ! on vous permet de casser les pieds à d'autres internautes et de communiquer)

La typo (dans «Style») dépend bien sûr des paramètres de votre navigateur (allez les explorer et les modifier) et des polices présentes dans votre système. Avec DejaVu, c'est très bien.

Je trouve que «Readability» est une trouvaille, merci à Lab Arc90 Ce script existe aussi en module additionnel pour Firefox mais je n'obtiens pas la même typo avec le paramètre «Novel».

Caveat pour «Readability»

«Readability» étant du javascript, il faut toujours se méfier. Ne l'utilisez pas sur un site où vous mettez votre mot de passe car Arc90 pourrait récupérer votre cookie et donc votre mot de passe et de sales pirates pourraient les récupérer en piratant le site d'Arc90. C'est un risque.

Peut-être en installant le module pour Firefox les risques disparaissent-ils, si le javascript reste dans le profil, sur votre ordinateur.

Défense et l'illustration des lecteurs sur le web

Le marque-page magique «Readability» n'aurait peut-être pas vu le jour sans l'article de Mandy Brown, «In Defense of Readers».

Mandy Brown a travaillé longtemps pour les éditions Norton, très prestigieuses dans le monde universitaire. Elle défend donc la lecture et les lecteurs. Son idée est que les lecteurs lisent partout, même Don Quichotte au comptoir d'un bar le soir et même sur le web.

Il suffit que le lecteur ait un brin d'espace pour pouvoir rentrer dans son livre.

Le web ne tue pas la lecture par sa technologie, même si les écrans ne sont pas aussi agréables qu'une page de livre. Ce qui empêche la lecture assidue et continue sur le web, c'est surtout la présentation des sites web.

Les pages web, envahies de couleurs, d'images, de trucs qui clignotent ou qui sonnent dans tous les sens, de pub, de colonnes latérales bourrées d'informations diverses ou superflues, sont en fait remplies d'obstacles à la lecture. Le lecteur n'a pas le moindre espace pour s'absorber dans la lecture.

Le site sur lequel Mandy Brown a publié son article, A List Apart, est un exemple de présentation épurée qui laisse place à la lecture. Typo noire, ou marron clair pour les liens, sur fond blanc, deux ou trois images très peu colorées, pas de style de titre qui rompt le fil de la lecture, paragraphes bien séparés et une colonne latérale discrète qui est vide après les premiers paragraphes, lorsque le lecteur est sensé être plongé dans sa lecture.

Que fait Libre-Fan en faveur de la lecture sur le web ?

La lecture de l'article de Mandy Brown m'a fait réfléchir. Libre-Fan n'est pas un site très couru et ce n'est pas une question de présentation. Mais tout de même, je me suis dit que je pouvais peut-être apporter ma contribution à la lecture sur le web.

Distractions

J'ai fait en sorte que les blocs imagés et les fils RSS ne s'affichent pas dans les colonnes latérales lorsque les visiteurs affichent un article, une page, un billet de blog ou un message de forum.

Couleurs

Je n'ai pas renoncé aux couleurs. D'abord parce que je n'aime pas le noir en typo. Mais surtout parce que je fais en majorité des articles sur GNU/Linux et les logiciels libres et que je mets souvent des instructions à ne pas rater et à copier-coller. Dans ce cas, j'ai fait une bordure vert pétard.

Il est important aussi de repérer les différentes parties dans les articles pour s'y retrouver dans des textes souvent longs. D'où des titres bordés d'une ligne de couleur.

Pour les citations, le fond bleu est peut-être de trop. Parfois, la couleur peut aider à faire attention à ce qu'on lit. Je vais faire un essai avec juste la bordure à gauche (ça, c'est très chic et efficace).

Je ne me suis pas préoccupée des internautes qui ne voient pas les couleurs comme la majorité des gens. Mais je ne me suis pas préoccupée non plus de la majorité des internautes qui détestent sans doute les couleurs que j'ai choisies…

Sur le web, il faudrait en fait se contenter du bleu, du gris et du noir pour ne déranger personne. Ah, c'est rude !

Je vais cependant faire un thème tricolore dans des tons plus neutres. Voyez plus bas.

Typo, polices de caractère

J'ai changé la typo des textes en sérif (police avec empattement) et je l'ai agrandie un peu. Pas trop car je me suis aperçue que je suis obligée d'agrandir la typo dans les «Préférences» de Firefox pour pouvoir lire les pages web ailleurs, même Wikipedia. Tout le web semble avoir diminué la taille des polices ces dernières années. C'est sans doute à cause de l'abondance des petits écrans (portables et trucs qui tiennent dans le creux de la main).

Il est d'usage de dire que les polices sans sérif sont plus lisibles sur le web mais je n'en suis plus du tout convaincue. L'œil est très aidé par les empattements pour suivre les lignes.

Il est vrai aussi que DejaVu et Bitstream Vera ont des g qui sont plutôt à la mode sans serif. Ce sont de grandes typos très lisibles car elles ont beaucoup moins de pleins et déliés que Nimbus ou Liberation. Nimbus est une belle police dans les lettres capitales mais trop petite et trop tassée à mon avis. Liberation est très élégante mais plus petite que DejaVu et Bitstream Vera (nous la devons à Red Hat, mille merci à eux !). Il suffit que les internautes agrandissent leur typo dans Firefox, par exemple, c'est tout simple.

En revanche, il est un fait que Times New Roman et Times sont des typo illisibles et sans doute encore plus répandues que l'infâme MP3 en musique. Ce sont des police de style pattes de mouche.

Dans ma feuille de style, j'ai mis des polices lisibles, comme DejaVu et Bitstream Vera, ainsi que Georgia pour ceux qui n'ont ni GNU/Linux ni Firefox. Et bien sûr, en ajoutant «serif» en fin de liste, les visiteurs auront la police par défaut de leur navigateur ou de leur système, s'ils n'ont aucune de celles que j'ai indiquées.

Pour les titres et les colonnes latérales, j'ai mis du sans sérif, et ouf !, dans ce style de polices, M$ fournit Verdana et Tahoma, qui sont très bien, quoiqu'un peu trop grosses, selon certains avis. Pour Mac, je ne sais pas ce qui existe.

Je reviendrai peut-être à tout en sans sérif si j'ai un jour l'occasion de voir ce que ça donne sous M$Windows. Les visiteurs sous M$ et sous Mac voudraient-ils bien faire l'effort de modifier les paramètres de leur navigateur pour ne pas subir l'horreur de Times New Roman et de Times ?

Thèmes alternatifs

Les internautes qui se connectent au site Libre-Fan peuvent déjà choisir un autre thème, Garland, qui est un des thèmes livrés avec Drupal. Il est bien ordonné et affiche différents tons de bleu doux, couleur que tout le monde voit bien.

Je vais rajouter Nixer, thème minimaliste, que je vais modifier pour avoir des couleurs dans deux tons de marron, pour le texte, les titres et les liens. Il n'y aura pas de bannière mais juste le logo de Libre-Fan (oiseau bleu, inspiré de G. Braque).

Il doit être aussi possible de mettre en place un formulaire qui permet de choisir un thème sans devoir être inscrits et connectés au site. À suivre…