responsive.png

Gérez votre mise en forme pour qu'elle s'adapte dynamiquement aux différents ratios d'écrans (responsive). Si vous souhaitez améliorer des éléments de votre mise en forme pour un appareil (par exemple un menu différent pour le smartphone), vous pouvez également créer des versions spécifiques (gestion adaptative).

Chaque nouveau projet a un ratio fixe par défaut. Des bandes noires apparaissent si vous l'affichez depuis un écran au ratio différent. 

Si vous souhaitez adapter dynamiquement votre mise en forme, vous avez deux possibilités :

  • Activer le responsive
  • Créer des versions spécifiques par appareil 

 A noter : le responsive ne gère pas le changement d'orientation. Un projet construit en mode paysage conservera son orientation sur un mobile par exemple.

Activer le responsive

  1. Pour activer la mise en forme dynamique (responsive), la première étape est de cocher l'option Tailles & Positions Dynamiques depuis l'icône de la barre d'outils.

    fenêtre responsive

  2.  En activant cette option, tous vos objets s'adaptent de manière intelligente. Si vous souhaitez modifier le rendu d'un objet, vous pouvez définir son comportement individuel. Sélectionnez l'objet et cliquez sur l'icône de la barre d'outils. Vous avez accès à plusieurs types de paramètres.

 

Epingler

Via l'épingle, vous autorisez le déplacement d'un objet à mesure que le bord se déplace également. 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.

 

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.

Vous pouvez contrôler le comportement d'un objet dont le redimensionnement horizontal et vertical a été activé. Vous avez accès à trois options :

  • Etiré : cette option étire l'objet selon la nouvelle taille du projet
  • Ajusté : cochée par défaut, cette option conserve le ratio de l'objet et maintient l'objet dans la zone limitée.
  • Zoomé : 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.

Cette vidéo vous sera utile pour créer votre premier écran responsive. 

 

Créer des versions spécifiques par support

Si votre projet a été initialement créé pour smartphone, il est probable que vous souhaitiez y apporter des changements s'il se destine finalement à la tablette (et inversement). Modifier le menu, choisir une autre navigation, replacer les éléments...

Pour créer une version spécifique, il est pour le moment nécessaire de créer un nouveau projet et d'utiliser les fonctionnalités de copier-coller entre projets pour replacer les éléments.

Au moment de la diffusion, ces versions seront regroupées pour rediriger automatiquement vers la bonne en fonction du support de consultation.

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

Créez votre contenu interactif dès aujourd'hui

Simple d'utilisation ∗ Gratuit ∗ Pas d'installation

COMMENCEZ MAINTENANT !