Mettre en place un menu responsive avec les CSS

Étudier le menu sandwich

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Voyez comment les composants du menu peuvent s'adapter, ou s'afficher, pour égrainer les éléments, sans forcément utiliser tout l'espace.
05:57

Transcription

Autour de cette icône de burger ici il y a eu, il y a quelques temps de cela, une grande polémique et beaucoup de designers ont commencé à exprimer le souhait de ne pas utiliser, même ont fortement conseillé de ne pas utiliser, l'icône burger parce que d'une part ça n'exprimait pas l'iconographie d'un menu, on ne s'attendait pas à trouver ça derrière un menu ; ça pouvait aussi utilisées par l'OS du mobile, bref c'était pas quelque chose de conseillé. Aujourd'hui on trouve ça de plus en plus fréquemment et notamment autour des navigateurs. Vous voyez ici même le navigateur Chromium utilise directement cet élément-là pour pouvoir utiliser son menu. C'est un peu ce que disaient d'ailleurs certains contrevenants en disant attention, ça peut porter confusion parce que les OS l'utilisent et on n'aura pas forcément tendance à penser qu'ici c'est une icône qui va ouvrir un menu propre à ceci. Des tests ont été réalisés et sur ce site les résultats ont été publiés en présentant directement un élément de menu encadré, l'icône burger encadrée par une bordure, et le mot menu directement écrit et encadré par une bordure. Plusieurs alternatives ont été proposées également au départ avec bordure ou pas bordure et puis l'association aussi du mot menu avec l'icône du burger, il s'est avéré que les deux icônes qui recevaient le plus de clics c'étaient ces deux-ci. Un dernier test a été mené là-dessus et on s'aperçoit que, notamment chez Android, sur 87245 visiteurs uniques, il y a eu 216 clics sur le hamburger et 237 clics sur le mot menu. On voit que c'est très peu de clics qui ont été réalisés sur le site lui-même mais il y a très peu d'écart entre les deux. Par contre il y a beaucoup plus d'écart entre les utilisateurs d'iOS par rapport à ceux d'Android. Quoi qu'il en soit, aujourd'hui tous les navigateurs ou presque utilisent cette icône, les navigateurs bien entendre par coquilles, par exemple ici sur Firefox où on s'aperçoit que l'outil est bien utilisé, vous voyez ici sous forme d'élément de menu, et maintenant si on ne prend pas la coquille mais qu'on prend le contenu, suis plus dans un OS, je suis directement dans le site et on s'aperçoit que l'outil présentant le menu est bien le burger ici. Si je viens sur Youtube pareil, on a bien le burger qui présente. LinkedIn ne déroge pas à la règle, on le retrouve également ici dans le menu, Dailymotion aussi nous propose son élément de menu sous forme d'icône burger. Maintenant la question à se poser c'est a-t-on réellement besoin d'avoir un menu comme ça ? Si je prends le site sur puce ici par exemple avec des éléments, oui ça va être compliqué d'avoir autre chose que des mots mais, dans certains cas, les applications peuvent rester de manière purement iconographique et, si je regarde ici, j'ai pris l'exemple de Facebook, Facebook lui va nous proposer des icônes, une iconographie pure et dure mais Facebook n'est pas le seul, on va avoir également Twitter où, au lieu de trouver des éléments de menu, on trouve une iconographie qui fait que, que je sois sur un écran très large ou que je sois sur un écran plus réduit, je vais pouvoir de cette manière-là, non plus faire vivre un élément de menu qui va s'ouvrir parce que une partie de la polémique aussi consistait à dire mais attention, pour pouvoir voir les contenus que je propose, il faut que déjà je fasse un clic. niveaux mais ici tout apparaît qu'une fois que j'ai cliqué. Pour savoir ce que je peux faire, déjà il faut cliquer donc déjà c'est une perte de temps alors que là j'ai déjà mes icônes de premier niveau qui sont apparentes, qui ne mangent pas trop de place et qui peuvent rester affichées. De ça il est né une nouvelle approche dans la manière de présenter les menus, c'est déjà d'avoir un état mobile et un état desktop ou plein écran qui sont similaires, c'est-à-dire qu'ici, même si j'ai beaucoup de place dans ma barre de menu, je n'ai pas de menu, j'utilise directement le même principe d'ergonomie que si j'étais sur un appareil mobile et puis un petit élément aussi c'est que souvent, sur certains appareils mobiles, lorsqu'on ouvre un sous-menu, on le garde ouvert et si j'en ouvre un second, je le garde ouvert alors qu'ici vous voyez ça recentre, ça permet de redéfinir à chaque fois l'espace. Ça ça a été un choix qui est resté quand même sur le burger ici mais on a des choix beaucoup plus visuels ou beaucoup plus ergonomiques qui ont été travaillés. Ici on se retrouve pareil sur un écran large avec l'élément menu qui lui est associé au burger et, quand je clique, j'ai un méga menu qui s'ouvre sur lequel je vais pouvoir venir naviguer de manière horizontale toujours, c'est pas vertical, pour toujours avoir tout d'affiché sur la même page et ne pas avoir à forcément dérouler l'écran, ce qui va me permettre de pouvoir naviguer dans mon menu un peu comme si j'étais sur un appareil mobile tout en étant sur un appareil à écran large. Après, de là à ouvrir complètement l'interface et à permettre de jouer visuellement parlant sur l'utilisation des menus, les créatifs se sont lâchés ! Vous voyez ici, quand par exemple je vais cliquer sur le burger, le menu ne s'ouvre pas mais par contre j'ai une animation qui me présente maintenant de manière très visuelle les éléments de sous-menus qui me permettent de naviguer et, quand je clique sur la fermeture de navigation, je rapporte mon interface de travail classique telle qu'elle était au départ. Une autre approche va être de dire que déjà tout le contenu est responsive, va pouvoir bouger, va pouvoir respirer, va jouer avec l'espace et ici l'élément de menu lui va rester de manière classique une sorte de barre qui s'ouvre. Par contre, je n'ai pas d'élément de fermeture. C'est dès lors que je quitte l'élément de menu que, vous voyez, mon icône se transforme et me dit est-ce que tu cliques ? oui je clique, je ferme la barre. Aujourd'hui on va dire qu'il y a la question majeure à se poser avant de mettre en place un élément de menu, c'est de savoir est-ce que je vais faire une version mobile et une version plein écran, version desktop, ou est-ce que je vais jouer avec le graphisme, certains contenus vont me le permettre, je vais pouvoir me lâcher, d'autres contenus seront plus austères, me demanderont d'avoir par contre un menu un peu à la méthode responsive classique ici, avec une barre latérale qui apparaît sur l'écran pour me permettre d'afficher les éléments de sous-menus. causer des soucis d'interférence avec des icônes si je vais sur le site de Microsoft, Si je ne suis pas en état réduit,

Mettre en place un menu responsive avec les CSS

Mettez en place des menus responsives au sein de vos pages web. Abordez les diverses approches possibles, que ce soit avec les plug-ins, ou en codant depuis une page blanche.

2h31 (28 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Spécial abonnés
Date de parution :26 nov. 2015

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 !