Configuration d’application mobile : mise en page, side panel et menu de navigation

Updated on 13 déc. 2024Published on 13 déc. 2024

Résumé de l'article

Par défaut, lors de l’utilisation de pages mobiles créées par la plateforme dans une PWA[1], les side panels ne respectent pas la safe area, ce qui crée des problèmes de convivialité pour les utilisateurs. Corrigez ce problème pour les pages par défaut et les pages personnalisées. Apprenez également à créer une mise en page mobile personnalisée et un menu de navigation. Enfin, voyez à quel point il est facile de prendre une page conçue pour la mise en page principale et de l’adapter…

Introduction

Par défaut, lors de l’utilisation de pages mobiles créées par la plateforme dans une PWA[1], les side panels ne respectent pas la safe area, ce qui crée des problèmes de convivialité pour les utilisateurs. Dans ce guide, apprenez à corriger ce problème pour les pages par défaut et les pages personnalisées. Apprenez également à créer une mise en page mobile personnalisée et un menu de navigation. Enfin, voyez à quel point il est facile de prendre une page conçue pour la mise en page principale et de l’adapter à une mise en page mobile.

Étapes à suivre

1. Identifier le problème de safe area sur mobile

Commencez par ouvrir la PWA sur votre mobile et la page d’accueil mobile sur la plateforme. Ouvrez le side panel de la PWA en appuyant sur le bouton en haut à droite, pour constater que la Safe Area mobile n’est pas prise en considération (voir la deuxième capture d’écran).

Sur la plateforme, passez du page designer au layout designer. Sélectionnez la boîte « UserMenu » depuis le panneau Structure de la plateforme. Ensuite, depuis l’onglet Attribute, ajoutez « data-layout-mobile » dans le champ Class Name. Cela permettra immédiatement à la safe area d’être reconnue depuis la PWA, permettant ainsi à l’utilisateur d’accéder facilement à tous les panneaux et boutons de l’application mobile.

2. Créer une mise en page mobile et l’appliquer aux pages existantes

Les étapes suivantes vous montreront comment créer une mise en page mobile, l’appliquer à une page mobile existante, copier un side panel d’une page de bureau vers une page mobile et l’adapter pour la Safe Area.

a. Depuis le panneau Project Explorer, allez à « More » et cliquez avec le bouton droit sur le dossier Layout. Ensuite, sélectionnez « add layout ». Saisissez un nom pour la nouvelle mise en page et enregistrez. Depuis la section Properties, activez « in mobile », puis trouvez votre page d’accueil (mobile) et choisissez votre nouvelle mise en page dans le menu déroulant du même nom.

b. Depuis la section inférieure de l’onglet style, supprimez le CSS par défaut de tous les composants de la page.

3. Configurer le Grid et l’en-tête pour les pages mobiles

Ensuite, glissez-déposez un composant grid de la toolbox en haut de la structure de votre page. Passez en grid edit mode pour supprimer une colonne et changer la première rangée en « min-content », puis glissez-déposez la boîte Header dans la première rangée et Content dans la deuxième. Ensuite, fermez le grid edit mode.

Ajustez la hauteur de la boîte Header à 60 px et supprimez le composant text dans l’en-tête. Ensuite, construisez un side panel depuis la barre d’outils ou copiez-en un existant depuis la version de bureau de l’application, comme dans cet exemple. Pour ce faire, quittez le mode mobile et cliquez avec le bouton droit sur le composant side panel, depuis le panneau structure, pour « edit -> copy ». Revenez en mode mobile et cliquez avec le bouton droit sur la boîte Header pour le coller. Enfin, appliquez Horizontal Center Align à la boîte Header et un padding de 6 px de tous les côtés.

4. Copier et adapter le side panel du bureau vers le mobile

b. Depuis la section inférieure de l’onglet style, supprimez le CSS par défaut de tous les composants de la page.

c. Ensuite, glissez-déposez un composant grid de la toolbox en haut de la structure de votre page. Passez en grid edit mode pour supprimer une colonne et changer la première rangée en « min-content », puis glissez-déposez la boîte Header dans la première rangée et Content dans la deuxième. Ensuite, fermez le grid edit mode.

d. Ajustez la hauteur de la boîte Header à 60 px et supprimez le composant text dans l’en-tête. Ensuite, construisez un side panel depuis la barre d’outils ou copiez-en un existant depuis la version de bureau de l’application, comme dans cet exemple. Pour ce faire, quittez le mode mobile et cliquez avec le bouton droit sur le composant side panel, depuis le panneau structure, pour « edit -> copy ». Revenez en mode mobile et cliquez avec le bouton droit sur la boîte Header pour le coller. Enfin, appliquez Horizontal Center Align à la boîte Header et un padding de 6 px de tous les côtés.

