L'essentiel de Muse CC 2015

Créer une navigation mobile

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez apprendre à utiliser le widget Accordéon pour créer une navigation mobile dans votre site.

Transcription

Quand on conçoit un site mobile, c'est à dire un site pour des écrans potentiellement très étroits, on doit penser à la mise en page de nos éléments. Mais attention, un terminal mobile ne se limite pas à un écran étroit. En effet un terminal mobile nous propose également une toute autre façon d'interagir avec le site, je parle bien sûr ici de l'écran tactile. Et du fait que l'écran tactile redéfinit complètement les interactions que nous étions habituées à faire sur un ordinateur avec une souris. Pour faire simple, on a sur notre ordinateur une toute petite souris qui est perdue sur un immense écran, par contre sur un smartphone, on a un très gros doigt sur un tout petit écran. Vous avez compris l'idée, je suis donc ici sur le gabarit page de mon site, et je vais replacer cette poignée au niveau du point d'arrêt que j'ai défini sur l'autre gabarit c'est à dire ici à environ 660 pixels, parce qu'à cette largeur là, je détecte que de nouveau ma barre de navigation commence à ne plus fonctionner correctement, les boutons commencent à se chevaucher et donc c'est à cette largeur là que je décide de passer à une autre forme de navigation optimisée pour le mobile. Je vais donc créer ici un point d'arrêt sur ce gabarit pages également à 660 pixels, sélectionner mon menu de navigation, faire un clic droit dessus et donc demander à Muse de masquer cette barre de navigation dans ce point d'arrêt. Ça, ça signifie bien sûr que la barre de navigation est toujours présente vous le voyez dans les autres points d'arrêt mais ici dans le point d'arrêt à partir de 660 pixels de large, et bien je vais devoir définir une autre forme de navigation. Alors pour créer cette autre forme de navigation tactile et bien je me suis servi d'un autre widget qui est présent ici dans Muse c'est un widget qui se trouve dans la catégorie panneau, qui s'appelle accordéon, alors c'est assez simple à comprendre, regardez je vais le glisser ici sur ma page, je vais passer dans l'aperçu et vous allez voir tout de suite comment fonctionne cet accordéon. Il s'agit tout simplement de divers panneaux comme vous le voyez qui s'affichent quand on clique sur une zone réactive qui correspond donc à ce panneau. Vous remarquerez également que par défaut dans l’accordéon j'ai toujours un panneau qui est ouvert. Je vais fermer mon aperçu pour revenir dans mon gabarit et je vais vous montrer comment je peux personnaliser un petit peu cet accordéon. Donc ici vous voyez que j'ai sélectionné l'accordéon, c'est donc le mot Accordéon que j'ai écrit ici dans le coin supérieur gauche de ma fenêtre, si je reclique ici sur cet élément, je sélectionne maintenant une étiquette de cet accordéon, vous voyez le mot Étiquette écrit ici au-dessus, remarquez également que cet étiquette a également plusieurs états disponibles, et bien je peux tout simplement supprimer ici cette étiquette, supprimer également l'étiquette suivante, je n'ai plus qu'un accordéon à un seul panneau, le petit + ici me permettrait vous le voyez d'ajouter des panneaux supplémentaires, et puis dans les options de cet accordéon j'ai une option qui me permet d'autoriser que l'accordéon soit complètement fermé. Alors dans cette configuration ci, et bien regardez dans l'aperçu ce que je vais obtenir, je vais obtenir tout simplement un accordéon qui peut se fermer complètement ou quand je clique sur cette étiquette qui ouvre et qui révèle son contenu. Alors ce que j'ai fait, c'est qu'au niveau du contenu de l'accordéon je n'ai pas mis de texte, je vais supprimer ce texte, mais j'ai mis dans le panneau de l'accordéon, devinez quoi ? Un menu vertical. Et donc qu'est-ce que j'obtiens quand je passe dans l'aperçu ? Et bien j'obtiens un accordéon avec un seul panneau qui masque ou qui révèle le menu de mon site. Alors pour accélérer un petit peu les choses, et bien je vais supprimer d'abord cette accordéon, me rendre dans mon panneau de bibliothèque, et pour importer un élément de bibliothèque supplémentaire, donc je vais cliquer ici Importer la bibliothèque Muse, vous allez vous retrouver dans les sources de cette formation dans le dossier 07_04 consacré à cette vidéo et vous allez trouver ici un nouveau fichier mulib, donc une muse library, un élément que j'ai exporté d'une autre copie de Muse et que je vais maintenant importer dans ce site ci. Alors je vais ouvrir cet élément qui se place comme d'habitude dans son propre dossier donc je vais replacer cet élément qui s'appelle Navigation Mobile ici dans le dossier site chemin vert, supprimer site chemin vert 2, et placer maintenant cette navigation mobile sur mon gabarit comme ceci. Alors bien vérifier, ça j'aurais dû le faire avant, oui, que je suis bien sur le calque En-tête, voila tout est bien. Cet accordéon, voila, je vais le placer ici dans la zone d'en-tête, sur le rectangle rouge et donc je vais vous montrer un petit peu comment cet accordéon a été conçu, donc pour le moment, vous le voyez, j'ai sélectionné mon accordéon évidemment quand je clique sur cette étiquette, j'ouvre cet accordéon, remarquez que c'est l'étiquette qui est ici pour le moment sélectionnée et si vous allez voir les différents états de cette étiquette, et bien vous remarquez qu'à l'état normal, j'ai une icône ici avec 3 lignes, même chose à l'état de survol et au clic, par contre à l'état actif et bien j'ai ici l'icône d'une petite croix qui va me permettre de refermer cet accordéon. A l'intérieur de l'accordéon, qu'est-ce que j'ai fait ? Et bien j'ai tout simplement mis le widget menu vertical, je l'ai personnalisé évidemment, j'ai modifié la mise en forme des différents boutons, et bien sûr j'autorise à ce que l'accordéon se ferme complètement donc que tout les panneaux de l'accordéon soient fermés en même temps. Voila donc ce qu'il en est de ce menu tactile, alors attention, si je vais voir dans les autres points d'arrêt, et bien là je me rends compte que mon menu tactile est également présent en plus du menu traditionnel, et ça je ne le veux pas et ça rappelez-vous au début de cette vidéo qu'est-ce qu'on avait fait, on avait sélectionné le menu classique et on l'avait caché dans ce point d'arrêt. Je vais maintenant faire l'opération inverse, je vais sélectionner mon menu tactile, faire donc un clic droit dessus donc bien vérifier que je sélectionne ici l'accordéon, clic droit et puis je vais demander à Muse de le masquer dans les autres points d'arrêt. Ce qui signifie qu'il est toujours présent dans le point d'arrêt à 660 pixels par contre il n'est plus présent dans les autres points d'arrêt à 840 et 960 pixels. On va bien sûr tester tout ça, Fichier, Prévisualiser la page dans le navigateur, on va laisser Muse exporter cette page, l'afficher dans le navigateur, sur ce système, alors je repars ici d'une largeur complète, et donc vous voyez mes différents points d'arrêt comme on l'avait vu dans les vidéos précédentes et puis au point d'arrêt à 660 pixels vous allez voir que la barre de navigation va disparaître pour être remplacée par cet accordéon. Quand je clique maintenant sur cette icône et bien vous voyez que je révèle le menu et que je peux cacher ce menu en cliquant sur la petite croix. Voici donc une navigation optimisée pour le tactile, et qui n’apparaîtra sur votre site qu'à partir de cette largeur de 660 pixels. L'occasion également pour moi de vous rappeler qu'un écran mobile, ce n'est pas un écran étroit, c'est également une autre façon d'interagir et donc c'est très important quand vous concevez un site mobile de penser également à ces interactions en plus de penser à la mise en page et à la mise en forme de votre site.

L'essentiel de Muse CC 2015

Créez des sites web riches et dynamiques sans aucune compétence en programmation avec Muse. Gérez les plans et les calques, mettez en place une navigation entre vos pages, etc.

3h50 (44 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :21 juil. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !