Technos Web et Traduction: Quelques nouveautés du design responsif

Le monde du design responsif évolue en permanence, et avec lui les recommandations et projets de travail du W3C, notamment en terme d'évolution des CSS. La typographie a elle-aussi son mot à dire et l'utilisation des fontes web apporte son lot de solutions. Cet article présente une série de liens pertinents pour poursuivre une réflexion déjà ancienne.

Régions et flux CSS

Dans les magazines papier, le texte est beaucoup plus fluide que sur le web : il peut suivre les contours d'une image, ou bien remplir des contours complexes. C'est ce que permettent les exclusions CSS avec un résultat visuel très attrayant. Les régions et flux (regions et flow) définissent quant à elles les zones où le texte est affiché de façon fluide. Lorsque l'utilisateur zoome ou change sa taille de fonte, le design reste identique, le texte s'adaptant de façon fluide dans les zones qui lui sont permises. Le support de ce projet de travail est plus que limité, mais comme souvent, un polyfill permet d'ores et déjà de s'en servir.

Colonnes CSS

La souplesse d'une tabulation faite en CSS (adaptative) et la mise en page classique d'un tableau comme au bon vieux temps de la balise <table>. Avec la mise en page multi-colonnes (recommandation candidate du W3C), il est possible de spécifier le nombre de colonnes d'un élément et leur espacement, ou bien la largeur d'une colonne type, laissant au navigateur le choix du nombre de colonnes à afficher. Cette recommandation n'est pas encore supportée par tous les navigateurs (IE ne la supporte qu'à partir de sa version 10), mais un polyfill a été développé sous forme d'un plugin jQuery.

Quelle taille de fonte afficher ?

Le choix de la taille de fonte à afficher ne peut dépendre uniquement du goût personnel depuis le début de l'apocalypse zombie qui s'est silencieusement abattue sur le web. Le contexte d'utilisation est aussi important (sinon plus) que la taille des écrans. La vraie question à se poser est dorénavant : à quelle distance de l'écran l'utilisateur se trouve-t-il ? Les choix de la police de caractères, de la hauteur des lignes et du contraste découlent de ce simple fait.

Typographie responsive : des em et pas des pixels

Plutôt que de baser les points de contrôle ou de rupture de vos media queries sur des pixels (qu'ils dépendent de votre design en particulier, ou de la taille du viewport du dispositif utilisé), pourquoi ne pas les baser sur une unité de mesure plus relative, le em ? C'est ce que proposait déjà Lyza Gardner en mars 2012. L'un des avantages de cette approche, c'est que si l'utilisateur zoome en changeant sa taille de fonte, le design s'adapte à son choix.

Faute de goût typographique

Utiliser des fontes web pour donner un style à son site peut donner lieu à une faute de goût relativement répandue, celle du faux italique ou du faux gras. En appliquant la balise <em> (ou <i>) à un élément sans avoir défini la fonte italique correspondante amène le navigateur à italiciser la fonte de base en faisant pencher chaque caractère, ce qui peut donner un résultat bien différent de celui attendu. Cette faute de goût typographique ne gêne pas que les esthètes, mais bien chaque visiteur, puisque la lisibilité du texte s'en trouve réduite. Il serait dommage de ne pas la corriger.

Des vidéos responsives

Afficher une vidéo YouTube ou une présentation Slideshare qui s'adapte à la taille de l'écran tout en conservant son ratio ? Voici une solution déjà ancienne basée uniquement sur du CSS qui encapsule l'iframe sans passer par la balise video de HTML5.