Webseiten für mobile devices mit Touchsteuerung

Der Sommer geht zur Neige und ich habe mal wieder etwas mehr Zeit und Lust, mein Blog aufzufrischen. In der letzten Zeit habe ich mich vermehrt mit der Entwicklung von mobilen Webseiten beschäftigt. Das ist heutzutage auch kein Hexenwerk mehr. Da gibt es komplette APIs wie jQuery mobile, hervorragend dokumentierte Vorlagen vor Mobile Boilerplate oder den guten alten Weg, mal sowas selbst zu erstellen. Die Browser in den aktuellen mobilen Betriebssystemen stehen den Desktopversionen in fast nichts nach. Vielleicht haben Sie an mancher Stelle auch noch mehr zu bieten. Nämlich eine Touchsteuerung. Und da sind wir schon bei der Sache.

Webseiten für mobile Geräte sind sehr schnell und mit den gleichen Kenntnissen zu Erstellen, wie normale Webseiten. Die paar Besonderheiten spielen hier mal keine Rolle. Aber eine eigene App sieht meist schicker aus und lässt sich auch noch schöner bedienen. Da sind zum Beispiel Seitenwechsel per Swipe, also mit einem Wischen über den Screen, oder animierte Blendeffekte.

Damit ist aber auch Schluss, denn das alles kann man schon mit HTML5/CSS3 und JavaScript erledigen. Heute möchte ich mal was zum Thema Gestensteuerung schreiben.

Wer die jQuery mobile API einsetzt, hat das Rüstzeug schon an der Hand. Auch die animierten Seitenübergänge sind schon out-of-the-box dabei. Natürlich kann man sich auch selbst der Sache annehmen und die Steuerung mittels Plugins oder eigenen Scripts aufbauen. Als Plugin gibt es im jQuery Bereich TouchSwipe, welches alles notwendige mitbringt. Auch eine gute Dokumentation anhand von Beispielen ist vorhanden. Wer aber lieber selbst in den Code eingreifen möchte, ist mit der Beschreibung von Padilicious gut bedient.

Ich verwende für meine Seite das jQuery Plugin TouchSwipe. Hier kann man mittels swipe-Funktion einen Listener auf beliebige Elemente verbinden. im Listener gibt man die aufzurufenden Funktionen beim Eintreten der Events an. Zusätzlich kann man noch eine Reihe von Optionen mitgeben, wie mögliche Swiperichtungen, Auswirkung auf Seitenscrolling, Länge der Swipestrecke, etc. Wenn man dann noch einen schicken Seitenübergang mittels Blendeffekten möchte, wird man bei jQuery auch fündig. Aber auch im Internet gibt es hierzu dutzende Bibliotheken. Eine interessante davon ist jQTouch, die aktuell aber nur mit dem iPhone arbeitet.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google Foto

Du kommentierst mit Deinem Google-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s