Dois-je placer mon menu sur ma version mobile de ce site Web de séances?
J'essaie de concevoir un site Web simple qui montrera les séances de cinéma dans quelques villes. Ce sera un site français mais j'ai traduit le contenu important des captures d'écran et du site pour vous aider.
J'utilise Bootstrap 2 qui est un framework CSS basé sur une grille qui permet d'utiliser "facilement" le même HTML pour la version mobile et de bureau d'un site Web. C'est ce que j'ai trouvé avec jusqu'à présent:
Comme vous pouvez le voir, il y a un menu à droite qui permet de changer les films affichés à gauche. Je crois que c'est un moyen facile de changer la ville et le jour. L'inspiration vient de Google Movies .
Cependant, des problèmes surviennent lorsque le site Web est consulté sur un téléphone. Si le menu est conservé à droite, il apparaîtra en bas de la version mobile, et les utilisateurs devront faire défiler vers le bas pour découvrir le menu. S'il est à gauche, il apparaîtra en haut, et rien ne dit qu'ils devraient défiler vers le bas pour voir les horaires des films réels. Redimensionner la fenêtre suffit pour tester la "version mobile", mais voici les captures d'écran pertinentes sur mon téléphone actuel (un Galaxy S) avec le navigateur par défaut Android 2.3:
Cette question sur le placement des menus mentionne que les menus devraient être en haut et que les utilisateurs s'y attendent, mais je ne pense pas que cela s'applique aux menus plus grands que l'écran. Ai-je tort?
Quoi qu'il en soit, ma question est: l'une de mes options est-elle la meilleure solution? Sinon, y a-t-il une meilleure alternative à laquelle je n'ai pas pensé?
La réponse est que vous ne pouvez pas simplement utiliser le même contenu sur les deux. Vous aurez besoin de règles qui modifient ou masquent une partie du contenu du bureau sur un appareil mobile.
Plus précisément, vous pouvez changer ce grand menu en un seul bouton cliquable qui affiche le menu lorsque vous le touchez (ou deux d'entre eux, l'un intitulé "Où?", L'autre intitulé "Quand?") Ce simple changement ... en utilisant presque le même contenu, mais pas tout à fait ... permettra à la version mobile d'être beaucoup plus conviviale.
Votre raisonnement est correct pour placer un menu aussi grand en haut (qui cache ensuite le contenu) ou en bas (difficile à découvrir).
Il existe plusieurs solutions possibles ici:
- Avoir un tiroir avec un petit bouton à gauche ou à droite que l'utilisateur appuie pour faire glisser le menu du côté droit tel quel.
- Intégrez le menu dans le petit bouton/tiroir "menu" en haut, cela peut être délicat si vous essayez d'éviter de personnaliser Bootstrap.
- Ajoutez un pied de page fixe en bas sur lequel l'utilisateur peut appuyer pour révéler le menu et styliser le menu pour une expérience mobile.
En général, je serais moins soucieux de maintenir une interface cohérente entre le navigateur Web et le navigateur mobile, et plutôt de me concentrer sur ce qui fait la meilleure expérience dans chaque cas.
Ma préférence serait d'aller avec # 3, puis # 1 et enfin # 2.
Une autre alternative à l'option @ JOG est de basculer vers le menu déroulant pour mobile si vous souhaitez que le menu s'affiche en premier. Voir:
Source de l'image: http://css-tricks.com/convert-menu-to-dropdown/
Voici quelques suggestions de conception rapidement faites.
- Représenté à gauche: résidez plutôt la sélection dans un contrôle déroulant ou contextuel.
- Représenté à droite: Gardez le menu du lieu à droite si sur un PC et ajoutez un lien de saut et placez-le ci-dessous si sur un petit écran. J'ai trouvé que la disposition dépend de la taille de la fenêtre . Donc, si vous pouvez masquer/afficher le lien de saut en fonction de cela, vous êtes trié. :)
Si vous ne le pouvez pas, je ne laisserais pas le cadre "facile" décider pour vous. En fin de compte, il est souvent plus facile de tout contrôler soi-même.