Quel type de navigation pour les sites mobiles ?
Les menus de navigation sont vraiment une plaie pour les périphériques mobiles, à commencer par le menu horizontal, et - le plus vicieux d’entre tous -, le menu déroulant… (même si nous proposons une solution pertinente sur Alsacréations.)
En y réfléchissant bien, chaque type de navigation est problématique dès lors que l’écran commence à se réduire : il faut non-seulement tenter de tout afficher sur une colonne, mais également agrandir la surface cliquable de chaque lien.
Et quand tout cela est enfin optimisé, il reste un dernier problème, et non des moindres : votre menu occupe à présent toute la taille de l’écran visible de votre page d’accueil !
Forcément, le menu de navigation parfait pour mobile n’existe pas, ou plutôt : il sera différent selon les cas de figure et besoins.
J’ai regroupé ici quelques idées de navigation “responsive” qui pourraient bien s’adapter à nos smartphones. Ils ont sans-doute chacun des avantages et des inconvénients…
Les contraintes choisies sont celles-ci :
- aucun JavaScript à faire mouliner
- pas d’image
- pas d’icon-font
- bref : aucune requête, aucun fichier à télécharger ou interpréter
1- Simple adaptation visuelle
Principe :
Adaptation d’un menu classique pour le Web mobile pour obtenir un affichage sous forme de colonne avec grands boutons.
Réalisation :
Les CSS3 Media Queries sont nos amis pour appliquer une feuille de styles lorsque la taille d’écran se réduit.
Exemple en ligne :
Il y en a un peu partout, dès lors que le webdesigner a fait un premier effort de “responsive design”.
2- Menu poussé en bas de page
Principe :
La navigation est non seulement adaptée aux petits écrans, mais par un stratagème magique, elle est déplacée en bas du document. L’objectif d’afficher le contenu principal en priorité est atteint.
Réalisation :
Les techniques pour modifier l’ordre d’affichage des éléments HTML relèvent soient de spécifications en brouillon (CSS3 Flexible Model ou Grid Layout), ou de “bidouilles” telles que d’afficher un bloc comme un <tfoot> pour le reléguer en bas.
Exemple en ligne :
C’est cette dernière technique que nous avons utilisée pour http://www.alsacreations.fr
3- Menu remplacé par une liste select
Principe :
Le site CSS Tricks propose une idée intéressante : remplacer le menu classique par un élément HTML <select>. Ce type d’élément est généralement très ergonomique sur les smartphones.
Réalisation :
La page HTML contient les deux types d’éléments, tour à tour masqués en display none selon la largeur d’écran. Un coup de JavaScript est nécessaire pour lien les options du select aux pages correspondantes lors du pointage.
Exemple en ligne :
Un tutoriel de CSS Tricks dévoile cette technique : http://css-tricks.com/convert-menu-to-dropdown/
4- Menu coulissant latéral
Principe :
La navigation est masquée (placée en haut ou sur le côté). Un bouton “menu” permet de faire apparaître en glissant la navigation vers la partie visible de l’écran.
Réalisation :
Le bloc de menu peut simplement être positionné en absolu ou relatif avec un décalage. Le clic sur le bouton “menu” modifie la valeur du décalage. Un petit coup de transition CSS3 et le tour est joué.
Exemples en ligne :
- Premier menu (navigation défilant de la gauche vers la droite) :
http://ie7nomore.com/fun/responsive-menu/menu2.html - Deuxième menu (navigation défilant de la droite vers la gauche) : http://bit.ly/goetter-menu3
- Troisième menu (navigation défilant de la gauche vers la droite) : http://bit.ly/goetter-menu3b
5- Menu coulissant vertical
Principe :
Une des (sans-doute) nombreuses variantes de la version précédente : la navigation est placée en haut de page. Seul un bandeau est visible et fixé en haut. Un bouton “menu” permet de faire apparaître en glissant la navigation vers la partie visible de l’écran.
Réalisation :
Le bloc de menu doit avoir une hauteur connue et positionné en “fixed”, puis décalé de sa hauteur. Le clic sur le bouton “menu” modifie la valeur du décalage.
Exemples en ligne :
- Premier menu (navigation défilant du haut vers le bas) :
http://bit.ly/goetter-menu3c - Deuxième menu (navigation sur une ligne apparaissant par en haut) http://bit.ly/goetter-menu4
- Troisième menu (le corps de page descend et dévoile le menuà :
http://bit.ly/goetter-menu5 - J’ai également appliqué ce principe sur mon site personnel Goetter.fr
Et sinon ?
Cette liste des “bonnes idées” de menus pour mobiles est certainement loin d’être exhaustive.
Je suis preneur d’autres bonnes suggestions, et surtout de vos retours d’expériences, notamment en ce qui concerne la compatibilité ou l’accessibilité (ARIA ?) de toutes ces techniques.
