Z-i-G-Z-a-G

Typographie adaptative (responsive) — Web design


flowtype.js

Pour ce troisième tutoriel, je vous partage une « fonctionnalité » que j’ai découverte récemment en me demandant si il était possible de mettre en place une police responsive comme on sait le faire facilement avec les blocs de texte, les images, les menus… Le terme « responsive » (adaptatif ou RWD en anglais pour Responsive Web Design), désigne le faite d’adapter de façon optimal la consultation et la navigation de son site web sur tous les supports: ordinateurs de bureau, mobiles, tablettes ou autres. Pour exemple, si vous lisez ce texte sur un ordinateur de bureau et que vous réduisez la taille de la fenêtre de votre navigateur, vous pourrez observer que ce site propose le responsive design et qu’à partir d’une certaine largeur de fenêtre le contenu est adapté.

Si il est simple de penser son site en pourcentage (% de l’écran ou bien de la fenêtre du navigateur) et non en pixel comme il est facile de le faire avec les images par exemple, en leurs attribuant une taille maximum selon la résolution de la fenêtre comme ceci:

img {
    width: 500px; /* Taille de l'image */
    max-width: 100%; /* Taille maximal de l'image */
}

Ici l’image ne dépassera jamais la largeur de la fenêtre de navigation même si celle-ci est inférieur à 500px. Ceci est valable pour bien d’autres choses en spécifiant la taille de vos contenus avec l’extension %. Il est également possible de les adapter à l’aide des Media Queries, qui sont des fonctionnalités offertes par le langage CSS et qui font plus précisément partie des nouveautés de CSS3.

Les Media Queries sont des « règles » que l’on peut appliquer dans certaines conditions. Par exemple, si la résolution de l’écran et inférieur à telle ou telle valeur, alors on applique des propriétés CSS différentes. Ceci ne concerne pas seulement la résolution de l’écran mais peut être défini pour d’autres critères comme le type d’écran (smartphone, projecteur, TV…). Grace à eux, il n’est plus uniquement possible de faire varier la valeur du contenu selon l’écran ou la fenêtre de navigation mais aussi leur position, leur couleur, la taille du texte…

Et oui, et c’est bien là mon interrogation, la taille du texte s’exprime en px, en em ou rem mais non en %. Concrètement, la taille du texte peut uniquement être adapté avec les Media Queries en spécifiant des nouvelles propriétés CSS selon un certain seuil de résolution comme ceci:

p {
    font-size: 16px; /* Taille de police par défaut */
}

/* Nouvelles règles si la fenêtre fait moins de 960px de large */
@media screen and (max-width: 960px) {
    p {
        color: blue; 
        font-size: 18px;
    }
}

Nous pouvons ajouter à la suite d’autres règles pour d’autres seuils. Je vois souvent une alternative à ce responsive « escalier » pour modifier la taille d’une police de façon fluide, surtout utilisée pour le nom des sites internets, cette astuce consiste à mettre une image contenant le nom du site en question pour que la taille de celui-ci sois adapté de manière fluide en pourcentage. Seulement on perd la possibilité de sélectionner ce texte et de le copier dans le presse-papier (pas très grave vous me direz). C’est vrai, mais pour certain « concept » de site comme celui-ci rieslingtype.com, celà peut poser problème.

J’ai donc fait quelques recherches et je suis tombé sur un « paquet » à télécharger sur le site GitHub, le service web d’hébergement et de gestion de développement de logiciels mis en place en avril 2008. Appelé « FlowType.JS », il est proposé par Simple Focus (qui à notamment développé le site du service d’écoute de musique en ligne Grooveshark), sous la licence du MIT. Grace à FlowType.JS, vous aurez la possibilité de mettre en place une vrai police responsive sans effet escalier. Sois en mettant en place des seuils de « lisibilité » ou la taille de la police varie et s’arrête une fois la largeur de l’élément parent devient inférieure à 500px ou supérieure à 1200px ou une fois que la taille de la police devient inférieure à 12px ou supérieure à 40px par exemple; sois en définissant votre propre taille de police en utilisant un ratio taille/fenêtre. L’idée de ce développement est le suivant d’après Simple Focus:

« Idéalement, pour une meilleur lecture un texte doit contenir entre 45 et 75 caractères par ligne. Mais il est difficile de respecter cette règle pour toutes les largeurs d’écran seulement avec du CSS et les Media Queries. FlowType.JS facilite cette difficulté en changeant la taille de la police sur la base de la largeur d’un élément spécifique. Cela permet un nombre parfait de caractères par ligne pour n’importe quelle largeur d’écran. »

Je vous laisse le soin de tester par vous même ce FlowType en suivant les différentes étapes (en anglais) proposé par Simple Focus sur GitHub est de découvrir la démo proposé. J’ai moi même testé cette « fonctionnalité », et je vous propose d’observer la différence entre trois blocs; le premier avec les possibilités offertes par le FlowType.JS, le second avec celles des Media Queries et le troisième sans aucune des deux premières fonctionnalités. Cliquez sur le bloc ci-dessous puis réduisez la taille de la fenêtre de votre navigateur:

responsive-font

NOTE: Si toutefois vous avez l’habitude d’effectuer un zoom avec votre navigateur pour augmenter vous même la taille des polices, sachez que cette fonction disparait au profit de celle définie par le FlowType. Et si vous avez désactivé la prise en charge du JavaScript sur votre navigateur, rassurez vous une taille de police par défaut prendra le relais.

Share Button

Rubrique: Section 17 | Commenter




Laissez un commentaire