Quelques exemples responsives non standards

Cet article a été écrit il y a plus d'un an : son contenu peut être dépassé.

(image de couverture par Stéphanie Walter - CC by SA 3.0 FR)

Le responsive design, c’est une technique de conception des interfaces utilisateurs qui permet à celles-ci de s’adapter à son contexte d’affichage, quelque qu’il soit. En gros, que vous soyez sur téléphone avec une faible résolution ou sur un écran géant, le site web que vous voyez s’adapte à la place dont il dispose.

Souvent, on le pense comme quelque chose de figé en fonction du matériel. Par exemple, on pense smartphone petite taille ou ordinateur grand taille avec comme idée que l’utilisateur utilisera toujours notre interface dans le contexte prévu et en plein écran.

Mais comme souvent quand on observe des utilisateurs (c’est ma casquette d’Ux Designer), on se rend compte qu’il y a parfois des usages détournés auxquels nous n’avons pas du tout pensé. Des usages atypiques mais parfaitement logiques et justifiés dans leur contexte.

En voici quelques-uns que j’ai pu observer.

Les rotations

La rotation du téléphone/tablette

Ce n’est pas un cas étrange, ce serait même le grand classique que l’on oublie toujours quand on fait du responsive design : les utilisateurs tournent leur téléphone ! Que ce soit pour avoir une meilleure largeur de lecture ou pour mieux voir une photo, un smartphone, ça se tourne. Et on passe donc d’un format portrait à un format paysage d’un coup, sans que la page ne soit rechargée.

Sur le code CSS, il y a un impact limité : on change de résolution automatiquement et on applique les nouveaux, ça se passe très bien. Là où le bât blesse, c’est sur Javascript : souvent, on détecte la résolution et selon la largeur, on charge certaines chose ou pas. La largeur nous apprend ainsi si on est en desktop ou en mobile et on ne charge donc pas le même composant.

Sauf que quand on tourne le téléphone, la largeur devient beaucoup plus grande. À un point tel que les nouveaux smartphones comme l’iPhone Xr dépasse les points responsive de certains grilles dans la rotation. En portrait, c’est considéré comme un mobile alors qu’en paysage, on arrive sur une résolution de petite tablette : on passe d’une catégorie à l’autre et ça a des répercussions.

C’est un cas d’usage ultra-commun mais qu’on a tendance à oublier (je me suis encore fait avoir pas plus tard que la semaine dernière).

La rotation de l’écran de PC

Moins naturel, certaines personnes tournent leur écran de PC pour l’afficher au format portrait au lieu du format paysage habituel (16:9 ou 16:10). Alors là, on n’est pas du tout dans la même logique que pour le smartphone où la rotation est instantannée : la personne le tourne une bonne fois pour toute et ne s’amuse pas à le bouger toutes les deux minutes (d’ailleurs, les écrans d’ordinateurs ne détectent pas les rotations).

Mais le résultat est intéressant : au lieu d’avoir une résolution de 1920px de largeur par 1080px de hauteur par exemple, on obtient l’inverse, à savoir une résolution de 1080px de large par 1920px de haut. Et ça change beaucoup de chose car au lieu d’être considéré comme un grand écran, il va être considéré comme une petite résolution bureautique voir une résolution de tablette : attention à ne pas avoir décrété que le site web sous une certaine largeur est forcément un mobile !

Mais pourquoi donc tourner son écran d’ordinateur me demanderez-vous ? D’abord, j’ai rarement vu cette rotation sur l’écran principal, c’est souvent le secondaire qui est concerné. Les personnes que j’ai pu voir faire (moi compris) ont souvent un second (voir troisième) écran et c’était toujours sur cet écran. C’est vraiment pour des usages spécifiques, non pour l’usage quotidien.

De fait, cette rotation répond le plus souvent à un besoin spécifique comme la lecture. Entre autres choses, la largeur idéale d’un texte se trouve quelque part entre 45 et 75 caractères de large (d’après https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/, varie jusqu’à 100 caractères selon les sources). Hors, nos écrans sont plus larges que haut : on perd donc une place folle en largeur !

En tournant un écran en mode portrait, on se rapproche plus d’un format de page (plus haut que large, prenez n’importe quel bouquin) et on optimise donc la place. On a une meilleur vue de l’article / document word / PDF qu’on lit et on limite par la même le nombre de scrolls pour atteindre une information. C’est beaucoup plus pratique et reposant si vous êtes amenés à lire beaucoup de document toute la journée.

À titre personnel, j’ai utilisé un écran en mode portrait quand j’ai utilisé Firebase. Firebase propose une interface de visualisation des données qui y sont stockées sous forme de d’arborescence simple. Mais comme les données sont assez souvent courtes et les arbres très longs, on se retrouve souvent avec une grande liste de noeud les uns sous les autres et beaucoup d’espace vide à droite. Mettre l’écran en portrait me permettait de visualiser une liste d’items plus grand d’un coup et, comme l’interface changeait la couleur des données qui changeaient en temps réel, cela me permettait d’identifier rapidement ce qui bougeait sans devoir toujours scroller.

