Responsive design

Découvrez comment créer des écrans responsive qui s'adaptent à toutes les tailles d'écrans et tous les appareils. 

Introduction au responsive design

Le responsive design est une approche de conception web qui vise à ce que l'affichage d'un site ou d'une application s'adapte automatiquement à la taille de l'écran de l'utilisateur, qu'il utilise un ordinateur de bureau, une tablette ou un smartphone.

Le fixed layout par défaut

Lorsque vous créez un projet dans PandaSuite, celui-ci est en fixed layout. Chaque projet est conçu selon un ratio déterminé par une taille d'écran : le projet peut s'agrandir mais ce ratio ne change pas, quelle que soit la taille de l'écran. Des bandes noires latérales peuvent ainsi apparaître lorsque vous visualisez votre application sur un autre ratio d'écran.

Pour offrir une expérience utilisateur optimale sur tous les appareils, il est essentiel d'activer le mode Responsive. Cela permet à votre design de s'adapter automatiquement à différentes tailles d'écran.

Gestion de l'orientation

Néanmoins, le mode responsive ne gère pas le changement d'orientation de l'appareil. Par exemple, si vous avez créé une app mobile de type portrait et que vous souhaitez une mise en page de type paysage pour les tablettes, il sera nécessaire de créer un nouveau layout.

Certains composants gèrent le changement d'orientation comme le composant Vidéo. Il est également possible de simplement afficher un message pour inciter l'utilisateur à changer d'orientation (via une condition sur la taille).

Activer le mode responsive

Pour activer le responsive, sélectionnez votre projet et rendez-vous dans les propriétés. 

Cliquez sur le bouton Oui à côté de Responsive. 

Néanmoins, pour rendre un projet responsive, il ne suffit pas d'appuyer sur ce bouton et magie : le projet devient responsive ! Il est nécessaire de définir les propriétés responsive des objets qui le composent. 

Propriétés responsive des écrans et des objets

Rôle des conteneurs

Avant de définir les propriétés responsive des objets, il est indispensable de comprendre le rôle des conteneurs. Ils agissent comme des "boîtes" dans lesquelles vous insérez un ou plusieurs objets. Lorsque le mode responsive est activé, chaque objet à l'intérieur d'un conteneur s'adapte en fonction des propriétés de ce conteneur, suivant un principe de hiérarchie. 

Cela signifie que la manière dont un objet se comporte dépend non seulement de ses propres propriétés responsive, mais aussi de celles du conteneur dans lequel il se trouve.

À la manière des poupées russes, nous vous recommandons de définir d'abord les paramètres responsive de chaque écran, avant de travailleur sur les conteneurs, puis sur les objets qui se trouvent à l'intérieur.

Voici les principaux conteneurs dans PandaSuite : les écrans, le groupe, la zone de défilement, la galerie, le multi-état, le drag & drop, la pop-up et Flexbox.

Choix des propriétés

Sélectionnez un objet et rendez-vous dans ses propriétés.

Vous pouvez modifier deux paramètres, la position et le redimensionnement.

Position

Grâce à l'épingle, vous autorisez le déplacement d'un objet à mesure que le bord se déplace également. L'objet se déplace en fonction de la différence entre la taille d'origine (de création) et la taille de l'appareil. Choisissez une ou plusieurs directions.

Si vous épinglez un objet à un bord non-opposé, la distance entre l'objet et le bord reste fixe. Par exemple, si votre objet est placé à 100 pixels du bord droit et que vous activez l'épingle sur ce bord, votre objet restera toujours à 100 pixels de ce bord.

Si vous épinglez un objet à un bord opposé, la position de l'objet évolue afin de conserver la même proportion entre la distance du centre de l'objet et le bord opposé. Le meilleur exemple est un objet centré entre le bord droit et le gauche et épinglé à ces bords conserve sa position centrale quel que soit le changement de taille.

Un autre exemple est si, dans un projet de 1000px de largeur, un objet est situé à 200px du bord gauche et à 800px du bord droit. En étant épinglé à ces deux bords, il restera à 20% du bord gauche et 80% du bord droit dans toutes les mises en forme.

Taille / Redimensionnement

Le redimensionnent d'un objet est contrôlé par les deux flèches dans la fenêtre. Par défaut, les deux flèches sont activées ce qui indique que la taille de votre objet évolue proportionnellement avec la taille du projet. Un objet dont la taille est de 20% de la hauteur du projet conserva cette même proportion quelle que soit la taille du projet.

Si le redimensionnement concerne l'axe horizontal et vertical, vous avez trois modes :

• Stretch (Étiré) : L'objet s'adapte pour remplir tout l'espace disponible, ce qui peut le déformer.
• Aspect Fit (Ajusté) : L'objet est redimensionné pour s'adapter à l'espace disponible tout en conservant son ratio d'origine. Il reste entièrement visible, sans débordement.
• Aspect Fill (Zoomé) : L'objet est redimensionné pour couvrir tout l'espace disponible tout en conservant son ratio. Cela peut entraîner un débordement.

Comportements responsive par défaut

Lorsque le mode responsive est activé, les objets adoptent un comportement par défaut en fonction de leur type. Voici ce comportement par défaut : 

• Les écrans : par défaut, ils sont configurés en Aspect Fit pour s'assurer que tout est toujours visible et proportionné.
• Les images : les images sont traitées avec soin pour s'assurer qu'elles ne sont jamais déformées. Elles s'ajustent automatiquement à l'espace disponible tout en conservant leur ratio.
• Le texte : par défaut, le texte peut s'étirer ou se comprimer. Pour éviter cela, utilisez le Mode flux, qui ajuste le texte de manière à ce qu'il soit toujours lisible.
• Les conteneurs : par défaut, ils sont configurés en mode Stretch (étiré).

Zoom sur le composant Flexbox

Le composant Flexbox est un outil puissant dans le monde du responsive design. C'est un conteneur qui distribue ses enfants en leur imposant leur position. Ce qui permet dans une évolution de taille d'un des enfants, d'avoir les positions des autres éléments qui s'adaptent aussi.

C'est donc un outil qui permet une mise en page dynamique et flexible. Dans PandaSuite, Flexbox s'adapte automatiquement en fonction de son contenu, garantissant que votre design reste cohérent et harmonieux, quelles que soient les dimensions de l'écran.

Tester le responsive

Dans l'Aperçu, redimensionnez vos écrans à l'aide des poignées pour visualiser le comportement sur les principaux appareils.