Définir ses points de rupture
Openweb.eu.org > Articles > Définir ses points de rupture
Abstract
Mettre en place une stratégie responsive sur son Web design implique des réflexions en amont qu’il ne faut pas négliger. Le responsive Web design est bien plus qu’une unité de pourcentage : c’est une réelle adaptation du contenant, et parfois, du contenu, en fonction du support de lecture afin de privilégier au maximum la lisibilité des informations. En s’appuyant sur un exemple concret et relativement standard, Nicolas Torres vous montre comment définir intelligemment les différents paliers d’adaptation, également appelés points de rupture.
Article
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.
À 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.
Vos commentaires
# muchos
Le 7 décembre 2012 à 09:06
Super article ! Ça change mon travail sur les images : on peut leur donner un ratio taille/compression optimal puis jouer avec leurs dimensions dans css.
En outre, c’est bien mieux de travailler avec des paliers, même si on peut sans doute trouver des "fourchettes" qui englobent un maximum de devices à peu près similaires.
# noclat
Le 7 décembre 2012 à 12:41
Il est bien de garder en tête un minimum les tailles récurrentes de devices pour ne pas afficher d’aberrations. Mais le contenu prime, quitte à avoir de légères marges latérales. À prendre en compte la cible du site également pour, pourquoi pas, faire un pallier spécifique pour iPad par exemple. Mais si le device importe plus que le contenu, c’est qu’il faut peut être songer à une application native
.
Heureux que cet article te sois utile 
!
# Enguerran
Le 7 décembre 2012 à 17:12
Très bon article.
Moi j’aime bien me représenter les points de ruptures comme des limites de segments. Et je les fixe en fonction du contenu, comme toi, pour m’assurer que tout soit bien lisible et que rien ne casse.
C’est là également que la grille fluide prend tout son intérêt, pour ceux qui ne jurent que par les points de rupture.
# Stéphanie
Le 7 décembre 2012 à 18:07
Très bel article, comme je le disais sur twitter, merci d’avoir créé une jolie référence en Français pour ce que je pense depuis un petit moment : placer les points de rupture en fonction du contenu et non en fonction de la taille des périphériques. J’avais tendance à essayer d’expliquer qu’il vaut mieux placer les breakpoints "quand le layout casse". C’est en fait dire exactement la même chose que de parler du nombre de caractères par ligne, qui sont au final, une manière de "mesurer" (avec de gros guillemets ici, comme tu le dis, ce n’est pas une mesure exacte) quand le contenu sera illisible, et donc que notre layout actuel n’est plus adapté à la taille et disposition du contenu.
# Raphael
Le 8 décembre 2012 à 18:18
Salut Nicolas. Joli article en effet
En le relisant tranquillement, j’ai l’impression que tu ne vas pas au bout de la logique et ton raisonnement. Je suis entièrement d’accord qu’il est nécessaire de raisonner en terme de contenu et de facilité de lecture, comme tu l’expliques très bien en introduction.
Par contre, dans ce cas, pourquoi choisir de se donner des repères en pixel et non dans l’unité parfaitement adaptée pour des tailles de polices... l’unité em ? C’est ce que HTML5boilerplate a fait et c’est bien expliqué sur cette ressource : http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
Au final, ton design sera *vraiment* basé sur le contenu. Attention, pour moi ce n’est pas une solution magique car dans beaucoup de maquettes graphiques, il faut bien se rendre à l’évidence, le seul critère universel compréhensible à la fois par Photoshop et un être humain demeure le pixel. Mais dans l’absolu, oui pourquoi pas.
Pour moi, cet article rejoint celui de Hteumeuleu : http://www.hteumeuleu.fr/le-probleme-du-responsive-design/ Et selon moi l’unité idéale que l’on cherche existe depuis longtemps : elle s’appelle le cm ou le mm (voire l’inch) et devrait correspondre exactement à ce qu’on attend d’elle. Sauf que les navigateurs n’en ont cure, même quand on les force à afficher 1px = 1px CSS.
Peut-être qu’un jour, quand les unités vh ou dppx seront implémentées, on pourra enfin se tourner vers celle qui est vieille comme le monde : le millimètre.
# Nicolas Torres
Le 8 décembre 2012 à 20:59
Merci Raphaël pour ces précisions et ressources. L’unité em est en effet beaucoup plus pertinente à l’égard du texte. Cela dit on perd un peu le contrôle sur les paliers d’appréciation des images. Dans un soucis de vulgarisation, j’ai fait un choix et me suis tourné vers la solution la plus communément usitée.
Je suis également d’accord qu’il y a un réel travail d’amélioration à faire sur les unités de CSS. Il en manque indéniablement, et certaines comme le "px" n’ont plus de sens, comme j’essaie de l’expliquer ici.
# Raphaël
Le 10 décembre 2012 à 08:42
Nicolas : l’unité "rpx" (pour real pixel) que tu évoques dans ton blog existe déjà : il s’agit de dppx
# Mathieu Avons
Le 10 décembre 2012 à 13:33
Je ne suis pas certain que le choix des breakpoints doivent uniquement être déterminé par les contenus (images et textes). Pour les petits sites à faible contenu, peut-être qu’on peut se le permettre dans la mesure ou l’on est capable de déterminer la taille des images, des paragraphes et des titres. Mais quand est il pour un site de news ? pour un site e-commerce ? Dans le cadre de plusieurs refontes de sites en responsive, j’ai rencontré de nombreuses problématiques qui m’ont contraintes à changer plusieurs fois mes breakpoints au cours d’un même projet. J’ai dû prendre en compte les contenus, bien évidemment mais aussi les éléments de navigation (filtres, tris, pagination...) , le header (taille du logo, navigation principale, méga-menu...), du footer et même des formats de publicité pour finalement décider de la position exacte de mes breakpoints... Je pense qu’il est difficile de faire un choix arrêté pour les breaks points au début d’un projet. Je pense qu’on peut les définir grossièrement au départ, mais qu’ils s’affinent au fur et à mesure qu’on avance (lors de la conception, lors du design et lors du code).
# noclat
Le 10 décembre 2012 à 19:52
@Raphaël : merci, autant pour moi !
@Mathieu Avons : au final, tu ajustes tes breakpoints en fonction de ton contenu, au sens large du terme — header, navigation, publicités en font partie, même s’ils ne sont pas de l’information principale. Mon exemple paraît simple, mais en réalité, il m’a fallu revenir une ou deux fois sur mes points de rupture. L’article n’a pas été écrit d’une traite
. Donc oui, c’est un travail qui peut nécessiter plusieurs passes.
# jérémie
Le 18 avril à 14:38
Merci pour cet article. En tant qu’intégrateur web et dans le cadre de responsive web design, j’ai plutôt le réflexe d’appliquer un design flexible en deçà d’un seul et unique point de rupture défini par le chef de projet.
# Dagobert Renouf
Le 7 mai à 00:39
Merci pour cet article ! Pour une fois qu’on a du contenu pertinent sur un blog français
Je m’en vais creuser dans cette direction pour rendre mon approche du responsive web design plus pertinente...
# Olivier C
Le 7 mai à 19:22
Bonjour. M’intéressant aux media queries depuis seulement un an ou deux, je ne connaissais pas vraiment les habitudes des pros et j’ai naturellement tourné mes points de rupture en fonction de ma grille : une 12 colones 1000px, que j’ai divisée en 3 points de rupture, le point le plus bas convertit les div en pourcentage. Un peu simpliste comme solution, je me pencherai sur la vôtre.
J’aime bien votre solution sur les images. Je testerai.
Répondre à cet article
Suivre les commentaires :
|
