© DrHitch/Shutterstock.com
UX Design für Tablet-Websites

8 Touch mit JavaScript


Technisch gesehen gibt es zurzeit noch keinen HTML5- oder JavaScript-Support für Touch-Events. Apple hat in iOS Safari ein Set von „Touch- und Gesten-Events“ [1] implementiert. Sie befinden sich noch im Draft beim W3C. Es ist damit zu rechnen, dass sie übernommen werden. Sie stehen auch in Android, Chrome und Opera zur Verfügung und heißen touchstart, touchend, touchmove, touchcancel. Diese Handler im iOS ersetzen automatisch alle Click-Events durch Touch-Events und überschreiben die reguläre ~300-ms-Verzögerung beim Klicken. Das können Sie beobachten, wenn Sie einen normalen CSS-Hover-Zustand auf einen Link haben. Sie tippen diesen mit Ihrem Finger an und sehen kurz, wie sich zum Beispiel die Farbe ändert. Dabei ist der Hover-Zustand eigentlich nur für einen Mausklick vorgesehen. Microsoft mit dem IE10 hat wiederum andere Event-Klassen eingeführt, die „Pointer Events“ genannt werden und zurzeit die Maus, den Finger-Touch und Eingabestifte unterstützen [2].

Um Touch-Events Website-übergreifend auf Ihrem Tablet anzuwenden, zum Beispiel, um einen Seitenwechsel mit einer Swipe-Bewegung auszulösen, müssen Sie diese Funktionen zusätzlich über eine JavaScript-Bibliothek hinzufügen. Neben dem bekannten jQuery Touch und den jQuery-Mobile-Frameworks [3] sollten Sie sich auch mal die geräteübergreifenden Lösungen von YUI 3.2.0, das auf jQuery basierende schlanke Framework Zepto und mootools-mobile ansehen [4]. Touch und jQuery Mobile sind aufgrund ihrer guten Dokumention schnell zu erlernen. Zu kritisieren sind die hohen Datenmengen und die sehr starken optischen Ähnlichkeiten unter den damit erstellten Anwendungen. Gerade Zepto [5] ist wegen seiner sehr kleinen Datenmenge sehr attraktiv. Wenn Sie mit jQuery vertraut sind, werden Sie mit diesem Framework keine Probleme haben. Generell sollten Sie beachten, dass Android-Browser ab 2.1 – in Abhängigkeit vom Endgerätehersteller – Touch-Events unterstützen. Auch kann die Funktionalität, z.B. der Swipe, vom User in den Einstellungen des Android-Browsers deaktiviert werden.

Links und Quellen

[1] https://developer.apple.com/library/safari/#documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html

[2] http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx

[3] http://jquerymobile.com/

[4] http://yuilibrary.com/yui/docs/event/touch.html

[5] http://zeptojs.com/

[6] https://github.com/cpojer/mootools-mobile

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang