Vi har en bra start på den responsiva designen. Menyn med de minsta skärmstorlekarna bryts ner i ett 2 × 4 rutnät. Det passar fint på skärmen, men mellan det och märket tar det väldigt mycket utrymme. Vi öppnar det på iOS-simulatorn och ser att du i vissa fall inte kan se något faktiskt innehåll alls.
Vi tittar på några resurser om hur man hanterar navigeringsmönster, som Brad Frosts artikel Responsive Navigation Patterns och Jason Weaver's Off Canvas. Vi tittar också på en cool demo på MDN som heter Paperfold.
Vi lägger till en ytterligare länk till den navigering som vi i slutändan kallar "Navigation 'n' Search" som fungerar som knappen för att avslöja mobilnavigering när du trycker på. Genom brytpunkter för mediefrågor döljer och visar vi den här knappen efter behov.
Växlingen av navigeringen hanterar vi mestadels med JavaScript. Lite riskabelt eftersom det alienerar dem på små skärmar med JavaScript inaktiverat - men jag går bara med det. Det antalet är så litet (mindre än skrivbordet utan JavaScript, vilket verkligen är mindre än 1%) att jag bara kommer att bli en jerk och springa med det.
Allt vi verkligen gör med JavaScript är att växla ett klassnamn. Det som jag gillar att tänka på som statsdriven CSS-utveckling. All kontroll över vad som visas och när och hur hanteras med CSS. JavaScript anger bara en klass för att deklarera det aktuella läget.
Vi tillbringar en massa tid med att fästa i att lägga till i "pappersfoldningen" CSS, få det att fungera korrekt och sedan placera sökningen i en lucka som vi skapar över huvudinnehållet genom lite stoppning.
I slutändan justeras storlek och position för att passa ännu trevligare och en liten stängningsknapp läggs till. Jag går fram och tillbaka i mitt huvud med att tillhandahålla användargränssnitt för att växla stater på saker som detta. Ena sidan, nu när användaren har avslöjat navigeringen, varför skulle de behöva stänga den? De har redan sett det. Om de inte vill använda den kan de bara bläddra förbi den. Å andra sidan tycker jag att det är lite irriterande när jag inte kan växla stater som detta på andra appar (av någon anledning) så jag är benägen att tillhandahålla en mekanism för att göra det.
