Avem un început bun în ceea ce privește designul receptiv. Meniul de la cele mai mici dimensiuni ale ecranului se împarte într-o grilă 2 × 4. Se potrivește frumos pe ecran, dar între aceasta și branding ocupă mult spațiu. Îl deschidem pe simulatorul iOS și vedem că, în unele cazuri, nu puteți vedea deloc conținut real.
Ne uităm la câteva resurse despre cum să gestionăm tiparele de navigație, cum ar fi articolul Brad Frost Responsive Navigation Patterns și Jason Weaver's Off Canvas. De asemenea, ne uităm la o demonstrație interesantă pe MDN numită Paperfold.
Adăugăm un link suplimentar la navigarea pe care o numim în cele din urmă „Navigare și căutare”, care va acționa ca butonul pentru a dezvălui navigarea mobilă atunci când este atinsă. Prin intermediul punctelor de întrerupere a interogării media, ascundem și afișăm acest buton după cum este necesar.
Comutarea navigării o vom gestiona în principal cu JavaScript. Un pic riscant, deoarece îi înstrăinează pe cei de pe ecrane mici cu JavaScript dezactivat - dar merg doar cu el. Acest număr este atât de mic (mai mic decât desktop-ul fără JavaScript, care este cu siguranță mai mic de 1%) încât voi fi doar un nebun și voi rula cu el.
Tot ce facem cu JavaScript este să comutăm un nume de clasă. Aceasta este ceea ce îmi place să cred că este o dezvoltare CSS orientată de stat. Tot controlul a ceea ce este afișat și când și cum este tratat cu CSS. JavaScript setează doar o clasă pentru a declara starea curentă.
Petrecem o grămadă de timp jucând cu adăugarea în CSS „hârtie”, punând-o în funcțiune corectă și apoi plasând căutarea într-un spațiu pe care îl creăm deasupra conținutului principal, prin intermediul unor umpluturi.
În cele din urmă, dimensionarea și poziția sunt ajustate pentru a se potrivi și mai frumos și se adaugă un mic buton de închidere. Mă duc înainte și înapoi în capul meu oferind interfață de utilizare pentru stări de comutare pe lucruri de genul acesta. O singură mână, acum că utilizatorul a dezvăluit navigarea, de ce ar trebui să o închidă? L-au văzut deja. Dacă nu vor să-l folosească, pot pur și simplu să treacă peste el. Pe de altă parte, mi se pare un pic enervant atunci când nu pot comuta stări de acest gen pe alte aplicații (dintr-un anumit motiv), așa că sunt înclinat să ofer un mecanism pentru ao face.
