Wir haben einen guten Start in das Responsive Design. Das Menü mit den kleinsten Bildschirmgrößen gliedert sich in ein 2 × 4-Raster. Es passt gut auf den Bildschirm, aber zwischen dem und dem Branding nimmt es sehr viel Platz ein. Wir öffnen es im iOS-Simulator und stellen fest, dass in einigen Fällen überhaupt kein tatsächlicher Inhalt angezeigt wird.
Wir werfen einen Blick auf einige Ressourcen zum Umgang mit Navigationsmustern, wie Brad Frosts Artikel Responsive Navigation Patterns und Jason Weavers Off Canvas. Wir sehen uns auch eine coole Demo auf MDN namens Paperfold an.
Wir fügen der Navigation einen zusätzlichen Link hinzu, den wir letztendlich "Navigation 'n' Search" nennen. Dieser dient als Schaltfläche, um die mobile Navigation beim Tippen anzuzeigen. Über Haltepunkte für Medienabfragen wird diese Schaltfläche bei Bedarf ausgeblendet und angezeigt.
Das Umschalten der Navigation wird meistens mit JavaScript erledigt. Ein wenig riskant, da es diejenigen auf kleinen Bildschirmen mit deaktiviertem JavaScript entfremdet - aber ich mache es einfach. Diese Zahl ist so klein (kleiner als Desktop ohne JavaScript, was sicherlich weniger als 1% ist), dass ich nur ein Idiot sein und damit rennen werde.
Alles, was wir mit JavaScript wirklich tun, ist, einen Klassennamen umzuschalten. Das ist es, was ich gerne als staatlich gesteuerte CSS-Entwicklung betrachte. Die gesamte Kontrolle darüber, was angezeigt wird und wann und wie mit CSS umgegangen wird. JavaScript legt nur eine Klasse fest, um den aktuellen Status zu deklarieren.
Wir verbringen eine Menge Zeit damit, das CSS „Papierfalten“ hinzuzufügen, es richtig zum Laufen zu bringen und dann die Suche in einer Lücke zu platzieren, die wir durch Auffüllen über dem Hauptinhalt erstellen.
Letztendlich werden Größe und Position so angepasst, dass sie noch besser passen, und ein kleiner Schließknopf wird hinzugefügt. Ich gehe in meinem Kopf hin und her und biete eine Benutzeroberfläche zum Umschalten von Zuständen für solche Dinge. Einerseits, nachdem der Benutzer die Navigation enthüllt hat, warum sollte er sie schließen müssen? Sie haben es schon gesehen. Wenn sie es nicht benutzen wollen, können sie einfach daran vorbei streichen. Auf der anderen Seite finde ich es ärgerlich, wenn ich solche Zustände in anderen Apps (aus irgendeinem Grund) nicht umschalten kann, und bin daher geneigt, einen Mechanismus dafür bereitzustellen.
