Experience Builder permet de configurer et créer différentes mises en page pour vos expériences Web de sorte qu’elles fonctionnent correctement sur toutes les tailles d’écran. La configuration de chaque mise en page distincte repose sur une conception adaptative, au cours de laquelle vous pouvez créer des conceptions uniques pour des tailles d’écran de petite, moyenne et grande tailles. Chaque mise en page représente une adaptation de l’expérience, ce qui offre une plus grande flexibilité pour une personnalisation plus poussée de l’application et une meilleure utilisation de la taille d’écran et des différents contenus.
Les modèles sont créés de sorte à fonctionner avec plusieurs tailles d’écran. Lorsque vous sélectionnez un modèle d’application plein écran vierge ou de page déroulante vierge, sa mise en page Auto est activée pour les périphériques à petit et moyen écrans. De la sorte, tous les widgets restent synchronisés avec les widgets de la mise en page du périphérique à grand écran et sont organisés automatiquement.
Pour créer une mise en page distincte pour un périphérique à petit ou moyen écran, cliquez sur le bouton Custom (Personnalisé) en regard de la mise en page de la page ou de la fenêtre. Vous pouvez alors disposer et redimensionner manuellement les widgets et fenêtres du périphérique d’écran sélectionné. Pour supprimer un widget ou un groupe d’écrans d’une mise en page d’un petit périphérique, cliquez sur le bouton Move to the pending list (Déplacer vers la liste en attente) 
dans sa barre d’outils. Le widget ou le groupe d’écrans est ainsi supprimé de la zone d’affichage du périphérique actuel et sa configuration est enregistrée au cas où vous auriez besoin de la rajouter à la mise en page. Une fois que vous avez activé l’option de mise en page personnalisée, si d’autres widgets sont ajoutés à d’autres modes de périphérique, ils ne sont pas ajoutés au périphérique actuel. Vous pouvez les ajouter manuellement à partir de l’onglet Pending (Attente) dans le volet Insert widget (Insérer un widget).
Si vous mettez à jour des mises en page pour des périphériques à petit écran, les grands volets de configuration suivants qui apparaissent sinon sur la zone d’affichage apparaissent à la place dans les marges du générateur :
- Volet Quick style (Style rapide) des widgets Button (Bouton), Divider (Séparateur) et Views Navigation (Navigateur de vues)
- Volet Dynamic content (Contenu dynamique)
- Volet Add widget (Ajouter un widget) des widgets Placeholder (Espace réservé) et Grid (Grille)
- Volets Select template (Sélectionner un modèle) des pages, en-têtes, pieds de page, fenêtres, blocs et grilles
Conseil :
Pour tester les mises en page pour différents périphériques et tailles d’écran, cliquez sur Live view (Vue en temps réel) dans la barre d’outil du générateur. Live view (Vue dynamique) permet de vérifier que le contenu est adapté correctement avant toute opération d’enregistrement et de publication du contenu. Vous pouvez également expérimenter en ajustant certains paramètres et manipuler les widgets interactifs et dynamiques pour voir comment ils fonctionnent.
Conseil :
Pour en savoir plus sur les paramètres d’optimisation mobile Experience Builder, essayez le didacticiel Optimiser une mise en page d’application pour les mobiles.
Vous avez un commentaire à formuler concernant cette rubrique ?