Le design responsif est un domaine qui ne cesse de se renouveler et d'apporter de nouvelles pistes de réflexion, souvent accompagnées d'exemples concrets de code en démonstration de leur pertinence. Nous allons nous concentrer aujourd'hui sur la problématique des onglets, sur la lisibilité et la longueur des lignes de texte affiché, sur les différents usages des dispositifs et leur taille d'écran, avant de jeter un œil sur ce que le futur nous prépare.
On utilise parfois des termes qui semblent proches mais qui recouvrent des réalités différentes, comme l'apparente similarité des designs fluides et élastiques. Un design fluide s'exprime en pourcentage, c'est la taille du viewport qui définit l'affichage. Un design élastique s'exprime en em, c'est le choix de l'utilisateur, c'est-à-dire ses paramètres d'affichage comme la taille de sa fonte ou son niveau de zoom, qui sont prépondérants.
Les onglets permettent d'afficher beaucoup de contenu à la fois sur la même page en naviguant entre eux de façon horizontale. C'est là que le bât blesse lorsqu'on essaie de les adapter à une expérience mobile, là où l'espace horizontal est bien souvent réduit. Que faire alors ?
On peut passer les onglets en items de menu. Là où une seule page en affichait une flopée, on aboutit à une série de pages (ou de cartes/div/couches empilées sur la même), seule la première étant visible. De cette manière, les onglets se transforment en accordéon. La solution de Chris Coyer permet de séparer le menu des onglets du menu de navigation principal pour qu'ils n'entrent pas en conflit.
La langue anglaise possède deux mots pour des concepts différents que le français rend en un seul : la lisibilité. En anglais, la readability concerne la compréhension du texte et de son sens (on peut calculer différents scores de lisibilité). Quant à la legibility, elle s'adresse à la dimension physique de la lisibilité : quelle fonte utiliser pour que chaque lettre (ou glyphe) soit non ambiguë à la lecture, pour que la lecture soit aisée. Nous parlons ici de cette lisibilité-là.
La vitesse de lecture d'un lecteur lambda est équivalente entre 35 et 95 caractères par ligne. Cependant, la longueur optimale des lignes varie entre 50 et 75 caractères par ligne.
Classiquement, les points de rupture, ou seuils de basculement, de votre design peuvent être contraints par la largeur de l'écran utilisé (bien que la surface utile ne soit pas toujours celle-ci).
Une autre approche consiste à prendre en compte votre contenu pour définir vos points de rupture, bien souvent des largeurs d'image, mais la longueur de vos lignes de texte peut aussi être intégrée dans vos formules suivant votre type de contenu. Marie Guillaumet appelle d'ailleurs cela du web design proportionnel, les proportions des textes et des blocs étant toujours conservées.
Plusieurs outils existent pour vous simplifier la vie quant à la visualisation de cette marge de manœuvre d'optimisation des longueurs de lignes.
Chris Coyer (encore lui) propose un bookmarklet bien pratique pour visualiser cette frontière de 25 caractères où placer votre point de rupture.
FlowType est un script javascript qui redimensionne la taille de fonte et la hauteur de ligne d'un texte qui s'inscrit dans la largeur définie par son élément parent.
On notera d'ailleurs que la hauteur de ligne (line-height) définie sans unité de mesure (ni px, ni em) peut se lire comme un multiplicateur pour tous les éléments descendants. En supprimant son unité, les calculs complexes pour connaître la hauteur relative des lignes des éléments en cascade disparaît comme par magie.
La typographie responsive entre alors en jeu : hauteur des lignes, taille des fontes, césures automatiques…
Extrapoler la distance de lecture à partir de la taille de l'écran est une autre possibilité qui s'offre à vous. Entre le téléphone que l'on tient dans sa main, la tablette sur ses genoux, dans son lit ou sur la table du petit-déjeuner, l'écran du portable, de l'ordinateur de bureau ou la télévision sur le mur du salon (sans même parler des Google Glass), chaque dispositif a ses propres usages auxquels il convient de s'adapter.
Bibliotype est définie par son auteur Craig Mod comme une (très) simple bibliothèque basée sur le HTML, les CSS et le javascript pour un prototypage rapide de la typographie appliquée aux contenus longs et la lecture sur tablette. Son menu propose un ensemble de paramètres typographiques pré-définis qui correspondent à la façon de lire actuelle de l'utilisateur (et ses préférences personnelles) : la taille de fonte en situation, ou plutôt la taille générale des éléments de la page, qu'il s'agisse de textes ou d'images (c-à-d. lit, genoux et petit-déjeuner), la justification du texte (justifié ou non), la famille de fonte (Georgia ou Helvetica), le contraste de la page (bas ou élevé), et les césures automatiques (appliquées ou pas). En donnant à l'utilisateur le pouvoir de décision sur ces paramètres (les sauvegarder dans son profil pour les connexions suivantes est un must), cette bibliothèque offre un aperçu vraiment utile de ce qui peut être fait pour s'adapter pleinement à l'usage réel du dispositif, particulièrement les tablettes.
Chaque dispositif propose aussi ses propres moyens d'interaction (clavier, souris, écran tactile) avec lesquels il faut composer. Des outils tels que Modernizr apportent un aperçu salvateur des fonctionnalités supportées.
L'éclairage ambiant dans lequel le dispositif est utilisé peut rendre sa lecture très difficile. Le niveau 4 des media queries propose le paramètre luminosity qui peut prendre trois valeurs discrètes (dim, normal et washed, respectivement pour un environnement mal éclairé, idéal ou très lumineux). L'idée est ici de pouvoir ajuster le contraste et la luminosité du design pour s'adapter à l'environnement de l'utilisateur, ce qui existe déjà dans le monde des applications. Cependant, la luminosité de l'écran est habituellement déjà traitée par le dispositif lui-même, et de plus, chaque dispositif a sa propre sensibilité, ce qui rend cette fonctionnalité difficile à utiliser en soi.
Rappelez-vous de l'expérience de l'édition du soir : tous les jours à 18 heures, l'affichage change pour refléter l'heure du jour. Une très belle idée, mais que se passe-t-il si l'utilisateur a installé f.lux pour gérer la chaleur de son écran ? L'environnement paramétré du dispositif va entrer en conflit avec le design du site, et le résultat risque de ne pas être celui escompté.
En détectant la distance du visage du lecteur à l'écran pour adapter à la fois la hauteur des lignes et la taille de la fonte, Marko Dugonjić propose une façon de penser véritablement hors du cadre. Headtrackr, sa bibliothèque javascript, utilise la webcam pour enregistrer la tête de l'utilisateur, l'API webRTC (web Real-Time Communication) et le standard HTML5 getUserMedia, donc pour l'instant uniquement supporté par Firefox et Chrome.
Si vous avez besoin d'un design directement responsif sans devoir gérer vos points de rupture et toutes les subtilités inhérentes à ce design, vous pouvez en acheter un sur une place de marché de thèmes responsifs. Qu'ils soient exclusifs (vous êtes le seul utilisateur de ce design) ou non exclusifs (n'importe qui peut utiliser le même design que vous), ils vous permettent de vous concentrer sur votre contenu et sur les spécificités de votre site, quitte à le modifier quelque peu. Le site Gridgum vers lequel je pointe vous permet aussi de monétiser vos designs responsifs si vous en créez de votre côté.
Un point de vocabulaire
On utilise parfois des termes qui semblent proches mais qui recouvrent des réalités différentes, comme l'apparente similarité des designs fluides et élastiques. Un design fluide s'exprime en pourcentage, c'est la taille du viewport qui définit l'affichage. Un design élastique s'exprime en em, c'est le choix de l'utilisateur, c'est-à-dire ses paramètres d'affichage comme la taille de sa fonte ou son niveau de zoom, qui sont prépondérants.
Onglets
Les onglets permettent d'afficher beaucoup de contenu à la fois sur la même page en naviguant entre eux de façon horizontale. C'est là que le bât blesse lorsqu'on essaie de les adapter à une expérience mobile, là où l'espace horizontal est bien souvent réduit. Que faire alors ?
On peut passer les onglets en items de menu. Là où une seule page en affichait une flopée, on aboutit à une série de pages (ou de cartes/div/couches empilées sur la même), seule la première étant visible. De cette manière, les onglets se transforment en accordéon. La solution de Chris Coyer permet de séparer le menu des onglets du menu de navigation principal pour qu'ils n'entrent pas en conflit.
Lisibilité et longueur de lignes
La langue anglaise possède deux mots pour des concepts différents que le français rend en un seul : la lisibilité. En anglais, la readability concerne la compréhension du texte et de son sens (on peut calculer différents scores de lisibilité). Quant à la legibility, elle s'adresse à la dimension physique de la lisibilité : quelle fonte utiliser pour que chaque lettre (ou glyphe) soit non ambiguë à la lecture, pour que la lecture soit aisée. Nous parlons ici de cette lisibilité-là.
La vitesse de lecture d'un lecteur lambda est équivalente entre 35 et 95 caractères par ligne. Cependant, la longueur optimale des lignes varie entre 50 et 75 caractères par ligne.
Classiquement, les points de rupture, ou seuils de basculement, de votre design peuvent être contraints par la largeur de l'écran utilisé (bien que la surface utile ne soit pas toujours celle-ci).
Une autre approche consiste à prendre en compte votre contenu pour définir vos points de rupture, bien souvent des largeurs d'image, mais la longueur de vos lignes de texte peut aussi être intégrée dans vos formules suivant votre type de contenu. Marie Guillaumet appelle d'ailleurs cela du web design proportionnel, les proportions des textes et des blocs étant toujours conservées.
Plusieurs outils existent pour vous simplifier la vie quant à la visualisation de cette marge de manœuvre d'optimisation des longueurs de lignes.
Chris Coyer (encore lui) propose un bookmarklet bien pratique pour visualiser cette frontière de 25 caractères où placer votre point de rupture.
FlowType est un script javascript qui redimensionne la taille de fonte et la hauteur de ligne d'un texte qui s'inscrit dans la largeur définie par son élément parent.
On notera d'ailleurs que la hauteur de ligne (line-height) définie sans unité de mesure (ni px, ni em) peut se lire comme un multiplicateur pour tous les éléments descendants. En supprimant son unité, les calculs complexes pour connaître la hauteur relative des lignes des éléments en cascade disparaît comme par magie.
La typographie responsive entre alors en jeu : hauteur des lignes, taille des fontes, césures automatiques…
Taille des écrans et usages
Extrapoler la distance de lecture à partir de la taille de l'écran est une autre possibilité qui s'offre à vous. Entre le téléphone que l'on tient dans sa main, la tablette sur ses genoux, dans son lit ou sur la table du petit-déjeuner, l'écran du portable, de l'ordinateur de bureau ou la télévision sur le mur du salon (sans même parler des Google Glass), chaque dispositif a ses propres usages auxquels il convient de s'adapter.
Bibliotype est définie par son auteur Craig Mod comme une (très) simple bibliothèque basée sur le HTML, les CSS et le javascript pour un prototypage rapide de la typographie appliquée aux contenus longs et la lecture sur tablette. Son menu propose un ensemble de paramètres typographiques pré-définis qui correspondent à la façon de lire actuelle de l'utilisateur (et ses préférences personnelles) : la taille de fonte en situation, ou plutôt la taille générale des éléments de la page, qu'il s'agisse de textes ou d'images (c-à-d. lit, genoux et petit-déjeuner), la justification du texte (justifié ou non), la famille de fonte (Georgia ou Helvetica), le contraste de la page (bas ou élevé), et les césures automatiques (appliquées ou pas). En donnant à l'utilisateur le pouvoir de décision sur ces paramètres (les sauvegarder dans son profil pour les connexions suivantes est un must), cette bibliothèque offre un aperçu vraiment utile de ce qui peut être fait pour s'adapter pleinement à l'usage réel du dispositif, particulièrement les tablettes.
Chaque dispositif propose aussi ses propres moyens d'interaction (clavier, souris, écran tactile) avec lesquels il faut composer. Des outils tels que Modernizr apportent un aperçu salvateur des fonctionnalités supportées.
Jetons un œil dans le futur
L'éclairage ambiant dans lequel le dispositif est utilisé peut rendre sa lecture très difficile. Le niveau 4 des media queries propose le paramètre luminosity qui peut prendre trois valeurs discrètes (dim, normal et washed, respectivement pour un environnement mal éclairé, idéal ou très lumineux). L'idée est ici de pouvoir ajuster le contraste et la luminosité du design pour s'adapter à l'environnement de l'utilisateur, ce qui existe déjà dans le monde des applications. Cependant, la luminosité de l'écran est habituellement déjà traitée par le dispositif lui-même, et de plus, chaque dispositif a sa propre sensibilité, ce qui rend cette fonctionnalité difficile à utiliser en soi.
Rappelez-vous de l'expérience de l'édition du soir : tous les jours à 18 heures, l'affichage change pour refléter l'heure du jour. Une très belle idée, mais que se passe-t-il si l'utilisateur a installé f.lux pour gérer la chaleur de son écran ? L'environnement paramétré du dispositif va entrer en conflit avec le design du site, et le résultat risque de ne pas être celui escompté.
En détectant la distance du visage du lecteur à l'écran pour adapter à la fois la hauteur des lignes et la taille de la fonte, Marko Dugonjić propose une façon de penser véritablement hors du cadre. Headtrackr, sa bibliothèque javascript, utilise la webcam pour enregistrer la tête de l'utilisateur, l'API webRTC (web Real-Time Communication) et le standard HTML5 getUserMedia, donc pour l'instant uniquement supporté par Firefox et Chrome.
Un design responsif prêt à l'emploi
Si vous avez besoin d'un design directement responsif sans devoir gérer vos points de rupture et toutes les subtilités inhérentes à ce design, vous pouvez en acheter un sur une place de marché de thèmes responsifs. Qu'ils soient exclusifs (vous êtes le seul utilisateur de ce design) ou non exclusifs (n'importe qui peut utiliser le même design que vous), ils vous permettent de vous concentrer sur votre contenu et sur les spécificités de votre site, quitte à le modifier quelque peu. Le site Gridgum vers lequel je pointe vous permet aussi de monétiser vos designs responsifs si vous en créez de votre côté.
Responsive Web Design: some paths to follow (en anglais)
Diseño responsivo: unos caminos a seguir (en espagnol)
Design responsivo: uns caminhos a seguir (en portugais)
Aucun commentaire:
Enregistrer un commentaire