Bonnes pratiques du responsive

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.

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 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

Si votre fond est responsive, vous pouvez centrer tous vos objets et conserver ainsi votre mise en page d'origine.

Groupez tous vos objets ensemble. La taille du groupe est importante car c'est lui qui sera centré dans la page. Choisissez l'option Ajusté et une position centrale grâce aux options Taille & Position Dynamiques. 

Le contenu est groupé ou comme ici placé dans un container (Galerie). L'option Ajusté est activée.

Placez les objets "enfants" en option Ajusté