Optimiser une mise en page d’application pour les mobiles
Examiner l’application
Vous allez d’abord examiner l’application pour savoir quels éléments doivent être adaptés aux appareils petit écran.
- Connectez-vous à votre compte d’organisation ArcGIS.
Remarque :
Si vous ne disposez pas d’un compte d’organisation, consultez les options disponibles pour accéder aux logiciels.
- Sur le ruban, cliquez sur le bouton d’applications et sélectionnez Experience Builder.
Conseil :
Vous pouvez également accéder directement au site Experience Builder.
Experience Builder s’affiche. La page d’accueil répertorie les expériences récentes que vous avez créées.
- Cliquez sur le bouton Create new (Créer).
Une liste de modèles apparaît. Les modèles possèdent des mises en page et widgets préconfigurés que vous pouvez modifier. Vous allez créer une application avec un modèle d’application sur les informations du parc créé pour ce didacticiel.
- Cliquez sur l’onglet ArcGIS Online.
- Dans la barre de recherche, saisissez Great Smoky Mountains National Park owner:Learn_ArcGIS. Dans la liste des résultats, pour Great Smoky Mountains National Park (Tutorial) (Parc national des Great Smoky Mountains (Didacticiel)), cliquez sur Create (Créer).
Conseil :
Le modèle approprié comporte une miniature qui présente une photographie du parc. Vous pouvez voir le nom complet du modèle en pointant dessus.
Une application est créée à l’aide du modèle. Vous êtes dirigé vers un éditeur, dans lequel vous pouvez apporter les changements nécessaires.
L’application comporte sept pages, accessibles à partir de la page d’accueil. Même si l’application semble terminée, elle n’est conçue que pour les écrans d’ordinateur. Vous allez modifier l’affichage pour voir à quoi elle ressemble sur les appareils petit écran.
- Sur le ruban, cliquez sur le bouton Edit your page for small screen devices (Mettre à jour votre page pour les appareils petit écran).
Remarque :
Le menu contextuel des dimensions en regard du bouton vous permet de prévisualiser votre application selon des tailles d’écran plus précises. Vous ne pouvez toutefois réorganiser la mise en page que pour les trois modes d’appareil les plus courants.
La mise en page de l’application change.
De nombreux éléments de l’application sont maintenant trop petits pour que le texte soit lisible et le texte du titre n’est plus adapté à l’en-tête.
Par défaut, l’en-tête et le corps de l’application ont été ajustés avec la mise en page Auto (Automatique). Dans cette mise en page, Experience Builder effectue automatiquement les modifications. Vous devez apporter plusieurs changements personnalisés afin que l’application soit optimisée pour les appareils mobiles.
Mettre à jour le corps
La page d’accueil de l’application comporte deux composants : l’en-tête et le corps. L’en-tête est la partie supérieure de la page qui présente le titre, le logo et les boutons de navigation. Le corps est la partie inférieure de la page qui présente le contenu principal. Vous allez d’abord mettre à jour le corps.
- Pour le corps, cliquez sur Custom (Personnalisé).
Un message apparaît, qui vous informe qu’en activant le bouton Personnalisé, vous pouvez organiser manuellement les widgets, de manière distincte des autres modes d’appareil.
- Pour Are you sure you want to enable it? (Souhaitez-vous confirmer l’activation ?), cliquez sur OK.
Vous pouvez maintenant mettre à jour le corps. Vous allez commencer par modifier le bouton Current Conditions (Conditions actuelles). Sur un petit écran, son texte est coupé.
- Cliquez sur le widget du bouton Current Conditions (Conditions actuelles).
Une fenêtre apparaît avec des options de mise à jour du widget.
- Dans la fenêtre Current Conditions (Conditions actuelles), cliquez sur l’onglet Style.
Vous allez centrer le bouton, ajuster sa largeur et changer sa position par rapport au centre du corps.
- Cliquez sur le bouton Horizontal center (Centre horizontal).
- Sous Size & Position (Taille et position), pour Width (Largeur), saisissez 50. Dans le diagramme de position relative, cliquez sur le nombre et saisissez 5.
Les modifications sont automatiquement appliquées au bouton dans l’aperçu. Le bouton est désormais assez large pour afficher tout le texte. Il est également déplacé en haut du corps, ce qui laisse plus de place pour ajuster le reste du contenu.
- Sur le ruban, cliquez sur le bouton Save (Enregistrer).
Remarque :
Les modifications apportées à un widget pour les appareils petit écran n’affectent pas les paramètres des autres tailles d’écran. Si vous cliquez sur le bouton Edit your page for large screen devices (Mettre à jour votre page pour les appareils grand écran), vous voyez qu’aucun changement n’a été apporté à cette mise en page. La seule exception a lieu quand vous supprimez un widget entièrement. La suppression d’un widget dans une vue entraîne sa suppression pour toutes les autres vues. Veillez donc à ne pas supprimer ce que vous voulez conserver.
Vous allez maintenant corriger les cinq fiches, qui se retrouvent aplaties sur le petit écran. Même si vous pouvez essayer de les déplacer et de les redimensionner comme le bouton Current Conditions (Conditions actuelles), elles sont trop encombrantes pour s’adapter à l’écran dans leur état actuel.
Vous allez déplacer les fiches dans la liste en attente. La liste en attente permet de masquer un widget dans une taille d’écran sans le supprimer des autres tailles d’écran. Il est judicieux d’utiliser la liste en attente si vous voulez différents widgets dans différents modes d’appareil ou si vous voulez changer des paramètres de widget autres que sa taille ou sa position.
- Cliquez sur la fiche Visitor Guides (Guides du visiteur) (fiche la plus à gauche). Dans la barre d’outils du widget, cliquez sur le bouton Move to the pending list (Déplacer dans la liste en attente).
Le widget disparaît de la vue, mais il n’est pas supprimé de l’application et est toujours visible sur les autres tailles d’écran. (Si vous avez supprimé le widget, il est aussi supprimé des autres tailles d’écran.)
Remarque :
Pour voir la liste en attente, dans la fenêtre Insert widget (Insérer un widget), cliquez sur l’onglet Pending (En attente). Vous pouvez à tout moment rajouter des widgets de la liste en attente.
- Déplacez les quatre autres fiches dans la liste en attente.
Maintenant que vous avez libéré de l’espace, vous allez ajouter des boutons afin de remplacer les fiches déplacées dans la liste en attente. Le bouton Current Conditions (Conditions actuelles) n’occupant pas trop d’espace et restant lisible sur mobile, vous allez copier son style.
- Cliquez sur le bouton Current Conditions (Conditions actuelles). Dans la barre d’outils, cliquez sur le bouton Duplicate (Dupliquer).
Une copie du bouton nommé Current Conditions 2 (Conditions actuelles 2) apparaît. Vous allez renommer ce bouton et changer son texte.
- Dans la fenêtre Current Conditions 2 (Conditions actuelles 2), cliquez sur le titre de la fenêtre et saisissez Guide du visiteur. Pour Text (Texte), remplacez le texte par Guide du visiteur.
Pour distinguer ce bouton du bouton Current Conditions (Conditions actuelles), vous allez modifier son apparence. La fenêtre Quick style (Style rapide) qui s’est affichée lorsque vous avez dupliqué le bouton fournit certaines options de style par défaut, mais vous pouvez apporter des modifications plus spécifiques dans la section Advanced (Avancé) de la fenêtre du bouton.
- Dans la fenêtre Visitor Guide (Guide du visiteur), sous Background (Arrière-plan), cliquez sur l’échantillon de couleurs Fill (Remplissage).
Vous allez employer la nuance de marron utilisée dans le guide de style du service des parcs nationaux.
- Dans le sélecteur de couleurs, cliquez sur More (Plus). Pour HEX, saisissez #6f4930.
Vous allez ensuite configurer le lien du bouton pour qu’il permette d’accéder à la page appropriée de l’application.
- Dans la fenêtre Visitor Guide (Guide du visiteur), cliquez sur Set link (Définir un lien).
- Dans la fenêtre Set link (Définir un lien), pour Link to (Lien vers), sélectionnez Page. Pour Select a page (Sélectionner une page), sélectionnez Visitor Guide (Guide du visiteur).
- Cliquez sur OK. Dans l’aperçu de l’application, fermez la fenêtre Quick style (Style rapide) et faites glisser le bouton Visitor Guide (Guide du visiteur) pour le centrer à environ 25 pour cent sous le bouton Current Conditions (Conditions actuelles).
Conseil :
Les guides bleus qui apparaissent à l’écran lorsque vous déplacez le bouton montrent la distance du bouton par rapport aux autres éléments. Les guides rouges montrent l’alignement du bouton par rapport aux autres éléments.
- Dupliquez le bouton Visitor Guide (Guide du visiteur) quatre fois. Mettez à jour le nom, le texte et le lien de chaque bouton dupliqué des manières suivantes :
- Pour le premier bouton, utilisez le nom et le texte Historique du parc et définissez le lien sur la page Park History (Historique du parc).
- Pour le deuxième bouton, utilisez le nom et le texte Informations sur les sentiers et définissez le lien sur la page Trail Information (Informations sur les sentiers).
- Pour le troisième bouton, utilisez le nom et le texte Biodiversité et définissez le lien sur la page Hemlock Forests (Forêts de pruches).
- Pour le quatrième bouton, utilisez le nom et le texte Visitor Survey (Enquête visiteur) et définissez le lien sur la page Visitor Satisfaction Survey (Enquête de satisfaction des visiteurs).
- Dans l’aperçu de l’application, faites glisser chaque bouton afin de le centrer à une distance de 5 pour cent sous le bouton précédent.
Ces boutons sont nets et lisibles même sur de petits écrans et présentent tous les mêmes options de navigation que les fiches de l’application de bureau d’origine.
- Enregistrez l'application.
Mettre à jour l’en-tête
Lorsque vous avez terminé de mettre à jour le corps, vous allez modifier l’en-tête. L’en-tête contient trois widgets : un pour le titre, un pour le logo et un avec les liens menant à toutes les pages de l’application. Pour le moment, les widgets sont coupés et se superposent les uns les autres.
- Pour l’en-tête, cliquez sur Custom (Personnalisé). Pour Are you sure you want to enable it? (Souhaitez-vous confirmer l’activation ?), cliquez sur OK.
- Dans l’aperçu de l’application, pointez sur l’en-tête et cliquez sur Edit header (Mettre à jour l’en-tête). Cliquez sur le titre (Great Smoky Mountains National Park (Parc national des Great Smoky Mountains)).
La fenêtre Hemlock Title (Titre de pruches) apparaît avec les paramètres du widget de titre. Vous allez réduire la taille de police.
Rappelez-vous que vous pouvez uniquement changer les paramètres de taille et de position d’un widget sans affecter les autres modes d’appareil. Cela signifie que le changement de la taille du texte la modifiera également dans l’application de bureau, où le texte n’a pas besoin d’être redimensionné.
Pour éviter ce problème, vous allez dupliquer le titre et déplacer le titre d’origine dans la liste en attente. Ensuite, vous allez changer la taille de texte du titre dupliqué pour adapter sa taille au mobile, sans aucun changement sur d’autres appareils.
- Dans l’aperçu de l’application, dans la barre d’outils du titre, cliquez sur le bouton Duplicate (Dupliquer).
Le titre dupliqué est sélectionné par défaut.
- Sélectionnez à nouveau le titre d’origine. Dans la barre d’outils du widget, cliquez sur le bouton Move to the pending list (Déplacer dans la liste en attente).
- Sélectionnez le titre dupliqué. Dans la fenêtre Hemlock Title 2 (Titre de pruches 2), sous Text format (Format du texte), définissez la taille de texte sur 16 px.
Le titre dupliqué n’étant pas aligné sur le centre de l’en-tête, vous allez ajuster ses paramètres de style.
- Dans la fenêtre Hemlock Title 2 (Titre de pruches 2), cliquez sur l’onglet Style. Pour Width (Largeur), saisissez 225 px.
- Cliquez sur le bouton Horizontal center (Centre horizontal). Cliquez sur le bouton Snap to top (Ancrer en haut) et choisissez Vertical center (Centre vertical).
Le titre est centré sur l’en-tête, mais les autres widgets le chevauchent toujours, ce qui le rend illisible. Vous allez ensuite réduire le logo. Comme le chevauchement rend difficile de cliquer sur le logo dans l’aperçu de l’application, vous allez ouvrir une liste de tous les widgets sur la page pour modifier ses paramètres.
- Dans la barre d’outils de gauche, cliquez sur le bouton Page.
Une liste de tous les widgets de l’application apparaît, triés par page. Par défaut, la page Home (Accueil) s’affiche.
- Sous Outline (Contour), sous Header (En-tête), sélectionnez Logo.
Le logo est sélectionné dans l’aperçu de l’application et sa fenêtre de configuration apparaît. Vous souhaitez uniquement le redimensionner et changer sa position.
- Dans l’aperçu de l’application, faites glisser le coin du logo pour le redimensionner avec une largeur d’environ 62 px. Repositionnez le logo sur la gauche du titre.
Conseil :
Vous pouvez redimensionner et repositionner le logo (ou tout autre widget) soit en utilisant les outils de taille et de position dans la fenêtre du widget, soit en redimensionnant et en repositionnant le widget dans l’aperçu. Utilisez la méthode que vous préférez.
Vous allez ensuite changer le menu des liens vers d’autres pages En raison des boutons que vous avez créés dans le corps, il n’est pas nécessaire d’afficher tous les liens dans l’en-tête. Vous allez remplacer le menu actuel par une icône qui est adaptée aux petites tailles d’écran.
- Dans la fenêtre Page, sous Outline (Contour), cliquez sur Menu.
- Dans l’aperçu de l’application, dans la barre d’outils du widget, cliquez sur Duplicate (Dupliquer). Déplacez le menu d’origine dans la liste en attente et sélectionnez à nouveau le menu dupliqué.
- Dans la fenêtre Menu 2, sur l’onglet Content (Contenu), pour Type, choisissez Icon (Icône).
- Cliquez sur l'onglet Style. Définissez Width (Largeur) sur 30 px et repositionnez l’icône à droite du titre.
Après les modifications, l’en-tête est un peu trop grand. Vous allez réduire sa hauteur pour les appareils petit écran.
- Dans la fenêtre Page, cliquez sur Home (Accueil).
La fenêtre Home (Accueil) apparaît avec des options pour la page d’accueil.
- Dans la fenêtre Home (Accueil), sous Header (En-tête), définissez Height (Hauteur) sur 70 px.
Remarque :
Le changement de hauteur de l’en-tête risque de repositionner certains de ses éléments. Si nécessaire, n’hésitez pas à les repositionner.
- Enregistrez l’application. Sur le ruban, vous pouvez également cliquer sur Live view (Vue dynamique) pour visualiser et tester la page d’accueil finalisée.
Dans ce didacticiel, vous avez mis à jour la mise en page d’une application Web afin d’optimiser son apparence sur les appareils mobiles. Vous avez déplacé et redimensionné les widgets et utilisé la liste en attente pour fournir différents paramètres sur différentes tailles d’écran.
Ce didacticiel n’a présenté que des modifications sur une page unique. Si vous souhaitez tester davantage le changement des pages d’application pour les appareils mobiles, l’application Great Smoky Mountains National Park (Parc national des Great Smoky Mountains) comporte six autres pages avec lesquelles vous entraîner. Pour voir comment les auteurs de l’application ont modifié chaque page, vous pouvez consulter le modèle terminé sur votre propre appareil mobile.
Vous trouverez d’autres didacticiels sur la page des ressources ArcGIS Experience Builder.
