Máme dobrý začátek s responzivním designem. Nabídka s nejmenší velikostí obrazovky se rozpadá na mřížku 2 × 4. Hodí se pěkně na obrazovku, ale mezi tím a značkou zabírá strašně spoustu místa. Otevřeme to na simulátoru iOS a uvidíme, že v některých případech nemůžete vůbec vidět žádný skutečný obsah.
Podíváme se na několik zdrojů, jak zacházet s navigačními vzory, například článek Brada Frosta Responsive Navigation Patterns a Jason Weaver's Off Canvas. Podíváme se také na skvělé demo na MDN s názvem Paperfold.
Přidáme další odkaz na navigaci, kterou nakonec nazýváme „Navigation 'n' Search“ a která bude po klepnutí sloužit jako tlačítko k odhalení mobilní navigace. Prostřednictvím hraničních bodů mediálního dotazu toto tlačítko podle potřeby skryjeme a zobrazíme.
Přepínání navigace většinou zvládneme pomocí JavaScriptu. Trochu riskantní, protože to odcizuje ty na malých obrazovkách s deaktivovaným JavaScriptem - ale já jdu s tím. To číslo je tak malé (menší než desktop bez JavaScriptu, což je určitě méně než 1%), že budu jen hlupák a budu s ním běžet.
Jediné, co s JavaScriptem opravdu děláme, je přepínání názvu třídy. To, co bych rád považoval za státem řízený vývoj CSS. Veškerá kontrola nad tím, co se zobrazuje a kdy a jak se zpracovává pomocí CSS. JavaScript pouze nastaví třídu pro deklaraci aktuálního stavu.
Trávíme spoustu času vrtáním přidáváním „papírového“ CSS, správným fungováním a potom umístěním hledání do mezery, kterou vytvoříme nad hlavním obsahem pomocí nějaké výplně.
Nakonec je velikost a pozice vylepšena tak, aby se vešly ještě hezčí, a přidá se malé zavírací tlačítko. Jdu tam a zpět v mé hlavě s poskytováním uživatelského rozhraní pro přepínání stavů o takových věcech. Jednou rukou, když nyní uživatel odhalil navigaci, proč by ji musel zavřít? Už to viděli. Pokud ho nechtějí použít, mohou kolem něj jen listovat. Na druhou stranu mi připadá trochu nepříjemné, když nemohu přepínat stavy jako je tento na jiných aplikacích (z nějakého důvodu), takže mám sklon poskytnout mechanismus, jak to udělat.
