Découvrez comment vos objets se comportent sur d'autres tailles d'écran, les paramètres Taille & Position Dynamiques (position, redimensionnement, étirement...) et l'importance des conteneurs dont le composant Flexbox pour structurer votre mise en page.

Votre projet est créé selon un ratio fixe (fixed layout). Si vous souhaitez un design responsive sur tous les appareils, activez le mode Taille & Position Dynamiques et définissez les paramètres responsive de vos éléments visuels. Votre design s'adapte automatiquement et offre une expérience utilisateur optimisée pour chaque appareil.

A noter : le responsive ne gère pas le changement d'orientation de l'appareil. Si vous avez créé une app mobile "portrait" et que vous souhaitez une mise en page "paysage" pour les tablettes, vous pouvez créer un autre layout : Design adaptative & gestion des layout.

L'importance des conteneurs

Chaque objet s'adapte sur les écrans en fonction de ses propriétés responsive, mais également en fonction de là où il se trouve. En effet, s'il est à l'intérieur d'un conteneur, l'objet va s'adapter en fonction des propriétés de son conteneur. Il devient l'enfant de son parent, c'est un principe de hiérarchie.

Il est donc important de bien placer vos objets.

Qu'est-ce qu'un conteneur ?

Les conteneurs sont des "boîtes" au sein desquelles vous pouvez insérer un ou plusieurs objets. Il existe plusieurs conteneurs parmi les composants PandaSuite : le groupe, la zone de défilement, la galerie, le multi-état, le drag & drop, la pop-up et Flexbox.

Vous pouvez identifier quand un objet se trouve au sein d'un conteneur à l'aide du fil d'Ariane.

fil_ariane.png

Les conteneurs vous permettent de structurer votre mise en page en créant plusieurs niveaux de traitement de vos objets. Par exemple, vous pouvez placer l'en-tête, le paragraphe et les images à l'intérieur d'un conteneur. Chaque fois que vous déplacez le conteneur, tous les objets à l'intérieur de celui-ci se déplacent.

Les paramètres Taille & Position Dynamiques

Chaque objet adapte son comportement en fonction de la taille de l'écran lorsqu'il passe en mode responsive. Vous pouvez modifier deux paramètres, la position et le redimensionnement.

Position : 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.

Taille/Redimensionnement : l'objet se redimensionne horizontalement et/ou verticalement. Si le redimensionnement concerne les deux axes (horizontal et vertical), il y a 3 possibilités :

  • Etiré (Stretch) : l'objet s'étire selon la nouvelle taille du projet : il peut être déformé.
  • Ajusté (Aspect Fit) : cette option conserve le ratio de l'objet et sa proportionnalité : il maintient l'objet dans une zone limitée.
  • Zoomé (Aspect Fill) : cette option conserve le ratio de l'objet et s'assure que l'objet remplit la zone limitée quitte à dépasser de la zone.

type_de_redimensionnement.pngVous pouvez définir ces options pour vos objets à l'aide de l'option Taille & Position Dynamiques de la barre d'outils.

taille_position_dynamiques.png

En savoir plus sur les Taille & Position Dynamiques

Comportements par défaut

Regardons en détail le comportement par défaut de vos objets. Que se passe-t-il quand vous activez l'option Taille & Position Dynamiques ?

Les images

Automatiquement, vos images se redimensionnement proportionnellement. Elles sont en mode Ajusté (Aspect Fit) ce qui leur permet de conserver leur ratio d'origine (en opposition au Etiré (Stretch) qui les aurait déformé). Elles essaient de remplir l'espace disponible en conservant leur proportion sans déborder.

Par contre elles évoluent librement en termes de Position.

responsive_image.gif

Le texte

La taille de votre texte (typo) adopte un comportement similaire à une image. Il peut même être déformé. Ce qui est bizarre quand on parle de texte.

Si vous souhaitez pas de proportionnalité , il vous faut activer le mode flux depuis la fenêtre Propriétés du texte pour que le texte puisse s'adapter.

Les conteneurs hors Flexbox

Par défaut, ces conteneurs se redimensionnent proportionnellement et selon un comportement Etiré (Stretch). Ainsi les objets qui se trouvent à l'intérieur devront être correctement paramétrés pour adopter le comportement voulu. Le meilleur moyen de débuter votre mise en page responsive est de les placer en Ajusté (Aspect Fit) pour maintenir un comportement cohérent (position et taille) entre les objets enfant.

Attention la zone de défilement ne permet pas d'adapter la taille de son défilement au changement de son contenu. C'est pourquoi il faut utiliser directement le composant Flexbox.

Flexbox

Le composant Flexbox est très intéressant pour votre gestion du responsive :

  • Il adapte son défilement en fonction de son contenu et de ses marges.
  • Il s'organise en pile, il "stacke" les objets, les uns après les autres contrairement aux groupes et autres conteneurs dans lesquels on peut les placer librement.

Par défaut, Flexbox a un comportement Ajusté (Aspect Fit) ce qui veut dire que conserve le ratio du container et maintient l'objet dans la zone limitée : les objets à l'intérieur conserveront toujours le même espacement malgré les changements de taille. C'est un composant idéal pour vos premiers pas dans le responsive.

Pour aller plus loin, découvrez les Bonnes pratiques du responsive

Tester le responsive

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

preview_responsive.gif

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 1 sur 1

Créez des apps et expériences interactives sans ligne de code

Simple d'utilisation ∗ Gratuit ∗ Pas d'installation

S'inscrire (gratuit)