Nous avons un bon début sur le design réactif. Le menu aux plus petites tailles d'écran se décompose en une grille 2 × 4. Il s'adapte bien à l'écran, mais entre cela et la marque, cela prend énormément de place. Nous l'ouvrons sur le simulateur iOS et voyons que dans certains cas, vous ne pouvez pas voir du tout le contenu réel.
Nous examinons quelques ressources sur la façon de gérer les modèles de navigation, comme l'article de Brad Frost Responsive Navigation Patterns et Off Canvas de Jason Weaver. Nous examinons également une démo sympa sur MDN appelée Paperfold.
Nous ajoutons un lien supplémentaire à la navigation que nous appelons finalement «Navigation 'n' Search» qui agira comme le bouton pour révéler la navigation mobile lorsque vous appuyez dessus. Grâce aux points d'arrêt des requêtes multimédias, nous masquons et affichons ce bouton si nécessaire.
Le basculement de la navigation que nous gérons principalement avec JavaScript. Un peu risqué car il aliène ceux sur de petits écrans avec JavaScript désactivé - mais je vais juste avec. Ce nombre est si petit (plus petit que le bureau sans JavaScript, ce qui est certainement inférieur à 1%) que je vais juste être un imbécile et courir avec.
Tout ce que nous faisons vraiment avec JavaScript est de basculer un nom de classe. C'est ce que j'aime considérer comme un développement CSS piloté par l'état. Tout le contrôle de ce qui est affiché et quand et comment est géré avec CSS. JavaScript définit simplement une classe pour déclarer l'état actuel.
Nous passons beaucoup de temps à bricoler l'ajout du CSS «paperfold», à le faire fonctionner correctement, puis à placer la recherche dans un espace que nous créons au-dessus du contenu principal grâce à un remplissage.
En fin de compte, le dimensionnement et la position sont ajustés pour être encore plus agréables et un petit bouton de fermeture est ajouté. Je vais et vient dans ma tête en fournissant une interface utilisateur pour basculer les états sur des choses comme celle-ci. D'une part, maintenant que l'utilisateur a révélé la navigation, pourquoi aurait-il besoin de la fermer? Ils l'ont déjà vu. S'ils ne veulent pas l'utiliser, ils peuvent simplement le feuilleter. D'un autre côté, je trouve cela assez ennuyeux de ne pas pouvoir basculer entre des états comme celui-ci sur d'autres applications (pour une raison quelconque), donc je suis enclin à fournir un mécanisme pour le faire.