Bref, plus qu’une lubie, un écran en mode portrait peut répondre à un véritable besoin utilisateur.

Les écrans géants

La plupart des personnes qui utilisent un ordinateur ont des écrans standards : un écran de PC portable est généralement autour de 14/17 pouces, un écran de PC entre 19 et 24. C’est classique et même si les résolutions augmentent progressivement (Full HD, 4K), ça monte suffisament doucement pour pouvoir le gérer. Néanmoins, l’augmentation des résolutions sur une même largeur d’écran oblige à devoir augmenter la taille du texte pour pouvoir rester lisible (sinon c’est trop petit) et d’autres aménagements du même genre.

Dans certains secteurs/métiers, plutôt que d’avoir de multiples écrans, on retrouve un unique écran de 40 pouces que la personne adapte à sa convenance. L’avantage, c’est qu’il n’y a pas de bordure de séparation comme sur deux écrans : si vous avez besoin d’une grande largeur pour une application, vous n’êtes pas gênés par les bordures des écrans, votre écran est suffisament grand.

Le pendant de ça, c’est que l’utilisateur redimensionne lui même les interfaces utilisateurs. Oubliez ici le navigateur en plein écran : il prend par exemple la moitié de l’écran en largeur et toute sa hauteur pendant qu’à côté,l’affichage est découpé entre l’éditeur de texte et le terminal. Mais tout est possible : on peut très bien avoir plusieurs fenêtre navigateur mise les unes à côté des autres, redimensionnées pour être toutes affichées sur la même largeur et d’autres applicatons en dessous.

Plus que sur un écran de taille standard où les applications sont généralement affichées en plein écran, ici on peut vraiment avoir toutes les configurations possibles et donc toutes les tailles de navigateur possible, selon comment l’utilisateur le redimensionne.

Personnellement, j’ai vu une équipe de développeur qui avait ce type d’écran (et en était très content) et une équipe de support réseaux et télécoms : un écran aussi grand leur permettait d’avoir tous leurs indicateurs et graphiques de suivi des serveurs à un endroit et pouvait afficher plus facilement l’un deux en plein écran en cas de soucis. Je me doute que ce genre d’écran doit être utilisé ailleurs (peut-être pour des stats pour des call centers ?)

Toujours est-il qu’en plus de la résolution intrasèque de l’écran, l’utilisateur peut redimensionner sa fenêtre et que là encore, on est sur un cas où le responsive s’applique sur une configuration non standard.

Les barres à gauche

Dans le même genre que le redimensonnement des fenêtres sur des écrans géants, on part souvent du principe qu’une application est affichée pleine largeur. C’est souvent vrai mais est-ce que la zone réservée à la page web est vraiment pleine largeur ?

J’ai eu un cas amusant avec un collègue qui n’avait pas le même affichage que moi sur son poste. Pourtant dans la même entreprise avec le même matériel standard, il avait un affichage de site web différent de celui que j’avais sur mon poste. Son navigateur était pourtant en plein écran et c’était le même que le mien (Firefox), dans la même version. Il y avait pourtant un détail qui changeait.

Il gardait constamment ouvert le volet à gauche pour ces favoris plutôt que d’afficher une barre de boutons sous le champ d’url. Utilisation vraiment pas bête : il affichait ainsi une liste plus longue de ces favoris, souvent avec plus de texte que les quelques boutons que l’on trouve généralement sur la barre des favoris. Et l’ouverture de ce volet le faisait basculer sur un viewport moins large de la grille dont était fait le site web et retombait donc en format “petit desktop/tablette”.

Là encore, d’une résolution assez classique (1366*768px), on bascule sur une résolution batarde, réglée par les soins de l’utilisateur dont on n’a aucune idée. Et il n’y a pas que le volet des favoris qui peut se trouver comme ça. Certaines personnes préfèrent par exemple mettre leur barre de menu à gauche, pour gagner un peu de place en hauteur. Là encore, selon les breakppoints de la grille, l’ajout d’un élément à gauche peut faire changer d’affichage.

Responsive et perspective

Alors ce sont là quelques observations. Certaines personnes ont surement des usages différents encore qui ont des impacts sur les viewport navigateur.

Mais de ces quelques observations, j’en ai retenu plusieurs choses :

• On ne peut pas préjuger de résolutions standards. Même dans un environnement contrôlé (un parc informatique standard de société), il y a toujours moyen de tomber sur des tailles d’affichage différentes.
• Il faut penser son design (et son intégration) de façon fluide. Il peut y avoir des breakpoints de media query qui chamboulent complètement l’ordre des composant (passage du mobile au desktop par exemple) mais il faut aussi bien penser à ce qui se passe entre deux breakpoints. Toutes les résolutions sont potentiellement atteignables et l’utilisateur doit avoir une interface utilisable, quelque soit sa résolution (exemple de méthode toute bête pour gérer les tailles de police entre deux breakpoints sur Putain de code !).
• Il ne faut pas préjuger du format et tout miser sur la largeur. Même en desktop,l’utilisateur peut tourner son écran !