Combien de caractères sur une ligne ?

On a l’habitude de considérer que la longueur d’une ligne ne doit pas excéder 60 caractères. C’est une habitude héritée des conventions de l’impression.

Les études réalisées sur la lisibilité confirment que pour un paragraphe, la longueur optimale est de la longueur de 2 fois l’alphabet. Cela vaut bien sûr pour des pages de textes ou des paragraphes, pas pour des lignes seules.

Cependant il est difficile de savoir si cette lisibilité est optimale pour des raisons cognitives ou si les habitudes de lectures se sont habituées à cette norme, attendant le retour à la ligne à cette longueur.

Sur les pages d’un roman,  c’est assez simple, tous les textes ont la même largeur physique. Mais sur un magazine, et sur une site web plus complexe ?

Si les colonnes de texte changent, ne serait-il pas judicieux de changer également la taille de police pour conserver la lisibilité optimale ? Dans l’exemple ci-contre, la colonne la plus étroite est à 360px pour un corps de 12px, la plus large à 630px pour un corps de 21px.

12px, c’est petit mais encore lisible. 21px s’approche des tailles de titrages.

---

Cet exemple est tiré de l’article de Vladimir Career :  « Line length and Font Size relation in design« . Il est parti d’une base de colonne de 480px pour un corps de 16px dont il se sert pour ses mise en page. Le corps 16px est en effet le plus recommandé dans les normes d’accessibilité, et 60caractères en 16px occupent plus ou moins 480px. Les polices n’ont bien sûr pas toutes la même taille relative ni la même lisibilité, des ajustements sont possibles.

Cela ne résout pas le problème le plus courant : combien de caractère pour une colonne moins large mais de même corps ?

Pour cela, l’oeil, l’expérience, et éventuellement des tests auprès d’utilisateurs, sont les seuls à permettre une réponse. Essayer beaucoup, s’inspirer des solutions anciennes, expérimenter c’est la méthode la plus fiable.

Je trouve personnellement mon compte dans ces ouvrages :

Composition et mise en page,

Ambrose et Harris,Ed. Pyramid. La partie web est trop sommaire, mais l’ensemble est très instructif.

Typographie, la lettre, le mot, la page,

Jaque Braquemont et Jean-Luc Dusong, Ed. Eyrolles. Tous les fondamentaux dans le détail.

Typo-graphie, guide pratique,

Damien Gautier,Ed. Pyramyd. J’y ai appris les bases.

Pour conclure, comprenez bien qu’il n’existe pas de vérité objective en ergonomie. On ne peut faire que des préconisations générales (ce à quoi devraient servir les normes ergonomiques qui sont des recommandations). Des observations générales sur l’utilisabilité peuvent s’avérer fausses ou contre productives selon les contextes.

N’écoutez pas les gens qui vous disent qu’on lit une page en  » F « . Jamais.

Galaxie WordPress : un exemple communautaire à suivre

Le site Galaxie WordPress regroupe  une sélection d’actualités autour du CMS WordPress sur une seule page.

Les développeurs ou intégrateurs qui travaillent avec cette plateforme sont sans cesse à l’affut de nouveautés car les mises à jours sont fréquentes, et les fonctionnalités sont croissantes. Certains blogs relaient périodiquement de nouvelles découvertes à travers les fonctions peu connues de WordPress, soit parce qu’elles sont nouvelles, mal documentées par l’éditeur ou simplement difficiles à implémenter.

L’idée est venue d’agréger les ressources francophones de qualité en un seul lieu, afin de réaliser un portail de veille alimentée par la communauté des utilisateurs de WordPress.

Permettre à ses utilisateurs de s’approprier leur outil est un tremplin à son adoption.

Nombre d’entreprises on tenté de reproduire l’enthousiasme suscité par les communautés Open Source, mais en verrouillant les accès à ce qu’elles voulaient bien laisser filtrer. c’est évidemment à chaque fois un échec, des forums laissés à l’abandon, des groupes LinkedIn ou Facebook morts nés, voire des utilisateurs mécontents.

