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

Rendre un écran responsive ne consiste pas à régler chaque objet un par un. Cela commence par une décision : quels éléments forment une même unité, et doivent donc être réunis. Le Groupe sert exactement à cela : il lie les éléments qui vivent et évoluent ensemble, ceux qui doivent bouger, se redimensionner et réagir comme un seul bloc. Une carte avec son image, son titre et son bouton forme une unité. Un champ de formulaire avec son libellé et son message d’erreur en forme une autre.

Le bon réflexe n’est donc ni de tout laisser indépendant, ni de tout réunir dans un seul grand groupe, mais de grouper par responsabilité : un groupe par ensemble d’éléments qui fonctionne comme un tout. Vous obtenez une hiérarchie de conteneurs, à la manière des poupées russes, où chaque niveau gère sa propre adaptation. Vous réglez un niveau à la fois : l’écran d’abord, puis chaque conteneur, puis les objets à l’intérieur.

Les conteneurs 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 s’adapte en fonction des propriétés de ce conteneur : la manière dont un objet se comporte dépend donc non seulement de ses propres propriétés responsive, mais aussi du conteneur dans lequel il se trouve. Les réglages d’un niveau supérieur priment sur ceux des niveaux inférieurs : un objet réglé en Stretch dans un écran ou un conteneur en Aspect Fit est mis à l’échelle avec l’ensemble du bloc et ne s’étire pas de lui-même. Ainsi, lorsqu’un élément ne s’adapte pas comme prévu, examinez d’abord les niveaux qui le contiennent, du plus haut au plus bas, plutôt que de ne modifier que l’objet.

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.

Désactivez une flèche et cette dimension cesse d’être responsive : l’objet conserve exactement la taille que vous lui avez donnée, quel que soit l’écran. Il ne grandira pas sur les grands écrans et ne rétrécira pas sur les petits, où il risque alors de déborder ou d’être coupé. C’est pourquoi une taille fixe seule donne rarement une colonne de contenu bien nette : une taille ne régit que l’objet lui-même. Pour que plusieurs éléments restent alignés, régulièrement espacés et repositionnés automatiquement lorsque l’un d’eux change, placez-les dans un conteneur de mise en page comme la Flexbox plutôt que de dimensionner chacun à la main.

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é).

Choix du mode de l’écran

Le mode de l’écran influence tout ce qu’il contient (souvenez-vous des poupées russes). Deux de ces modes conservent les proportions de votre design et le redimensionnent d’un seul tenant ; le troisième adapte la mise en page à la forme de l’appareil :

• Aspect Fit (Ajusté) (mode par défaut) : tout le design est redimensionné pour tenir dans l’appareil, en conservant ses proportions. Sur un écran au ratio différent, des marges vides apparaissent sur les côtés.
• Aspect Fill (Zoomé) : tout le design est redimensionné pour couvrir l’appareil, en conservant ses proportions. Sur un autre ratio, ce sont les bords qui sont rognés.
• Stretch (Étiré) : l’écran remplit l’appareil bord à bord, sans conserver les proportions. Le design n’est plus redimensionné d’un seul tenant : chaque élément applique alors ses propres réglages de position et de taille pour s’adapter à la nouvelle forme. Choisissez Stretch pour une mise en page pleine page, ou lorsque vous devez épingler un élément à un bord (une barre, un en-tête) et gérer une zone de contenu indépendamment.

En résumé : Aspect Fit et Aspect Fill conservent un design proportionnel (avec des marges ou un rognage), tandis que Stretch vous permet de composer l’écran bord à bord.

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.