La longueur idéale d'une ligne?
Étiquettes : webdesign
Aujourd’hui je m’aventure sur un terrain que je connais peu. Cependant, j’ai assuré mes arrières en demandant main forte aux spécialistes de mon équipe.
Cet article fait suite au constat très juste de Cedric Savarese sur le site A List Apart : alors que la plupart des écrans d’ordinateur sont plus larges que longs, la plupart des sites Web sont l’opposé absolu, plus longs que larges.
En effet, force est de lui donner raison. La plupart des sites Web dotés d’une mise en page fixe n’utilisent pas tout l’espace disponible à gauche et à droite de leur contenu. Les mises en page flexibles, en ce sens, font une meilleure utilisation de l’espace horizontal. Mais l’inconvénient réside dans le maintien de longueurs de ligne utilisables.
D’après les experts, la longueur de ligne idéale se situe entre 8 et 12 mots. Voyez les médias imprimés comme les journaux : ils n’hésitent pas à utiliser des longueurs de lignes assez courtes. Pourquoi ? Parce qu’ils le peuvent ! Comment ? En disposant le texte en plusieurs colonnes.
On le sait : les web designers ont une certaine marge de manœuvre pour en faire autant. Mais on sait aussi qu’avec le Web, on n’est pas toujours assuré de contrôler le rendu final de l’information. Si les utilisateurs utilisent une taille de fonte différente ou désactivent les images, c’est souvent la catastrophe !
Bien sûr, ce problème n’est pas nouveau. Il a déjà été largement analysé et en partie résolu par les membres du W3C.
Le module de multi-colonne CSS3
Le multi-colonnage W3C est un module qui travaille sur trois niveaux. Il est proposé par le CSS pour étendre les possibilités des modèles de « box » traditionnels. Il permet au contenu de se couler dans des colonnes multiples à l’intérieur d’un élément. Les designers peuvent ainsi spécifier dans combien de colonnes un élément devrait être rendu. Laissant aux navigateurs le soin de s’occuper du formatage du texte pour que les colonnes soient équilibrées.
Techniquement, ces nouvelles propriétés proposées sont les suivantes :
- ‘column-count’ : le nombre de colonnes dans lesquelles répartir le contenu.
- ‘column-width’ : la largeur optimale pour chaque colonne.
- ‘column-gap’ : la gouttière entre les colonnes.
- ‘column-rule’ : le filet entre les colonnes.
Quid de l’implémentation ?
Les développeurs de Gecko 1.8 ( Mozilla and Co. ) ont annoncé la première implémentation du module en avril de cette année. Aujourd’hui, seuls Firefox (1.5 > 3.0) et Safari supportent le module multi-column de CSS 3. Reste à espérer que les autres suivront, sans trop tarder.
D’autres ont imaginé des solutions alternatives. Ainsi, International Herald Tribune, par exemple, utilise une disposition de multi-colonnes grâce au JavaScript : le script divise le contenu d’un élément et le réarrange dans plusieurs colonnes.
La mise en oeuvre est assez facile. Pas besoin de connaître le JavaScript, il suffit de télécharger le fichier, et de le lier :
<script type="text/JavaScript" src="css3-multi-column.js"></script>
On peut alors commencer à utiliser les propriétés CSS3 dans les feuilles de style comme pour une autre CSS. Voir les propriétés ci-dessus.
Mais, si cette solution fonctionne bien, elle n’en a pas moins quelques inconvénients. Le premier est l’ajout à la structure HTML d’un nombre important d’éléments, dont certains restent vides ! En plus d’alourdir la page, cela entraîne l’apparition de marges non désirées.
Il faut aussi savoir que le code JavaScript a tendance à couper et faire bouger le contenu d’une colonne à une autre. Les résultats sont donc plus ou moins aléatoires.
Il existe actuellement d’autres solutions, en PHP. Elles génèrent les colonnes côté serveur, plutôt que côté client. Le résultat est ainsi plus propre, et dépend nettement moins du browser utilisé. Seul inconvénient : elles sont assez lourdes à mettre en oeuvre.
Liens pratiques
- Lire l’article sur le site A List Apart
- Un exemple sur International Herald Tribune
- Télécharger le script
- Quand il faut faire long
- Les polices sur le web, c’est la misère
- Un exemple de la solution choisie par IHT.
Commentaires
Bonjour,
Le problème n’est pas que technique, il est aussi ergonomique. La caractéristique d’un média paginé, c’est que l’ensemble de la page est visible d’un coup d’oeil. On évitera de faire des colonnes étroites sur toute la hauteur d’une page de journal, mais même si on le faisait ça resterait lisible (bien que pas optimal).
Avec un média non paginé comme le Web (et plus particulièrement son rendu à l’écran), on a un gros problème: il n’y a pas de page. Jusqu’où doit aller ma colonne CSS3, dans ce cas? Si je dois scroller pour lire la fin de la première colonne, puis remonter pour lire le début de la seconde, puis scroller à nouveau, puis remonter encore pour lire la troisième colonne… non, vraiment, ça n’est pas envisageable.
En sachant que les écrans peuvent être de taille réduite (pensons par exemple à l’eeePC et ses clones, ou encore à l’iPhone et autres mobiles connectés), le mode multi-colonnes pour un même contenu (ce que propose le module CSS3 dont il est question ici) devient beaucoup moins intéressant. Il faudra en limiter l’application aux écrans suffisamment grands (en passant par les Media Queries CSS, pour les techniciens), et surtout en limiter l’application à des blocs de texte de longueur réduite.
Cher Florent. Merci pour ce commentaire. Je te renvoie au site de International Herald Tribune qui semble appliquer à la lettre le fruit de ta réflexion. Dans les pages d’articles, la boîte à outils associée à l’article comporte un outil nommé « 3-Column Format ». Celui-ci permet à l’utilisateur de voir l’article en question dans un format 3 colonnes.
@ Florent :
http://iht.com/articles/2008/07/08/business/G8.php pour un exemple concret. Je t’invite donc à cliquer sur l’outil en question.