Mit einfachen Mitteln zur mobilen Website: TYPO3 für das iPhone optimieren

Der Workshop zeigt Ihnen, wie Sie eine auf TYPO3 basierende Website mit einfachen Mitteln so optimieren, dass sie auf dem iPhone perfekt dargestellt wird. Zum Einsatz kommt dabei das Framework jQTouch [1], mit dem Sie Ihrer Website auf einfache Weise eine Navigation verpassen können, die der einer nativen iPhone-App stark ähnelt.

Grundsätzliche TypoScript-Konfiguration

Unabhängig davon, ob Sie Ihre Website gezielt für das iPhone optimieren oder nicht, sollten Sie einige Einstellungen vornehmen, damit die Website in jedem Fall ordentlich auf dem iPhone dargestellt wird. Der Aufwand ist gering, der Nutzen für Besucher mit einem iPhone aber hoch. Die wichtigste Einstellung ist hierbei der Viewport [2]. Über „page.headerData“ im TypoScript-Template können Sie diese Einstellung leicht vornehmen:

page.headerData.10=TEXT
page.headerData.10.value (
	<meta name="viewport" content="width = 630">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<link rel="apple-touch-icon" href="fileadmin/el-logo.png"/>
)

Das Listing setzt nicht nur den Viewport auf die reale Breite Ihrer Website (bspw. 630 Pixel), sondern ermöglicht iPhone-Nutzern auch, die Website als Webanwendung auszuführen, in dem er das Lesezeichen auf den Home-Screen legt. Tut er das, ist auf dem Home-Screen das im Listing angegebene Icon (ideale Größe: 60 x 60 Pixel) zu sehen.

Aufbau einer Seitenstruktur

Home
	Produkte
		Zeitmaschinen
			Bring-me-back
			Timedevil
			Wells-Dream
		Küchengeräte
			Siemens
			Bosch
	Impressum

Geht es darum, eine Website nicht nur zu optimieren, sondern sie gezielt für das iPhone zu programmieren, muss man sich im Vorfeld einige Gedanken zur Seitenstruktur machen. Je nachdem, wie sehr sich die Seite am Userinterface des iPhone-Betriebssystems orientieren soll, unterliegen Entwickler Einschränkungen bei der Seitenstrukturierung.

Die Hauptproblematik liegt darin, das anders als bei einer „normalen“ Website, nicht hinter jeder Seite im Seitenbaum auch Content liegt. Durch den begrenzten Platz ist es zudem nötig, den Inhalt weiter zu gruppieren, ohne die Hierarchie dabei zu tief werden zu lassen. Außerdem ist es nötig, für jede Seite eine eigene Sitemap zu erstellen, die es Besuchern ermöglicht, innerhalb der Seite zu navigieren. Ein Beispiel verdeutlicht das Problem.

Bei einer klassischen Website würde auf der Seite „Produkte“ eine Auswahl besonderer Produkte und die Produktgruppen „Zeitmaschinen“ und „Küchengeräte“ zu sehen sein. Das iPhone-OS hat allerdings die Listendarstellung als Bedienkonzept etabliert.

Also stellt sich die Frage, wie man die oben gezeigte Navigationsstruktur auf dem iPhone umsetzt. Denkbar wären beispielsweise folgende Varianten:

• Erst die Produktgruppen (Zeitmaschinen und Küchengeräte) als Listenansicht, darunter der Seiteninhalt wie bei einer klassischen Webseite
• Erst die besonderen Produkte als Liste und darunter die Produktgruppen

Sie sehen: Es ist nicht ganz einfach. Vor allem bei mehreren Produktgruppen ist klar, das diese als Listenansicht aufgeführt werden. Auf der selben Seite auch noch andere Inhalte unterhalb der Listenansicht darzustellen, wäre nicht sinnvoll. Eine Alternative wäre, besondere Produkte durch eine etwa 200 Pixel hohe Slideshow aufzuzeigen. Darunter wäre dann die Liste mit den Produktgruppen zu sehen.

Wie auch immer Sie das Problem lösen: Sie müssen sich genau überlegen, wie die Struktur und der Informationsfluss Ihrer Website aufgebaut sein soll.

Eigener Seitenbaum

Wenn Ihre Website ausschließlich für das iPhone oder mobile Geräte entwickelt wird oder wurde, kommen Sie mit einem einfachen Seitenbaum aus, was die Arbeit deutlich vereinfacht. Wird die Website dagegen auch von normalen Desktop-Browsern aus aufgerufen (was die Regel sein dürfte), sollten Sie auf eine parallele „Schattenstruktur“ ausweichen, um nicht zwei Webauftritte pflegen zu müssen (siehe unten).

In einem eigenen Seitenbaum können Sie die Struktur optimal für das iPhone abbilden. Ausgehend vom obigen Beispiel, benötigen Sie außer „Home“ auf jeden Fall die Seiten „Produkte“ und „Impressum“. Interessanter wird es unterhalb der Seite „Produkte“. Theoretisch wäre es möglich, alles darunter liegende in eine Seite zu packen und nur noch innerhalb der Seite zu navigieren. Das würde die Seite allerdings unnötig aufblähen. Sinnvoller wären hier eigene Seiten. Jede Produktgruppe bekommt dabei eine eigene Seite, es gäbe dann eine Seite namens „Küchengeräte“ und eine namens „Zeitmaschinen“, auf der drei Produkte zu sehen sind. Auf der Seite „Zeitmaschinen“ würden Sie also drei Contentelemente anlegen, für jedes Produkt eins.

Verwendet man ein TYPO3-Contentelement „Sitemap“ vom Typ „Section-Index“, das den Inhalt der Seite auflistet, können Frameworks wie iUI oder jQTouch daraus automatisch eine navigierbare Listenansicht im iPhone-Style generieren. Ist die Seite einmal geladen, verhält sie sich von der Geschwindigkeit her zudem wie eine native Anwendung.

Schattenstruktur

Eine Schattenstruktur sollten Sie immer dann nutzen, wenn eine klassische Desktop-Version der Website bereits vorhanden oder geplant ist. Im Seitenbaum bauen Sie dabei eine zweite Seitenstruktur auf, die für die Navigation auf dem iPhone optimiert ist. Die Inhalte in dieser Seitenstruktur sind lediglich Referenzen auf die Original-Inhalte in der Desktop-Version.

TYPO3 gibt so auf den iPhone-Webseiten die Inhalte der referenzierten Desktop-Webseiten aus, verwendet dabei aber die TypoScript-Einstellungen der Schattenstruktur. Steht die Schattenstruktur, wird ihr über einen Domain-Record eine eigene Domain gegeben, die von den iPhone-Nutzern angesteuert werden kann. Alternativ können Sie iPhone-Nutzer anhand des übertragenen „useragent“ über eine Condition auf die iPhone-Website umleiten:

[useragent = „iPhone“] && [globalVar = TSFE:id > 1]
page.meta.refresh = 1, url...
[end]

Weiterlesen auf Seite 2 »