Le mythe des périphériques
Selon une légende urbaine, les points de rupture sont égaux à la taille d’écran des périphériques (devices en anglais). Ceux qui ont d’abord écrit et utilisé un tel manifeste l’ont fait à une époque où l’iPad et l’iPhone dominaient de loin leurs marchés respectifs. Facile donc : on adapte à ces périphériques qui représentent 90% de la navigation portable, et c’est terminé ! Oui, mais non. Aujourd’hui, ce n’est plus aussi simple.
Beaucoup d’appareils sont désormais viables pour naviguer sur le Web. Je pense à la tablette Nexus 7, aux smartphones Galaxy S3 et Galaxy Note, aux Nokia Lumia, etc. soit autant de résolutions différentes. Vous pouvez faire le choix de traiter toutes ces dimensions une par une. Vous pouvez aussi faire le choix de penser les points de rupture en fonction de votre contenu, et ainsi offrir une lisibilité optimale quel que soit l’appareil utilisé.
Une histoire de contenu
Je fais volontairement abstraction des marges dans les mesures données car elles sont négligeables et que leur absence n’empêche pas la compréhension. Notez donc que les valeurs spécifiées sont approximatives à quelques dizaines de pixels près.
Le texte
Les arcanes typographiques spécifient qu’un texte possède une lisibilité optimale lorsqu’il est décomposé en lignes de 55 à 75 sigles. C’est une contrainte usuelle à respecter pour garantir un confort de lecture à vos visiteurs. Cependant, sur un mobile en mode portrait, il est impossible de faire tenir autant de caractères avec une taille de police convenable. Ce n’est pas bien grave, puisque on ne peut pas vraiment faire autrement. Le premier point de rupture à définir va donc être celui qui correspond à une colonne simple, qui respecte les 55 à 75 caractères de vos textes. Selon certains tests et analyses, cette valeur peut varier et aller jusqu’à 90/100. Dans notre exemple, un site éditorial de type blog, la lecture peut être longue et donc fastidieuse sur mobile. Je définis donc une taille de texte à 14 pixels – en-dessous, les yeux se fatiguent très vite, et au-dessus, le rythme de lecture est saccadé –, et j’effectue quelques tests pour parvenir à une taille optimale maximale de 600px.
Cette première taille ne correspond évidemment à aucun périphérique, et est plus large que l’écran d’un smartphone. Comme dit plus haut, cette contrainte est incontournable. On obtient alors une configuration semblable à celle-ci :
.wrapper {
box-sizing: border-box; // pour appliquer un padding fixe
width: 100%;
max-width: 600px;
margin: auto; // on centre lorsque l'écran est plus large que
600px
padding: 0 0.75em; // 0.75em = 1/2 du line-height
}
De la même façon, j’obtiens des paliers de 600px maximum pour une colonne de texte dans le pied de page. Pour le passage à deux colonnes, on ne va pas attendre 1200px car on étalera nos lignes sur une trop grande largeur. Il vaut mieux les diminuer un peu, quitte à ne pas atteindre les 55 caractères par ligne, pour scinder le bloc en deux colonnes. Disons 800px – un palier qu’on retrouvera pour les images sur le point suivant – pour respecter l’harmonie et ne pas multiplier sans raison valable les configurations de disposition possibles.
De 600px à 800px, on centrera le bloc de contenu pour éviter d’étirer nos textes. Au delà de 800px, on réorganisera le contenu relatif à l’article pour les positionner à gauche et à droite de ce contenu.
Les images
Mes images font 312px de large. En réalité, elles font le double, mais sont d’une faible qualité pour garantir un affichage correct sur écran Retina en perdant très peu de qualité lorsqu’elles sont affichées en 312px, preuve à l’appui. Cette méthode a un avantage non négligeable : mon canvas d’image peut dépasser les 312px, dans la mesure du raisonnable, sans flouter l’image. Je peux donc définir mon palier avec flexibilité.
En reprenant mon premier palier de texte, qui était 600px, je me rends compte que la qualité de mes images ne sera pas appréciable sur écran Retina. Je vais donc les placer sur deux colonnes. Je peux aisément aller jusqu’à 400px de large en une colonne. Le passage à deux colonnes s’effectue alors à 400px, ce qui nous laisse à peine 200px pour une image. C’est un peu court, mais c’est correct. Si les images jouaient un rôle plus important sur la compréhension, nous aurions revu la taille d’appréciabilité et certainement défini un palier plus haut. Ici, ça convient, nous gardons donc 400px comme palier de dédoublement des colonnes pour les images. Par extrapolation, on affichera 3 images par ligne à partir de 800px.
Pour résumer
Nous avons donc défini 3 paliers : 400, 600 et 800px.
- Jusqu’à 400px : toutes les sections s’affichent sur une unique colonne fluide.
- De 400 à 600px : la largeur reste fluide, le texte reste sur une colonne tant dans l’article que dans le pied de page, et les images s’affichent sur 2 colonnes.
- De 600 à 800px : on fixe la largeur à 600px et on centre le tout, car on ne fera rien de très pertinent de ces 200px supplémentaires ici.
- Au-delà de 800px : on affiche les informations de l’article ainsi que les images sur 3
colonnes, et on scinde en deux le pied de page. On limitera l’affichage à 984px, qui
correspond à la taille de la maquette initiale.
Vous pouvez allez plus loin et penser un affichage pour grand écran, comme par exemple en augmentant la taille globale du texte ou en mettant des blocs côte à côte.
[画像:Affichage de la démo sur différents périphériques]
À retenir
- Les points de rupture se définissent pour s’adapter à votre contenu, et non à des périphériques spécifiques.
- 55 à 75, voire 90 caractères par ligne pour garantir un bon confort de lecture sur les paragraphes.
- Pensez l’intégration et la conception des images en amont pour être sûr de respecter l’appréciation de celles-ci. N’oubliez pas les écrans HD.
- Le responsive Web design n’est pas une feature, mais une base d’accessibilité indispensable.
Conclusion
Vous avez désormais les bases pour trouver les points de rupture qui correspondent réellement à votre contenu, et non à un appareil. Le marché est trop fragmenté pour favoriser un appareil plutôt qu’un autre. Gardez en mémoire que le responsive Web design n’est pas une réponse ergonomique complète – à l’instar d’une application native –, mais une solution d’adaptabilité pour garantir un minimum de confort sur tous les appareils.