Bonnes pratiques du responsive design
Découvrez comment bien structurer votre projet pour qu’il soit facilement responsive. Voici quelques astuces pour gagner du temps lors de la mise en place du responsive.
Au préalable, nous vous recommandons de consulter l’article Responsive design qui vous détaille le fonctionnement du responsive dans PandaSuite.
Structurer avant de régler : pensez en boîtes
La plupart des difficultés de responsive ne viennent pas d’un mauvais réglage, mais d’une structure absente. Avant de régler quoi que ce soit, décomposez votre écran en boîtes, et donnez à chaque boîte une responsabilité : un ensemble d’éléments qui va bouger, se redimensionner et réagir comme un tout.
Prenez un écran courant : un en-tête, une zone de contenu, une rangée de cartes. L’en-tête est une boîte, épinglée en haut. Le contenu est une boîte qui remplit le reste. Chaque carte est une boîte qui réunit son image, son titre et son bouton. Vous réglez alors chaque boîte une seule fois, au lieu de chaque élément un par un, et l’écran s’adapte d’un seul tenant.
L’intérêt dépasse le responsive. Une boîte bien découpée se règle une fois, se déplace et s’anime d’un bloc, se réutilise ou devient un composant, et se relie à une interaction d’un seul geste. Comme chaque boîte correspond à une partie réelle de votre écran, l’ensemble reste simple à faire évoluer.
Les deux excès à éviter sont symétriques : tout laisser indépendant, et chaque élément dérive de son côté, vous obligeant à les rattraper un par un ; ou tout réunir dans une seule grande boîte, et plus rien ne s’adapte séparément. Le travail de conception, c’est de placer les bonnes frontières : une boîte par responsabilité.
Les approches ci-dessous sont autant d’applications de ce principe : le centrage garde une composition entière comme une seule boîte, la barre fixe réserve une zone de sécurité à une boîte de contenu, et Flexbox est une boîte qui arrange ses enfants à votre place.
Ajuster le contenu automatiquement avec flexbox
Le composant Flexbox est un conteneur qui permet d’adapter automatiquement sa taille de défilement en fonction de son contenu et de disposer selon un axe principal (horizontal ou vertical) ses objets selon un même espacement.
Il est automatiquement Ajusté (Straight to Fit) ce qui permet de gérer la position des objets “enfant” sans se soucier du responsive. On aura toujours 5 px entre les éléments, peu importe leur changement de taille. Le changement de taille est décidé par les éléments eux-mêmes.
Placez vos objets à l’intérieur. Choisissez la marge entre les éléments et l’orientation (vertical ou horizontal). Flexbox vous permet également de créer une grille : il suffit de spécifier la propriété Wrap au container pour que les éléments se disposent en plusieurs lignes si nécessaire.
Mettre un fond qui s’adapte automatiquement
Une des astuces pour créer simplement une mise en page responsive est d’adapter le fond à la taille de l’écran.
Si le fond est une forme, vous pouvez l’étirer directement.
Si votre fond est une image, il faut la mettre en mode Zoomé pour conserver le ratio de l’image et s’assurer que l’image remplit l’écran parfaitement, quitte à dépasser.
Concernant l’image, il faut maintenir sa proportion. Choisissez la partie recadrée de l’image pour vous assurer de ne pas avoir d’espace et le mode Zoomé.
Centrer des objets sur toutes les tailles d’écran
Lorsque tout votre contenu doit rester solidaire, comme un seul bloc proportionnel, groupez-le et centrez ce bloc. Avec un fond responsive derrière lui, votre mise en page d’origine est conservée sur toutes les tailles d’écran.
Groupez votre contenu en une seule boîte. La taille du groupe est importante car c’est elle qui sera centrée dans la page. Choisissez l’option Ajusté et une position centrale grâce aux options Taille & Position Dynamiques.
Dégager le contenu d’une barre fixe
Si un élément fixe se superpose à votre écran, comme une barre de navigation ou un en-tête placé dans un avant-plan, cet avant-plan flotte au-dessus du contenu sans lui réserver de place. Si vous n’y prenez pas garde, votre contenu passe en dessous et se retrouve masqué sur certaines tailles d’écran.
La solution : réservez vous-même la place de la barre, puis laissez votre contenu utile se redimensionner dans l’espace qui reste :
- Passez votre écran en Stretch (Étiré) : il remplit alors l’appareil et vous pouvez placer votre contenu le long de ses bords.
- Regroupez votre contenu utile (logo, titre, texte, bouton…).
- Placez et dimensionnez ce groupe pour qu’il s’arrête au-dessus de la barre, en préservant une zone de sécurité que l’avant-plan ne recouvre jamais.
- Passez le groupe en Aspect Fit (Ajusté) : il se redimensionne alors d’un seul tenant dans la zone de sécurité, en conservant ses proportions et sans jamais empiéter sur la barre, quelle que soit la taille de l’écran.
Résultat : vous réglez un seul groupe plutôt que chaque élément, et rien ne passe sous la barre.