Vi har en god start på det responsive design. Menuen i de mindste skærmstørrelser opdeles i et 2 × 4 gitter. Det passer pænt på skærmen, men mellem det og brandingen tager det frygtelig meget plads. Vi åbner det på iOS-simulatoren og ser, at du i nogle tilfælde overhovedet ikke kan se noget faktisk indhold.
Vi ser på et par ressourcer til, hvordan man håndterer navigationsmønstre, som Brad Frost's artikel Responsive Navigation Patterns og Jason Weaver's Off Canvas. Vi ser også på en cool demo på MDN kaldet Paperfold.
Vi tilføjer et ekstra link til den navigation, vi i sidste ende kalder "Navigation 'n' Search", som fungerer som knappen for at afsløre mobilnavigationen, når der trykkes på den. Gennem medieforespørgselsbrudpunkter skjuler vi og viser denne knap efter behov.
Omskiftningen af navigationen håndterer vi for det meste med JavaScript. Lidt risikabelt, da det fremmedgør dem på små skærme med JavaScript deaktiveret - men jeg går bare med det. Det tal er så lille (mindre end desktop uden JavaScript, hvilket bestemt er mindre end 1%), at jeg bare bliver en skam og kører med det.
Alt, hvad vi virkelig gør med JavaScript, er at skifte et klassenavn. Det, hvad jeg kan lide at tænke på som statsdrevet CSS-udvikling. Al kontrol over, hvad der vises, og hvornår og hvordan håndteres med CSS. JavaScript indstiller bare en klasse til at erklære den aktuelle tilstand.
Vi bruger en masse tid på at tinkere med at tilføje i "papirfoldet" CSS, få det til at fungere korrekt og derefter placere søgningen i et hul, vi skaber over hovedindholdet gennem en vis polstring.
I sidste ende justeres størrelsen og placeringen for at passe endnu pænere, og der tilføjes en lille luk-knap. Jeg går frem og tilbage i mit hoved med at give brugergrænseflade til at skifte stater om ting som dette. Én hånd, nu hvor brugeren har afsløret navigationen, hvorfor skulle de have brug for at lukke den? De har allerede set det. Hvis de ikke vil bruge det, kan de bare svippe forbi det. På den anden side finder jeg det lidt irriterende, når jeg ikke kan skifte stater som denne på andre apps (af en eller anden grund), så jeg er tilbøjelig til at give en mekanisme til at gøre det.
