Smartphone-Menü Show

Wurbelfritzer Sepp (wbcemaster!) on 16.03.2015

Welches Menü ist das beste für deinen Zweck? Hier kannst du einige Menü-Typen für Smartphones checken, mit kurzen Erklärungen dazu. Sinnvollerweise am Smartphone ;-)

Mit Klick auf die Links schaltest du das Design um, bleibst aber auf dieser Seite. 

Hinweis: Hier hat die Seite "Suche" 2 Unterseiten und die Seite "Unterseiten" viele, bis zu 4 Ebenen verschachtelt.
Der QR-Code enthält den Link zu dieser Seite.

 

 

Klassisches Aufklappmenü

Erst von übergeordneten Seiten erreicht man die Unterseiten.

Beispiele: Oiphyx

Das funktioniert immer und überall. Ein weiterer Vorteil: Die Struktur wird nicht aufgebrochen, die Inhalte werden am Smartphone genauso erreicht wie auf der Desktop-Ansicht: Von der Übersicht ins Detail.

Nachteil: Am Handy ist ein Klick mehr nötig (Menü sichtbar machen, Link anklicken) und zusätzlich müssen oft mehrere Seiten geladen werden, um zu einem tief verschachtelten Menüpunkt zu gelangen. Das kann nerven.

 

Klassisches Dropdown-Menü

Beispiele: Sobresot | Darkspace | Tessa

Das klemmt gerne mal, weil diese Art Menü generell ohne Hover nur unzureichend funktioniert und deswegen die Browser mehr oder weniger unterstützend eingreifen. Das ist aber nicht immer sinnvoll, sondern kann je nach Browser/OS zu seltsamen Effekten führen. Gerade Apple spielt hier gerne mal den IE6-Nachfolger und kann viel Ärger machen.

Darüber hinaus können die vielen Links verwirrend wirken und man neigt dazu, übergeordnete Seiten zu ignorieren. Auf diesen sollte also nichts wesentliches stehen.

 

Options-Listen mit dem kompletten Menü

Beispiel: Megamenu template

Spartanisch, aber nicht die schlechteste Wahl, zumindest nicht, wenn die Zahl der Menüpunkte überschaubar ist. Man sollte sich auch nicht von der Darstellung am PC täuschen lassen; am Handy wird eine Browser-eigene Darstellung gewählt, die deutlich besser aussieht und auch besser funktioniert. Nachteil: es kommt zu einem Stilbruch und alles sieht gleich aus. Unterseiten kann man gerade mal durch „--“ kennzeichen.

 

Alle Menüpunkte offen als Liste

Auch hier: 100e Menüpunkte sind so nicht brauchbar darstellbar, aber für zb 20 geht das gut. Natürlich muss man viel scrollen, aber das geht am Handy deutlich bequemer als am PC. Das Design und vor allem die Farben bleiben erhalten.

Derzeit kein Beispiel, aber alle Templates, die in der Desktop-Ansicht ein Dropdown-Menü haben, lassen sich sehr leicht hierzu ändern.

 

Weitere Varianten:

Stehendes Menü am Rand.

Beispiele: harbswod | stygg

Üblicherweise ist dieses zuschaltbar und drückt den Seiteninhalt soweit nach rechts, dass dieser erst nach rechts-scrollen wieder ganz sichtbar ist.

Vorteil: Man ist nicht zum Klick gezwungen und die Menüleiste fügt sich gut in das Design ein. Der Unterschied zwischen Desktop und Smartphone ist nicht so deutlich – was gerade bei besonderen Designs von Vorteil sein kann.

Nachteil: Es gibt Probleme mit Hintergrundbildern, diese werden manchmal unpassend skaliert. Da es mit „position:fixed“ immer Probleme gibt, bleibt das Menü – auch offen – meist ganz oben.

 

Buttons

Beispiele: Oiphyx | Wodmasto

Das ist natürlich eine sehr aufwändige Sache, überhaupt dann, wenn man auch noch etwas wie Icons will. Mit Icon-Fonts kommt man halbwegs ladezeit-schonend durch, bei vielen bunten Bildern wird es haarig.

Icons sind nichts für Anfänger und sie sind auch nicht unbedingt für jeden klar erkennbar.

 

Mischungen

Beispiele: Fyorx Responsive | Lichtfjyr

In der Praxis sind Unterseiten nicht gleichmäßig verteilt. Mitunter ist es daher sinnvoll, untergeordnete Ebenen am Handy zusammenzufassen, während sie am PC getrennt sind.

Man hat also zb bei „Angebot“ 20 Unterseiten, bei „Kontakt“ aber nur einen direkten Link. Bei einer „Gesamtliste“ würde „Kontakt“ untergehen, weil alles voller Produkte ist.

Hier (Templatesuche) würde der Menüpunkt „Unterseiten“ also „Produkte“ entsprechen: Die volle Bandbreite, während andere Seiten sofort erreichbar sind.

Ganz was anderes: Topics

Anders als WB-Seiten stehen Topics-Seiten nicht insgesamt im Menü, sondern erzeugen quasi ihr eigenes Menü. Da Topics nahezu zwingend Seitenbilder voraussetzt, sind diese „Submenüs“ weit auffälliger als normale Menüpunkte und lassen sich mit etwas CSS-Kenntnissen sehr gut für Smartphones aufbereiten.

Neuere Themen:

Additional Pictures

Back

Kommentar

email address:
Homepage:
URL:
Comment:

Name:

E-Mail (required, not public):

Website:

Kommentar :

Prüfziffer:
20 minus 6  =  Bitte Ergebnis eintragen