Das perfekte Mobile-Menü – gibt es das?

Das Problem mit den Handys

Bei Smartphones kann man nicht immer mit einer schnellen und stabile Internet-Verbindung rechnen. Das wirkt sich insofern auch auf die Menüführung aus, dass es mühsam ist, immer wieder neue Seite aufrufen zu müssen, um zu den untergeordneten Seiten zu gelangen – wie es dem klassischen Ausklappmenü ist. DropDown/Flyout-Menüs sind hier zunächst deutlich im Vorteil, auch wenn sie etwas mehr Quelltext enthalten.

Tipp: Am Ende der /index.php VOR echo $output; folgende Zeile einfügen:

$output = str_replace(WB_URL.'/',
 '/',
 $output);

Das kann Code-Wüsten im Menü drastisch verkleinern.

Die Sache mit dem MouseOver (hover)

Den gibt es auf Touchscreens schlichtweg nicht – während er am PC mit der Maus sehr wesentliche Praxis ist – vor allem bei DropDown/Flyout-Menüs. Das hat weitreichende Folgen.

Zum einen versuchen Browser von Handys, dieses Problem auszugleichen. Schließlich sollen nicht nur optimierte Seiten funktionieren, sondern alle, auch steinalte.

Problem wiederum: Hier kocht jeder Hersteller sein eigenes Süppchen, Apple anders als Android, und dann gibt es noch andere Randerscheinungen.

Und: Das ändert sich auch noch von Version zu Version. Zum Haare raufen...

Einfach halten!

Je mehr jQuery im Spiel ist, umso schwieriger wird es. Auch vor allzuvielen CSS-Breakpoints sollte man sich hüten. Ich mache in der Regel nur 2: <768px und <400px, nur selten noch Zwischenschritte mit „kosmetischen“ Korrekturen.

 

Smartphone-Menü Show

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 ;-)

Einfach den QR-Code scannen.

Oder Klick:  Smartphone-Menü Show

---

 

Back