Quelle largeur de point d'arrêt pour passer au menu mobile?
Il semble que cela devrait avoir une réponse claire et claire, mais je n'ai pas pu en trouver beaucoup de mention: lors de la création d'un site Web, quel point d'arrêt/largeur est le plus idéal pour passer d'un menu de navigation de style onglet horizontal à un basculement vertical menu mobile, caché derrière une icône "hamburger"?
Étant donné que je semble principalement concevoir des sites Web avec une largeur de conteneur de 1200 pixels, et qu'il n'y a pas beaucoup de tailles d'écran d'ordinateur de bureau/portable en dessous, j'ai obtenu le menu mobile pour démarrer à/en dessous de cette largeur de 1200 pixels, ce qui simplifie quelque peu mon flux de travail.
Mais est-ce une bonne pratique? Y a-t-il un public d'utilisateurs d'appareils qui préféreraient un point d'arrêt inférieur? Peut-être que les utilisateurs d'iPad en orientation paysage préféreraient un menu "normal"?
J'ai vu des sites Web qui ont un menu pliable de style mobile pour toutes les largeurs, y compris le bureau, donc je suppose que cela se résume à l'expérience utilisateur souhaitée au cas par cas, mais il serait utile de connaître toutes les considérations imprévues .
Oubliez les points d'arrêt mobiles, il n'y a pas téléphone et tablette tailles en dehors du marketing. Les points d'arrêt doivent suivre le contenu, pas la taille de l'écran.
Comme exemple simple, considérons le menu:
Home | Products | Contacts
Pensez-vous que vous devriez jamais fournir un menu mobile? Voulez-vous vraiment coller trois éléments dans un menu hamburger? Ils peuvent probablement très bien tenir sur votre écran à >=320px
D'un autre côté, il y a ce menu:
Home | TVs | Tablets | Notebooks | Printers | Air Conditioners | Routers | Help
Qui doit être ajusté beaucoup plus tôt. Mais en même temps, voulez-vous montrer un hamburger à <1000px parce qu'il ne tient pas sur une seule ligne?
J'explorerais d'autres options de navigation, comme le Priority + pattern
En remarque, cela s'applique à toutes les parties du site. Ne vous contentez pas de passer à la mise en page mobile juste parce que vous avez atteint <700px même si le contenu correspond toujours parfaitement à ce qu'il est à 400px. Google Web Fundamentals a une page exactement à ce sujet:
Créez des points d'arrêt en fonction du contenu, jamais sur des appareils, produits ou marques spécifiques.