Vi har en god start på det responsive designet. Menyen i de minste skjermstørrelsene brytes ned i et 2 × 4 rutenett. Det passer fint på skjermen, men mellom det og merkevaren tar det veldig mye plass. Vi åpner det på iOS-simulatoren og ser at du i noen tilfeller ikke kan se noe faktisk innhold i det hele tatt.
Vi ser på noen få ressurser om hvordan du håndterer navigasjonsmønstre, som Brad Frosts artikkel Responsive Navigation Patterns og Jason Weaver's Off Canvas. Vi ser også på en kul demo på MDN kalt Paperfold.
Vi legger til en ekstra lenke til navigasjonen vi til slutt kaller "Navigation 'n' Search", som vil fungere som knappen for å avsløre mobilnavigasjonen når du trykker på den. Gjennom mediespørsmål, skjuler vi og viser denne knappen etter behov.
Vekslingen av navigasjonen vil vi for det meste håndtere med JavaScript. Litt risikabelt da det fremmedgjør de på små skjermer med JavaScript deaktivert - men jeg går bare med det. Det tallet er så lite (mindre enn skrivebordet uten JavaScript, som absolutt er mindre enn 1%) at jeg bare kommer til å bli en drittsekk og løpe med det.
Alt vi egentlig gjør med JavaScript er å bytte mellom et kursnavn. Det det jeg liker å tenke på som statsdrevet CSS-utvikling. All kontroll over hva som vises og når og hvordan håndteres med CSS. JavaScript setter bare en klasse for å erklære gjeldende tilstand.
Vi bruker mye tid på å fikle med å legge til i "papirfoldet" CSS, få det til å fungere riktig, og deretter plassere søket i et gap vi oppretter over hovedinnholdet gjennom litt polstring.
Til slutt blir størrelsen og posisjonen justert for å passe enda finere, og en liten lukkeknapp blir lagt til. Jeg går frem og tilbake i hodet mitt med å gi brukergrensesnitt for å bytte stater på ting som dette. En side, nå som brukeren har avslørt navigasjonen, hvorfor trenger de å lukke den? De har allerede sett det. Hvis de ikke vil bruke den, kan de bare bla forbi den. På den annen side synes jeg det er veldig irriterende når jeg ikke kan bytte tilstander som dette på andre apper (av en eller annen grunn), så jeg er tilbøyelig til å gi en mekanisme for å gjøre det.
