TYPO3 Mobil-Site in 7 schritten

WAM
TYPO3 Codeschnipsel
Montag - 25 . Juli . 2011

Immer mehr User des Internets Surfen in Mittagspause oder in der Freizeit mit Ihren Mobilgeräten. Gut zu wissen das die eigene Webseite dann auch eine Mobile Version hat. Nun kann man, wenn noch keine Mobile Seite da ist, mit viel aufwand und hick hack noch eine zusätzliche Seite, in einem Extra auf dem Server dafür eingerichteten, Ordner erstellen oder man macht es sich mal auf die schnell mit TYPO3.

So haben wir es gemacht.

1: Als erstes haben wir uns eine Vorlage (2 x HTML + 1 x CSS) für die Mobile Seite erstellt. Die eine HTML Vorlage ist nur für die Mobile Startseite in der wir nur eine große Navigation haben. Die zweite Seite ist vom Prinzip auch ganz einfach gehalten. Header > Menü > Inhalt > Footer.
Wenn beide Seite inklusive der CSS fertig sind können diese ins Template Verzeichnis der Webseite. Wir haben alle drei Dateien in Haupt Verzeichnis, da wo auch die Hauptseite liegt, geschoben.

2 : Im nächsten schritt haben wir unsere Hauptseite etwas umgestrickt. Um eine abfrage für Mobilgräte zu gewährleisten. Als erstes im TS-Setup eine Anweisung für den Body : page.bodyTag = <body onload=”ios_redirect();”>

Dieser will natürlich auch einen Script haben. Den könnt Ihr in den Footer oder mehr nach oben packen. Die entsprechenden URL müsst Ihr nach Schritt 6 eintragen

<script type=”text/javascript”>
function ios_redirect() {
if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.match(/iPod/i))){
var question = confirm(“iPhone optimierte Version anzeigen?”)
if (question){
window.location = “http://webseite Mobile ausgabe.html”; // User klickt auf OK
}else{
window.location = “http://nicht mobile ausgabe.html”; // User klickt auf cancel
}}}
</script>

3 : Wenn das getan ist Legt ihr um Seitenbaum eurer TYPO3 Seite einen Satz Seiten an. Nehmt so viele wie Ihr auf euren Mobilen Seite haben möchtet. Es empfiehlt sich hier aber eine Mobile Hauptseite anzulegen. Und die restlichen Seiten als Mobile Unterseiten anzulegen. Da die erste Seite weder in der Sitemap noch sonst wo auftauchen soll. (außer auf dem i-Phone )

4: Dann schreibt Ihr für die Mobile-Startseite eine Setup. Hier niacht auf denn Button „Erweiterungs Template erstellen“ sondern auf den Oberen Button„Template für neue Webseite erstellen“.
Wie das genau aussieht, bleibt euch natürlich überlassen. Was aber auf jeden fall rein muss ist:

page.headerData.10 = TEXT
page.headerData.10.value (
<meta http-equiv=”Cache-Control” content=”max-age-600″ />
<meta name=”viewport” content=”width = 320″ />
<meta name=”viewport” content=”initial-scale=1, user-scalable=no” />
)

Vergesst hier nicht, die entsprechende HTML Vorlage mit der CSS einzubinden. Sonst sieht das ganz komisch aus.

5 : Legt die Inhalt auf den Mobilen Seiten an. Was Ihr hier auch immer reinhaben möchtet.

6 : Nun haben wir die i-Phone abfrage, das entsprechende Template und den Inhalt der Seiten angelegt. Aber im TS-Setup haben wir noch keine URL angelegt wohin die Webseite umleiten soll. Die sollten wir jetzt mal anlegen.

<script type=”text/javascript”>
function ios_redirect() {
if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.match(/iPod/i))){
var question = confirm(“iPhone optimierte Version anzeigen?”)
if (question){
window.location = “http://webseite Mobile ausgabe.html”; // User klickt auf OK
}else{
window.location = “http://nicht mobile ausgabe.html”; // User klickt auf cancel
}}}
</script>

Nun stehen wir aber vor einem kleinen Problem. Immer wenn wir auf Cancel drücken, wird die Seite neu geladen und die Meldung erscheint neu. Das umleiten auf die Mobile Seite sollte ab hier schon funktionieren.

7 : Um nun das Problem mit der Meldung, wenn man auf Cancel drückt zu umgehen, haben wir uns eines kleinen Tricks angenommen. Wir haben unsere Hauptstartseite einmal kopiert, im Menü ausgeblendet und im TS-Setup einfach

page.bodyTag = <body>

eingefügt.
So wird hier nichts mehr abgefragt und die Seite kann auch mit dem i-Phone angesteuert werden..

Fertig ist die Mobile TYPO3 Seite.

Vorherigen Beitrag

Nächster Beitrag

TYPO3 Mobil-Site in 7 schritten