Warum in die Ferne schweifen, wenn das Gute liegt so nah? Vielen Magento-Shops sieht man ihre Herkunft an. Das ist auch nicht schlimm, denn dem Endkunden ist es herzlich egal, ob zur Entwicklung eines Magentoshops das standardisierte Stylesheet Pate stand oder ein komplett neues “from scratch” geschrieben wurde. Das geübte Auge erkennt nach einer gewissen Zeit die Gemeinsamkeiten der Shops, was aber nicht heißt, dass sie alle gleich aussehen.
Wer als Shopbetreiber einmal einen Blick in seine Analytics-Software wirft, wird feststellen, dass die mobilen Zugriffe über die letzten Jahre stark zugenommen haben. Kein Wunder, greifen doch täglich 25 Millionen Menschen in Deutschland mobil auf das Internet zu. Tendenz steigend. (Quelle: BVDW) Tablets und Smartphones machen es einfach, mal schnell im Internet zu surfen oder spontan zu shoppen, was gerade benötigt wird. Couchsurfing ist stark im Kommen. Doch nicht immer sieht der eigene Online-Shop auf den kleinen Displays so gut aus, wie man sich das erhofft.
Der erste Gedanke ist klar: die Webseite mobile-fähig zu machen. Der Dämpfer kommt dann, wenn die Internetagentur die Abschätzung für den mobilen Relaunch liefert. Schnell wird klar, dass das nicht aus der Portokasse bezahlt werden kann. Die Preise sind gerechtfertigt, mobile-fähige Templates kosten einiges an Aufwand, Blut, Schweiß und Tränen beim Entwickler. Zwar sind adaptive Designs (Aktivieren von bestimmten Designs bei bestimmten Bildschirmauflösungen / Viewports) noch etwas günstiger als responsive Designs (dynamische Anpassung eines Templates an vorhandene Bildschirmauflösungen), aber nicht immer liegt ein komplettes mobiles Redesign im Budgetrahmen des Kunden. Häufig sind es auch nur kleine Anpassungen nötig, weil bestimmte Funktionen auf den Tablets nicht funktionieren.
Sehr gerne weigern sich Dropdown-Menüs, auf dem iPad zu funktionieren. Der Druck auf einen Menüpunkt öffnet häufig den dahinter liegenden Link statt das Menü zu öffnen. Anders herum wäre es auch nicht im Sinne des Erfinders, wenn der Druck auf einen Menüpunkt ausschließlich das Menü öffnet statt den dahinter liegenden Link. Das ist eben der Nachteil der Touch-Steuerung gegenüber der Bedienung mit der Maus, das Bedienkonzpt ist ein gänzlich anderes. Wir trafen bei einem unserer Kunden auch auf eben dieses Problem, welches gelöst werden musste: Das Dropdown-Menü war im iPad nicht bedienbar, die Dropdownmenüs öffneten sich nur kurz, stattdessen wurde die oberste Kategorie geöffnet.
Viele Wege führen zum iPad
Es haben sich schon mehrere Entwickler zu diesem Thema Gedanken gemacht. Eine Lösung ist die komplette Umstrukturierung des Menüs. Oberpunkte werden einfach mit einem Anker versehen, welcher auf einen Hover oder eben Touch reagiert und somit das Menü öffnet. Allerdings darf dieser Anker selbst kein anklickbarer Link sein, da dieser dann nicht mehr funktioniert. Somit muss einiges an Zeit in die Restrukturierung des Menüs fließen, nicht zuletzt aus Sicht der Usability. Eine schnelle Lösung stellt das also nicht dar, zumal bei Änderungen an der Menüstruktur auch der Designer einbezogen werden muss.
JavaScript
Andere Lösungsvorschläge basieren häufig auf JavaScript. Hier sollte man sich aber darüber im Klaren sein, dass hier der Aufwand den Nutzen unter Umständen übersteigt. Die Implementierung ist vielleicht nicht so aufwendig, wohl aber die Konsequenzen. Je nach Umfang der Skripte kann die Performance der Seite in Mitleidenschaft gezogen werden, was sich a) auf die Usability und b) auf die Suchmaschinen niederschlägt. Einige dieser Scripts setzen aber voraus, dass das Menü ohnehin schon auf JavaScript basiert, was den Nachteil der Performance hinfällig macht. In unserem Fall basierte die magentoeigene Lösung zwar auf JavaScript, aber die Lösung sollte möglichst ohne zusätzlichen Skriptaufwand erfolgen.
Einige Lösungen per JavaScript gibt es hier zum Nachlesen:
http://eightmedia.github.io/hammer.js/
http://www.prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices
http://appcropolis.com/howto/implementing-doubletap-on-iphones-and-ipads
http://wiki.gestureworks.com/index.php/GestureWorksFlash:Double_Tap
https://coderwall.com/p/3uwgga
https://gist.github.com/asgeo1/1652946
Einfache Skriptlösungen
Einer der vielversprechendsten Vorschläge schien zu schön, um wahr zu sein. Über ein kleines JavaScript innerhalb des Ankers sollen sich die Menüs öffnen lassen. Innerhalb des Links muss folgendes Snippet gesetzt werden:
onClick=”return true”
Das funktionierte auch, aber leider nicht ganz so wie gewünscht. Auf diese Weise lassen sich zwar recht einfach Drop-Down-Menüs bauen, da sich nach einem Touch tatsächlich das Menü öffnet. Leider funktioniert der darunterliegende Link auch nach einem Double-Tap nicht, also fiel diese Lösung für unseren Anwendungsbereich aus. Um ein Mega-Dropdown zu öffnen, ist diese Lösung aber die eleganteste, allerdings enthielt unser Menü unter dem obersten Listenelement tatsächlich eine Seite, die dann aber nicht mehr angesteuert werden konnte. Ebenso wie alle Untermenüs.
Lösungen mit CSS – Der heilige Gral
Uns war wichtig, dass die Lösung, so einfach und somit effizient wie möglich ist. Somit tendierten wir dazu, wenn möglich, alles per CSS zu lösen.
Letztendlich war dieser Ansatz auch genau die Lösung, die wir benötigten. Mit wenigen Anpassungen im CSS wird das Menü iPad-kompatibel.
Die styles.css ist zwar recht groß, aber dafür gut strukturiert. Das Stylesheet findet sich unter /skin/frontend/[TEMPLATENAME]/default/css/styles.css. Hier finden sich folgende Codezeilen:
/* Show menu */
#nav li ul.shown-sub,
#nav li div.shown-sub { left:0; z-index:999; }
#nav li .shown-sub ul.shown-sub,
#nav li .shown-sub li div.shown-sub { left:100px; }
Diese müssen leicht verändert werden zu:
/* Show menu */
#nav > li:hover > ul,
#nav li ul.shown-sub,
#nav li div.shown-sub { display:block; left:0; z-index:999; }
#nav ul li:hover > ul,
#nav li .shown-sub ul.shown-sub,
#nav li .shown-sub li div.shown-sub { display:block; left:10px; }
Somit sind die Elemente nicht nur vom magentoeigenen JS abhängig, sondern funktionieren auch beim einfachen Hover. Zudem wurden den Listen noch klarere Definitionen als Block zugewiesen, um die Browserkompatibilität zu erhöhen. Nun funktioniert das Öffnen der Dropdown-Menüs im auf dem iPad mit einem Double-Tap. Das heißt, die erste Berührung des Menüelementes öffnet das unter Umständen vorhandene Dropdown-Menü. Die zweite Berührung desselben Elementes öffnet den Link dahinter. Das ist aus Sicht der Usability das günstigste Vorgehen.
Android-Geräte haben von Haus aus nicht dieses konkrete Problem. Dropdown-Menüs können hier, auch ohne manuelle Anpassung, über einen langen Druck auf das Menüelement geöffnet werden. Das Problem betrifft tatsächlich nur den Safari-Browser, den den langen Druck falsch interpretiert und sein eigenes Copy-Paste-Kontext-Menü öffnet, ohne sich weiter um das Dropdown-Menü zu scheren.