5. Appliquer la classe « data-layout-mobile » aux pages personnalisées

Cette étape ressemble à la deuxième étape pour les pages par défaut (p.4), mais appliquée à une page personnalisée. Cependant, parce que la boîte principale à l’intérieur d’un side panel n’accepte pas les noms de classe, quelques étapes supplémentaires seront nécessaires pour obtenir le même résultat. Commencez par déplacer le side panel à l’extérieur du Grid. Ensuite, enveloppez dans une boîte verticale toutes les boîtes à l’intérieur de la première. Ensuite, appliquez simplement le nom de classe « data-layout-mobile » à cette nouvelle boîte

6. Ajuster l’alignement du contenu et l’item spacing pour la vue mobile

Ajoutez « 2em » d’item spacing sur la nouvelle boîte et glissez l’élément de menu « log out » à l’extérieur. Sélectionnez le composant « checkbox » et appliquez « fit content », puis, sur la boîte qui le contient, appliquez un Left Self Alignment. Ensuite, choisissez 100 % de hauteur pour la boîte contenant « my profile » et « users », ainsi que pour la première boîte sous la boîte « box: inside ».

7. Intégrer les changements de couleur de thème dans le side panel

Comme montré sur le mobile, un utilisateur pourrait facilement changer le thème en sombre, cependant, à ce stade, cela n’appliquerait la nouvelle couleur de thème qu’au side panel. Pour rectifier la situation, commencez par glisser le composant side panel dans le Grid. Ensuite, sélectionnez la boîte principale, au-dessus du Grid, et changez sa couleur de fond pour « themeBackground ».

Passez en Grid edit mode, puis changez la taille de la dernière rangée en « min-content ». Nous utiliserons cette section pour créer un menu d’icônes en bas. Ensuite, quittez le mode edit et ajoutez une boîte, depuis la barre d’outils juste au-dessus du Grid. Ensuite, ajoutez un composant icône dans cette boîte.

Depuis l’onglet Attribute, changez l’orientation de la boîte en horizontal. Cliquez avec le bouton droit sur le composant icône et ajoutez un wrap « box vertical ». À cette nouvelle boîte, appliquez une largeur de 20 % et une hauteur de 55 px et changez son alignement de contenu pour correspondre à cette image : .

Dans cet exemple, la taille de l’icône est changée en « huge », puis la boîte contenant le composant icône est dupliquée x4. Enfin, les icônes sont sélectionnées selon les besoins de l’utilisateur :

Pour déplacer le menu de navigation vers le bas de l’écran, revenez en Grid edit mode, glissez la boîte principale du menu dans la petite section « min-content » et quittez le mode edit. Comme démontré à la fin, pour une meilleure visibilité en thème clair et sombre, les icônes sont en Duotone.

9. Adapter une page conçue pour le bureau à une mise en page mobile

L’étape suivante démontre à quel point il est facile de prendre une page conçue pour la mise en page principale et de l’adapter à une mise en page mobile, ainsi que de l’associer à notre menu de navigation. Pour cet exemple, la page de liste des comptes avec une API Google Maps sera utilisée.

Comme première étape, dupliquez la page et modifiez ses propriétés pour la mise en page mobile créée à l’étape 4.

Ensuite, revenez en mode mobile et, en layout designer, sélectionnez l’icône building et ajoutez un comportement Navigate to Another Page, on Click et liez-le à /list/account.

10. Implémenter le comportement de défilement pour le contenu de page mobile

Depuis l’onglet Style, sous la section sizing, supprimez « scroll if needed » de la boîte principale en (X) et (Y). Ensuite, avec Grid edit mode activé, mettez la largeur de cette même boîte à 100 %. Ensuite, sélectionnez le composant grid et ajoutez 100 % en width et height. Ensuite, sélectionnez la boîte content dans le grid et ajoutez 100 % en width et height et enfin, ajoutez « scroll if needed » à Overflow (X). Cela devrait permettre à un utilisateur de faire défiler la liste sans perdre de vue la carte, en mode mobile.

Conclusion

En configurant une mise en page mobile avec side panels et un menu de navigation inférieur, les utilisateurs peuvent assurer une meilleure expérience mobile qui respecte les safe areas et offre un design responsive. Ce guide décrit la transformation d’un design orienté bureau en une mise en page mobile efficace et conviviale, améliorant l’accessibilité et la convivialité pour les utilisateurs mobiles.