ArcGIS 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 repose sur une conception adaptative, dans laquelle vous pouvez créer des conceptions uniques pour des écrans 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 (Automatique) 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é.
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 en manipulant les widgets interactifs et dynamiques pour voir comment ils fonctionnent.
Liste en attente
Pour supprimer un widget ou un groupe d’écrans d’une mise en page d’un appareil, 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 la liste en attente.
Remarque :
Les widgets de la liste en attente enregistrent la plupart de leurs paramètres, y compris l’ensemble des paramètres de contenu, leurs propres paramètres de style, tels que l’arrière-plan et les bordures, et tous les paramètres d’action. Les widgets ne conservent pas les paramètres de mise en page généraux de l’onglet Style, tels que les paramètres de taille et de position.
La liste en attente apparaît dans l’onglet Pending (Attente) du volet Insert widget (Insérer un widget). Les widgets qui se trouvent dans l’application dans l’un des modes d’appareil au moins apparaissent dans une liste sous Other devices used (Autres appareils utilisés). Les icônes suivantes indiquent les modes d’appareil de chaque widget :
: utilisation sur les appareils grand et moyen écran.
: utilisation sur les appareils grand et petit écran.
: utilisation sur les appareils moyen et petit écran.
: utilisation sur les appareils grand écran.
: utilisation sur les appareils moyen écran.
: utilisation sur les appareils petit écran.
Les widgets qui ne se trouvent pas actuellement dans la zone d’affichage dans l’un des modes d’appareil apparaissent sous All devices unused (Tous les appareils inutilisés). Cliquez sur Delete (Supprimer) pour supprimer ces widgets de la liste en attente.
Actions Messages et liste en attente
Les widgets que vous déplacez vers la liste en attente ne peuvent pas être les cibles des actions Messages.
Lorsque vous ajoutez des actions Messages sur l’onglet Action des paramètres d’un widget, les widgets sur la liste en attente ne sont pas répertoriés en tant que cibles disponibles.
Si vous déplacez dans la liste en attente un widget qui est déjà la cible d’une action Messages, cette dernière est désactivée uniquement pour les modes de l’appareil pour lesquels vous avez déplacé le widget dans la liste en attente. Les icônes apparaissent sur l’onglet Action des paramètres du widget source, qui indiquent le mode de l’appareil où l’action est configurée et active.
En mode Express, vous pouvez uniquement afficher les actions Messages de la mise en page actuelle du mode de l’appareil que vous visualisez.
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.
Meilleures pratiques de conception de tableaux de mises en page réactives
Lorsque vous concevez des mises en page pour vos expériences, prenez en compte les pratiques recommandées suivantes :
- Choisissez un type de mise en page adapté.
- Les mises en page fixes sont appropriées si vous souhaitez que les éléments restent en place et ne circulent pas en fonction de la taille du contenu. Elles conviennent pour les conceptions de tableau de bord et les boîtes de dialogue modales.
- Les mises en page de flux permettent au contenu de s’empiler et de changer automatiquement en fonction de la taille d’écran. Elles sont recommandées pour le contenu réactif, avec défilement, telles que les pages longues comportant beaucoup de texte, d’images et de cartes.
- Les widgets Layout (Mise en page) incluent les widgets Row (Ligne), Column (Colonne) et Grid (Grille) qui sont adaptés aux mises en page structurées complexes. Chacun de ces widgets autorise un placement flexible et un alignement des widgets dans un conteneur.
- Familiarisez-vous avec les options de définition de la taille et de la position et appliquez-les de manière stratégique.
- Les pixels (px) sont recommandés si vous souhaitez une taille précise (par exemple, avec les en-têtes, pieds de page et autres éléments qui doivent conserver la même taille sur différentes tailles d’écran). Cette unité convient aux éléments des mises en page de bureau et des éléments à taille fixe.
- Le pourcentage (%) est recommandé si vous souhaitez que la hauteur et la largeur changent en fonction des conteneurs parents. L’utilisation du pourcentage donne à vos éléments une certaine souplesse dans les différentes tailles d’écran. Cette unité convient aux tailles d’écran adaptives qui varient selon les tablettes et smartphones.
- Auto permet à Experience Builder de déterminer la taille et la position des widgets en fonction de leur contenu. Cette option convient pour le texte ou les images dynamiques si l’espace requis pour faire tenir le contenu peut changer. Utilisez Auto si la taille d’un élément est censée varier.
- Avec Stretch (Étirement), un élément remplit tout l’espace de son conteneur. Cette option convient pour les images d’arrière-plan, les cartes et tous autres contenus qui doivent occuper intégralement l’espace disponible. Soyez prudent si vous utilisez cette option avec des mises en page pour petit écran. Étirer plusieurs widgets peut surcharger les petits écrans.
- Commencez par la mise en page pour grands écrans, puis passez aux mises en page plus petites.
- Une fois que vous avez créé une mise en page pour grand écran, utilisez l’outil du mode de périphérique pour l’afficher sur des appareils avec écran de petite et moyenne tailles.
- Si nécessaire, utilisez l’option de mise en page Custom (Personnalisé) pour modifier la mise en page des appareils avec écran de petite et moyenne tailles.
- Les mises en page automatiques synchronisent les éléments sur les différentes tailles d’écran, mais risquent de ne pas gérer aussi bien les dispositions de widgets complexes.
- Les mises en page personnalisées permettent de repositionner, masquer ou redimensionner les widgets pour pouvoir les utiliser plus facilement sur les écrans plus petits.
- Gardez une cohérence dans les mises en page.
- Utilisez un espacement et un alignement cohérents pour créer une expérience visuellement cohérente.
- Appliquez des styles de police, couleurs, marges de remplissage et écarts uniformes entre les mises en page.
- Configurez les en-têtes et pieds de page à l’aide des outils Header (En-tête) et Footer (Pied de page) dans les paramètres de page afin qu’ils se comportent de manière cohérente entre les pages.
- Prévisualisez votre application et testez-la.
- Utilisez l’outil Live view (Vue dynamique) pour tester votre mise en page dans le générateur.
- Utilisez l’outil Preview (Aperçu) pour prévisualiser votre application dans une fenêtre de navigateur. Vous pouvez redimensionner la fenêtre du navigateur pour prévisualiser votre application sur différentes tailles d’écran.
- Sur les écrans plus petits, assurez-vous que les éléments ne débordent pas et ne se chevauchent pas, que les widgets sont utilisables et lisibles et que les régions avec défilement ne bloquent pas une navigation ou des boutons critiques.
Vous avez un commentaire à formuler concernant cette rubrique ?