Il ne s’agit pas que de position commerciale.  Si l’Open Source réussi à fédérer malgré ses défaillances, c’est parce qu’elle offre une interaction sociale élémentaire : le choix collectif.

Tout le monde ne peut pas ouvrir son code source, certes, mais favoriser l’échange entre les utilisateurs est toujours profitable quand elle est un complément à l’aide contextuelle et à la documentation (qui doivent exister!). L’intégrateur est un utilisateur important d’un CMS. Il est aujourd’hui un délaissé dont les objections se voient balayées par des arguments commerciaux comme « Intégration facile, pur XHTML et langage de template ». Puis il est laissé à l’abandon. C’est un professionnel, qu’il fasse l’effort de comprendre la logique du CMS.

WordPress est devenu un CMS de plus en plus utilisé pour des projets professionnels grâce à sa communauté, l’échange de ressources, de solutions adaptées à tous les niveaux, générant un enthousiasme aux proportions gigantesques avec bientôt 3 millions de téléchargements !

J’attends des Galaxie « XXX » pour les leaders du marché. Peut être que si ces éditeurs autorisaient au moins le principe de la critique je me sentirais respecté et je redonnerait une chance à « certains » !

Parenthèse technique : wordpress conditional tags

Une fois n’est pas coutume, un peu de code en aparté :

Comment attribuer une classe css à un élément en se basant sur les tags (mots clés) ?

Trouver la solution à cette question m’a pris un certain temps, puisque le terme « tag »  désigne, dans le vocabulaire de wordpress, aussi bien les mots clés que les fonctions php prédéfinies par les développeurs. Enfin, le terme class désigne autant une spécification des css que des objets en php…enfin bref Google m’a servi tout et son contraire jusqu’à ce que je trouve ce que je cherche !

Donc, il faut utiliser des « conditional tags » pour donner à un élément html la class du tag auquel il est attaché :

?php if ( has_tag(‘design’) ) { echo ‘ class= »design »‘; } ?

Tout cela à l’intérieur de la boucle bien sûr. Je cherche encore comment  récupérer automatiquement les mots clés, WordPress le permet mais seulement pour les afficher en html (pas en css).

Un jour le CMS parfait fera tout ça pour moi ! Un jour…

Découvrez le métier de webdesigner

Grâce à IE6ify, voyez les sites internet comme un professionnel du web en plein travail de débogage sur Internet Explorer 6 : des sites qui partent dans tous les sens (le fameux « mode Quirks » inventé par Microsoft pour jouer avec nos nerfs).

Découvrez comment les designers, après un harassant travail, doivent recommencer un travail tout aussi long pour faire avaler leur site à IE6 lorsqu’ils découvrent, même pas étonnés, que RIEN n’est à sa place normale dans cette vieillerie codée par des amateurs.

Pour ce faire, utilisez le bookmarklet IE6ify en le glissant dans votre barre d’outils, naviguez sur vos sites préférés, et déclenchez d’un simple clic le cauchemar IE6 !

Et voici ce que doit corriger le designer ou l’intégrateur quand il vérifie la compatibilité avec IE6 :

Voici un nouvel exemple de la raison pour laquelle tous les professionnels du web vouent un mépris éternel à Microsoft et une haine farouche envers  Internet Explorer 6 !

Plus que 14% d’utilisateurs en juin 2009, on arrive au bout, encore un an ou deux et on sera débarrassés…croisons les doigts !

Sauvez IE6 !

Un peu en retard, le poisson d’avril le plus subtil cette année : La campagne Save IE6 ! Les arguments en faveur du vieux navigateur sont implacables. Mon préféré est : « Coder pour IE6 nous enseigne de grandes vertus, comme la patience et la persévérance ! ».

N’hésitez pas à utiliser leur utilitaire de téléchargement !