Rapport taille texte / images
Adapter les images…
Dès lors qu’un contenu se redistribue proportionnellement en se basant sur une grille liquide, il arrive que les images, ou les autres éléments multimédia de la page, deviennent rapidement disproportionnés par rapport au texte qui les englobe. Il est donc conseillé d’affecter ces éléments de manière responsive. La démarche est simple à mettre en place et elle ressemble à celle que nous avons utilisée jusqu’à présent.
La question à se poser est de savoir quel est l’élément qui contient l’image en question. S’agit-il directement de la balise qui contient également le texte, ou d’une balise tierce comme <figure> par exemple. Si l’image est isolée dans une balise tierce, il suffit de définir la largeur de l’image à 100 % et celle de son élément englobant (<figure> par exemple) au rapport de proportionnalité obtenu. Dans l’exemple utilisé, ce rapport est de 290 / 310, soit 93.548387096 %, avec des marges de 10 / 310, soit 3.225806451 %. Si maintenant l’image est placée directement dans la balise de l’article, alors c’est à l’image qu’il faudra apporter le rapport proportionnel de largeur.
Il est inutile de paramétrer la hauteur, le moteur de rendu préservera le rapport d’homothétie. Cependant, il est important de s’assurer que la balise HTML de l’image (ou de l’élément multimédia), ne possède pas d’attribut width ou height défini. Sinon, ces paramètres prévaudraient sur la feuille de style. On peut visualiser le résultat sur la page de test.
Un détail important : Si l’image se rétrécit cela n’est pas gênant, mais si au contraire, l’image est amené à s’agrandir, un effet de pixellisation peut apparaître et affecter la qualité du rendu du contenu et de la lisibilité. Pour éviter cela, il peut être intéressant d’user de deux aménagements : le premier serait d’utiliser une image ayant des dimensions un peu plus grandes que celles prévues pour un usage à 100 %, et le second serait de bloquer l’agrandissement de l’image au niveau des CSS, en paramétrant la propriété max-width sur la valeur limite d’acceptation de pixellisation.
Cependant, ceci va largement pénaliser l’utilisation de ce même contenu sur des appareils mobiles, en augmentant dramatiquement la bande passante. Il nous faudra alors avoir recours à une librairie de type response.js, qui permettra par défaut d’user d’une image en basse résolution, voire en niveau de gris, et en fonction des besoins lors du redimensionnement de la fenêtre du navigateur, ou d’une consultation depuis un périphérique adéquat, de charger l’image en grande résolution.
Et le texte ?
Qu’en est-il du texte ? Doit-on lui aussi, l’affecter de ce rapport de proportionnalité d’agrandissement ou de rétrécissement ? Lorsque l’on pose la question d’une telle manière, nous sommes tentés de répondre oui. Mais à y regarder de plus près, quel serait l’intérêt de grossir l’intégralité du contenu ? Il ne s’agit en fait que de le redistribuer pour préserver un cadre de lisibilité n’engendrant pas d’ascenseur horizontal. Et puis, si l’on souhaite agrandir le texte, nous avons toujours accès au raccourcis d’accessibilité (ctrl +), qui fera varier la taille de la typo.
Si d’aventure, nous souhaitions néanmoins faire varier la taille de la typo en faisant varier la surface de distribution, il ne faudrait pas garder le même rapport de proportionnalité que pour le reste de l’interface. Car s’il est acceptable qu’une image d’illustration passe à 50 % de sa taille d’affichage de base, le texte lui, s’il était affecté d’une telle proportionnalité, deviendrait totalement illisible (il pourrait passer par exemple, d’une représentation de 12 px vers 6 px). Donc, l’approche consisterait plutôt à dire que sur écran, la CSS userait d’un body à 62.5 %, alors que sur tablette, le body serait à 75 % (Voir les rapports sur l’article CSS [[TO DO]]).
En complément, et pour d’éventuelles valeurs intermédiaires entre les feuilles CSS, la librairie response.js pourrait être de nouveau utilisée, cette fois au travers du paramètre markup qui ferait varier sensiblement la taille de typo.
