Doppelte Menüs für Desktop und Mobile sind kein Problem

Doppelte Menüs

Google stellt komplett auf Mobile First Indexing um. Das haben wir bereits in einem Blogpost erläutert. Webseiten, die bisher nur für die Desktop-Version vorlagen, müssen nun also auch für eine mobile Version zur Verfügung stehen. Wer Webseiten-Templates von WordPress oder anderen Anbietern nutzt, stellt aber fest, dass die Menüs doppelt angelegt werden. Je nach Endgerät wird eine der Versionen angezeigt. Stellt diese doppelte Menüstruktur eigentlich ein Problem dar?

Google sagt, dass diese doppelte Menüstruktur völlig in Ordnung sei. Zwar doppeln sich die Links, da sie aber jeweils auf dieselben Ziele verweisen würden, wäre das aus SEO-Sicht jedoch unproblematisch. Manchmal bietet es sich allerdings an, das Menü für die mobile Version zu vereinfachen – vor allem weil Unterebenen mobil schneller vom User erreichbar sein müssen. Darum ergibt es Sinn, vorher in die Planung der Informationsarchitektur zu gehen.

Die Darstellung der Navigation für die mobile Version wird komprimiert und als Burger-Menü am rechten oder linken Rand dargestellt. Der User hat mittlerweile gelernt, dass drei übereinander angeordnete Linien die Navigationsstruktur darstellen. Doch es gibt noch andere Möglichkeiten, die Navigation mobil anzulegen. Wir erklären heute, welche Navigations-Designs möglich sind.

  1. Navigation im Dropdown-Menü

Einzelne Menüpunkte aus der Desktop-Version werden gesammelt und öffnen sich als Dropdown-Menü, wenn das Feld angetippt wird. Damit sich die Navigation so verhält, bedarf es nur dem HTML-Tag <select>. Allerdings legt sich die Navigation dann über den Inhalt.

  1. Toggle-Navigation

Die Toggle-Navigation verhält sich wie ein simuliertes Dropdown-Menü, jedoch verschiebt sich der Inhalt mit dem Aufklappen nach unten. Hier hat man die Option, durch anklicken eines Menüpunktes, eine Unterebene zu öffnen – der Rest wird dann nach unten geschoben.

  1. Navigation Off Canvas

Hier wird die Navigation außerhalb des sichtbaren Bereichs platziert. Mit Klick auf ein Icon wird die Navigation dann sichtbar. 

  1. Hamburger-Icon

Am bekanntesten ist wohl das Menü-Icon, das viele als Hamburger-Menü bezeichnen. Es sind einfach nur drei kurze übereinander angeordnete Striche.

Welches Navigationsdesign nutzen Sie für die mobile Version? Schreiben Sie uns Ihre Erfahrungen gern als Kommentar.

Ein Gedanke zu „Doppelte Menüs für Desktop und Mobile sind kein Problem

  1. Wir verwenden den „Hamburger“ … wobei so richtig glücklich mich keine der Lösungen macht. Unsere Analysen zeigen, dass die Mobil-User insgesamt deutlich weniger Menüs nutzen, als Desktop-User. Ist das nur mein „Problem“ oder teilen andere diese Beobachtung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.