Fängt man nun an, sich über mobile Webdesign und Apps zu informieren, so werden einem schnell einige Hürden klar: Auch wenn das iPhone auf den ersten Blick zu dominieren scheint, so sind dennoch die Nutzer anderer Geräte in der Mehrzahl. Das bedeutet, man muss seine Website für jedes Gerät optimieren (iPhone, Android, Symbian, Windows Mobile…) und im besten Fall für jedes OS (Betriebssystem) ein eigenes App entwickeln. Gerade für das iPhone wird einem hier schnell die nächste Hürde klar: Es müssen verschiedene Programmiersprachen gelernt werden und im Falle des iPhones muss auch noch ein Mac her.

jQTouch

jQTouch ist ein Plugin für JQuery, mit dem sich kinderleicht Mobile Websites und Webapplikationen entwickeln lassen. Hier seien einmal einige Vor- und Nachteile dieser Methode aufgezeigt: Vorteile:

• Eine Lösung für alle Endgeräte
• Sehr einfache und unkomplizierte Entwicklung
• Leicht anpassbar
• Von anfang an stylisches Webdesign

Nachteile:

• Apps lassen sich nicht in die verschiedenen Marketplaces einbinden
• Es lassen sich nur begrenzt die vielen Funktionen der Geräte Nutzen

Ein Beispiel

So, nun will ich einmal demonstrieren, wie leicht sich eine schicke Mobile Website mit ansprechendem Webdesign mit jQTouch realisieren lässt. Als erstes muss hierzu ein Grundgerüst aus einfachem HTML her. Dieses Gerüst besteht im Wesentlichen aus einfachen Listen und Divs mit dem Content. Also fügen wir als erstes folgenden Code in BODY-Tag unserer Seite:

<div id="seite1">
<div class="toolbar">
<h1>Seite1</h1>
<a class="button flip" href="#login">Login</a></div>
<ul class="edgetoedge">
	<li><a href="#seite2">Seite2</a></li>
	<li><a href="#seite3">Seite3</a></li>
</ul>
</div>
<div id="login">
<div class="toolbar">
<h1>Login</h1>
</div>
<ul class="edgetoedge">
	<li><a href="#seite2">Seite2</a></li>
	<li><a href="#seite1">Seite1</a></li>
	<li><a href="#seite3">Seite3</a></li>
</ul>
</div>
<div id="seite2">
<div class="toolbar">
<h1>Seite2</h1>
</div>
<ul class="edgetoedge">
	<li><a href="#seite3">Seite3</a></li>
	<li><a href="#seite1">Seite1</a></li>
</ul>
</div>
<div id="seite3">
<div class="toolbar">
<h1>Seite3</h1>
</div>
<ul class="edgetoedge">
	<li><a href="#seite2">Seite2</a></li>
	<li><a href="#seite1">Seite1</a></li>
</ul>
</div>

Hier kann man sich das Ganze anschauen.

Nun ein paar Worte zu den gewählten IDs und Klassen.

Eine einzelne Seite wird immer mit einem DIV-Tag umschlossen, welches als ID den namen der Seite besitzen muss. Hierdurch wird klargemacht, dass dieser Inhalt bei einem Link auf die ID angezeigt werden soll. Darauf folgt ein DIV mit der Klasse “toolbar”. Dieses beinhaltet zum einen die Überschrift der Seite (umschlossen von H1-Tags) und kann auch noch einen weiteren Link beinhalten, welcher dann mit im oberen Bereich der Seite angezeigt wird. Was dies genau bedeutet wird erst im nächsten Schritt deutlich.

Als nächstes folgt eine einfache Liste (UL-Tag) mit der Klasse) “edgetoedge”. Im Prinzip stellt diese Liste die Hauptnavigation dar. Die Links der Listenelemente zeigen hierbei jeweils auf den entsprechenden DIV des Inhalts, der bei Click angezeigt werden soll. Diese Gesamtkonstruktion muss für jede Seite angelegt werden.

Nun sieht unsere Seite aber noch nicht sehr nach mobile webdesign oder einem App aus. Daher muss dem ganzen jetzt mit jQTouch Leben eingehaucht werden. Dann sollte auch die vorher erwähnte Funktionsweise klarer werden. Also fügen wir in den Header-Bereich unserer Seite folgenden Code hinzu:

<script type="text/javascript" src="jqtouch/jquery.1.3.2.min.js"></script>
<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="jqtouch/jqtouch.css"/>
<link rel="stylesheet" type="text/css" href="themes/jqt/theme.css"/>
<script language="javascript"> 
    $.jQTouch({
        statusBar: 'black'
 
    });
</script>

Das Ergebnis ist hier zu sehen

Tadaa, fertig ist die erste optimierte mobile Webseite. Im letzten Teil wurden die für jQTouch benötigten CSS und Javascript Dateien eingebunden. Da wäre zum einen jQuery, welches die Rahmenbibliothek für jQTouch darstellt. Dann natürlich jQTouch selbst und das dazugehörige Stylesheet. Ich habe hier der Einfachheit halber ein Standard Template eingebunden. Prinzipiell ist dieses sehr einfach anpassbar und muss somit nicht zwingend mit eingebunden werden. Für den erfahrenen Webdesigner sollte es kein Problem darstellen, ein eigenes Template zu schreiben.

In dem JavaScript Code findet die Initialisierung einer Grundvariablen statt. Hier lässt sich zum beispiel auch ein Icon festlegen:

<script language="javascript"> 
    $.jQTouch({
	icon: 'icon.png',
        statusBar: 'black'
 
    });
</script>

Hier findet sich eine Übersicht aller Initialisierungoptionen. Die hier im Beispiel verwendeten Klassen “edgetoedge”, “button” und “flip” dienen im Prinzip zur festlegung des Styles der verschiedenen Links. jQTouch beinhaltet verschiedene Styles, was bei einem Klick auf den Link geschehen soll, also auf welche Weise der Inhalt wechseln soll. Am Besten lassen sich diese durch einfaches Probieren verstehen.

Dies war nur ein sehr einfaches Beispiel um eine kleine Einführung in jQTouch zu bieten. Es bietet natürlich noch zahlreiche weitere Funktionen, welche jedoch den Rahmen dieses Beitrages sprengen würden. jQTouch gibt es hier zum Download mit allen benötigten Dateien und einigen weiteren Demos, mit denen man sich die verschiedenen Funktionen anschauen und verstehen kann. Gerade für die Entwicklung von Apps bietet  jQTouch noch deutlich mehr. Viel Spaß beim Probieren und Entwickeln!