Tutorial: Framework jQuery Mobile – Aufbau einer Mobile Version Ihres Internetauftritts

Dieses Tutorial zeigt den grundlegenden Aufbau einer Mobilversion unter Verwendung des Frameworks jQuery Mobile. Es werden Kenntnisse zu HTML und CSS vorausgesetzt. Sämtliche Links zu benötigten Dateien finden Sie am Ende dieser Seite.

Die Anzahl der Mobiltelefone, die Internetseiten anzeigen können, steigt von Tag zu Tag. Grund genug, darüber nachzudenken, eine eigene Mobile Version der eigenen Website anzubieten, denn für Handys und Smartphones gelten ein wenig andere Regeln, als für Desktop-Rechner, so dass die “normale” Version der Seite meist nicht optimal auf Mobiltelefonen funktioniert. Als Beispiele seien die kleinere Auflösung und die geringere Rechengeschwindigkeit von Handys erwähnt.

jQuery Mobile optimiert Ihre Inhalte für Mobilgeräte, kümmert sich um Angelegenheiten wie Portrait- und Landscape-Mode und basiert, wie unschwer zu erraten ist, auf dem JS-Framework jQuery. Stand Mai 2011 wird eine Alpha-Version zum Download angeboten, die bereits sehr gut funktioniert.

Was wir zur Umsetzung benötigen, hält sich in überschaubaren Grenzen:

  • Ein eigenes HTML-Template für die Mobile Version,
  • Das Javascript-Framework jQuery,
  • sowie das jQuery Mobile Framework, das die Funktionen für Mobilgeräte bereitstellt

Nachdem Sie die beiden jQuery Frameworks heruntergeladen haben, können wir bereits mit der Erstellung des HTML-Templates beginnen. Zunächst müssen wir jQuery in unserem Template verfügbar machen. Binden Sie die benötigten Dateien wie folgt im Head Ihres HTML-Templates ein:

Die erste Zeile macht das Stylesheet von jQuery Mobile verfügbar, die beiden anderen liefern die Javascripts. Nun hängen wir ein weiteres Stylesheet unterhalb dieser Zeilen ein. Dies ermöglicht uns das Überschreiben von Werten aus dem Default-CSS von jQuery Mobile.

Würden wir die Änderungen direkt in der Datei jquery.mobile-1.0a4.1.css erledigen, könnten wir spätere Updates dieser Datei nicht mehr einfach einspielen, ohne unsere Änderungen zu verlieren.

Nun machen wir uns an den strukturellen Aufbau des Templates. Insgesamt wollen wir folgende Bereiche abbilden:

  • Einen Header
  • Einen Navigationsbereich
  • Den Contentbereich
  • Einen Footer

jQuery Mobile basiert auf Standardelementen, denen bestimmte Funktionen zugewiesen werden. Im Markup sieht das z.B. wie folgt aus:

Damit teilen wir jQuery Mobile mit, dass dieser Inhaltsbereich eine Navigationsleiste sein soll.

Als Haupt- oder Elternelement, das allen weiteren Code beinhaltet, fungiert folgendes Element:

Hier die weiteren nötigen Elemente zur Realisierung unseres Templates:

Die Strukur unseres Body-Bereich unseres Templates könnte demnach wie folgt aussehen:

Jetzt müssen wir das Template mit Inhalten (H1 in den Headerbereich – ul/li-Navi in die Navbar…) befüllen und erhalten z.B. folgendes Ergebnis:

Für Handys optimerite Website unter Verwendung des Standard-CSS

Damit sind die Anforderungen, die wir an unser Template gestellt hatten, erfüllt. Jetzt können wir durch entsprechende Notationen in der Datei mobile.css Farben, Schriftarten usw. anpassen.

Fazit:

Mit jQuery Mobile lassen auf einfache Weise Internetseiten erstellen, die zur Anzeige auf Mobilgeräten optimiert sind. Der Alpha-Status des Projekt, lässt für die Zukunft einiges erwarten.

Wie bereits eingangs erwähnt, beschreibt dieses Tutorial lediglich den grundlegenden Aufbau der Seiten. Natürlich geht mit jQuery Mobile schon heute eine ganze Ecke mehr. Weiterführende Informationen sind in der Doku zu finden.

Zum Abschluß noch zwei Tipps:

  • Da das Debugging auf Handys unkomfortabel und schwierig ist, empfiehlt sich die Installation des Firefox-Addons “User Agent Switcher”. Damit gaukeln wir jQuery vor, z.B. mit dem iPhone 4 zuzugreifen und können weiterhin mit “Firebug” arbeiten.
  • Wer eine Mobilversion mit jQuery Mobile auf Basis des CMS TYPO3 erstellen möchte, dem sei das Tutorial “Erstellen einer Mobile Version für Ihre Website mit TYPO3 & TemplaVoila” von Dmitry Dulepov ans Herz gelegt.

Links:

Download jQuery Mobile: http://jquerymobile.com/download/
Download jQuery Framework: http://docs.jquery.com/Downloading_jQuery
Doku jQuery Mobile: http://jquerymobile.com/demos/1.0a4.1/
FF-Addon User Agent Switcher: https://addons.mozilla.org/de/firefox/addon/user-agent-switcher/
Mobile Version mit TYPO3: http://www.typo3-book.com/index.php/2011/05/12/erstellen-einer-mobile-version-fur-ihre-website-mit-typo3-templavoila/

4 Gedanken zu “Tutorial: Framework jQuery Mobile – Aufbau einer Mobile Version Ihres Internetauftritts

  1. great!!!!

    thank you for the artikel!!!! this works great for smartpfones
    …. but this is not working for symbian mobile (nokia, samsung…)… :(
    for symbians must use only html (<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"…)
    with elastic css/html…) … JQUERY mobile for symbians? is there any way to do that? any tips? pls…

    thank you

  2. Danke für den Beitrag. Er stellt einen guten Einstieg in das Thema da.
    Ich würde mich über eine Erweiterung mit tiefgreifenderen Informationen zur Erstellung von Apps für mobile Geräte freuen.
    Auch wäre es super wenn die Links am Ende des Artikels aktualisiert werden würden.
    Gruß

  3. Quality articles or reviews is the main to be a focus for
    thhe users to pay a quick isit the web page, that’s what this web site is providing.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">