it-swarm.com.de

Was ist eine gute Alternative zu Dropdown-Menüs für die Site-Navigation auf Touchscreen- / Mobilgeräten?

Wir sind dabei, unsere Website neu zu gestalten. Eines der Designziele ist es, die Website mobiler/Tablet-freundlicher zu gestalten.

Unsere aktuelle Seite ist sehr groß und die Navigation ist etwas kompliziert. Momentan ist unsere Hauptnavigation in 8 Dropdown-Menüs unterteilt, die erweitert werden, wenn Sie mit der Maus darüber fahren. Jedes Menü enthält 5-10 Elemente.

Wenn wir die Site neu gestalten, werden wir wahrscheinlich eine ähnliche Anzahl von Navigationselementen haben, obwohl diese möglicherweise unterschiedlich organisiert sind. Ich halte es jedoch nicht für wünschenswert, das vorhandene Navigationsformat beizubehalten. "Schweben" kann auf Touchscreen-Geräten problematisch sein, und die lange horizontale Navigationsleiste, über die die Menüs herunterfallen, muss sehr klein sein, um horizontal auf einen Smartphone-Bildschirm zu passen. Andererseits ist eine einfache Liste von Links oder Schaltflächen auch unerwünscht, da es viel zu viele geben würde, ohne dass sie ausgeblendet oder erweitert/reduziert werden könnten.

Es ist auch unsere Absicht, Responsive Design (mithilfe von CSS-Medienabfragen) zu verwenden, um unsere Website sowohl an Desktop- als auch an mobile Browser anzupassen. Daher ist eine Lösung, die gemeinsam genutzten Code für beide Umgebungen verwenden kann, ideal. Ich versuche zu vermeiden, getrennte "Desktop" - und "mobile" Websites zu haben.

Ich habe ein paar Ideen, wie wir damit umgehen können, aber ich bin mir nicht sicher, ob mir eine meiner Ideen gefällt. Meine Frage ist also was ist eine gute Touchscreen-freundliche und mobile-freundliche Alternative zu Pulldown-Menüs für Websites mit komplizierter Navigation? Beispiele für Websites, die solche Navigationsmethoden gut implementieren, wären ebenfalls sehr willkommen.

14
Joshua Carmody

Verschlechtern Sie Ihre Subnavigation auf anmutige Weise oder löschen Sie sie, indem Sie den Inhalt auf den Indexseiten wiederholen.
Es ist wahr. Schauen Sie sich einfach die Beweise unten an. Zwei großartige Beispiele für responsives Webdesign sind Smashing Magazine und The Boston Globe . Ethan Marcotte selbst war an der Neugestaltung des Boston Globe beteiligt.

Smashing Magazine: Lassen Sie das Subnav fallen
Beachten Sie, dass in diesen Screenshots beim Übergang vom Desktop- zum mobilen Formfaktor das "Subnav" vollständig verschwindet. Es wird immer inline auf der Seite wiederholt, ist also technisch überflüssig. Verschieben Sie Ihre Subnavigationen auf Ihre Indexseiten.

Desktop-Formfaktor

Smashing Magazine desktop

Tablet (ish) Formfaktor

Smashing Magazine medium

Mobiler Formfaktor

Smashing Magazine mobile

The Boston Globe: Subnavigation verschlechtern

Beachten Sie, dass in diesem Beispiel die Boston Globe-Navigation von einer robusten Mega-Subnavigation auf dem Desktop zu einer gedämpften Subnavierung des Tablet-Formfaktors übergeht. Beachten Sie auch, dass es vom Rollover (nur mit einem Mauszeiger möglich) zum Erweitern beim Klicken (erforderlich für Touch-Geräte) geht. Die Navigation bricht auf dem Handy weiter zusammen.

Beachten Sie auch, dass die Elemente in der Subnavigation auch inline auf der Indexseite vorhanden sind. In diesem Fall gliedern sich die Nachrichten in Nation, Politik usw. Sie finden diese sowohl im Mega-Subnav als auch auf der Seite.

Desktop-Formfaktor

Boston Globe desktop

Tablet (ish) Formfaktor

Boston Globe medium

Tablet (ish) Formfaktor (Navigation erweitert)

Boston Globe medium expanded navigation

Mobiler Formfaktor

Boston Globe mobile

16
Taj Moore