TYPO3 Mobil-Site in 7 schritten

TYPO3 Mobil-Site in 7 schritten

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.

intro_image_sevensteps_new

 

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.

Teile uns

Schreibe einen Kommentar

Über WAM

Die WAM - Webagentur-Meerbusch. Die Typo3 und Wordpress Agentur aus Meerbusch bei Düsseldorf in NRW. Ganz nach dem Motto: Wenn man es ins Netz stellen kann, können wir es bauen. Und das schon seit über 10 Jahren.

-
Das Archiv
Werbung
Haendlerbund_Leistungen_265x221_animiert
Datenschutz-Übersicht
logo_wam_gray

Hier können Sie einstellen welche Cookies unsere Webseite auf Ihrem Endgerät speichern „Local Storage“ darf. Diese werden beim nächsten besuch auf unserer Webseite reaktiviert. Diese Einstellungen können Sie jederzeit wieder ändern. Dazu klicken Sie unten Links auf das Zahnradsymbol.

Sie können die Cookies nach dem Besuch unserer Webseite natürlich auch bedenkenlos löschen. Dazu müssen Sie die entsprechenden Einstellungen in Ihrem Browser vornehmen.

Unbedingt notwendige Cookies

Unbedingt notwendige Cookies sollten jederzeit aktiviert sein, damit wir deine Einstellungen für die Cookie-Einstellungen speichern können.

  • pll_language .

Cookie zur Verarbeitung eines mehrsprachiges System. Inhalte auf de / en / fr - Ablaufdatum 1 Jahr

  • reCAPTCHA ist ein CAPTCHA-System,

das es Webhostern ermöglicht, zwischen menschlichen und automatisierten Zugriffen auf Websites zu unterscheiden.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Kategorien verarbeiteter Daten:
KlickpfadSichtbarkeit von Anzeigen messenMausbewegungZeitstempelKlicks auf Anzeigen verfolgenConversion-TrackingIPUhrzeit und Datum verfolgenVerfolgung des BenutzerstandortsBesucherverhaltenUser-AgentSpracheBesuchte WebseiteZeitzone

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

Datenübertragung außerhalb der EU
Dieser Anbieter kann Ihre personenbezogenen Daten außerhalb des EWR/der EU übertragen, speichern oder verarbeiten. Diese Länder haben möglicherweise nicht das gleiche Datenschutzniveau und die Durchsetzung Ihrer Rechte kann eingeschränkt oder nicht möglich sein.
Cookies, die in Ihrem Browser gesetzt werden Cookiename Beispielwert Ablaufzeit Typ Domain rc::a MjNxdWs3M2o5ZGt­x Persistent Funktion www.google.com

  • Google Fonts

ist ein Dienst, der es Websites ermöglicht, bestimmte Schriftarten für ihre Gestaltung zu verwenden.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

  • Google Maps

ist ein von Google entwickeltes Web-Mapping-Produkt.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Kategorien verarbeiteter Daten
Betrugserkennung und -präventionSichtbarkeit von Anzeigen messenZeitstempelIPUhrzeit und Datum verfolgenVerfolgen des BenutzergerätsVerfolgung des BenutzerstandortsBesucherverhaltenUser-AgentSpracheBesuchte WebseiteZeitzone

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

Datenübertragung außerhalb der EU
Dieser Anbieter kann Ihre personenbezogenen Daten außerhalb des EWR/der EU übertragen, speichern oder verarbeiten. Diese Länder haben möglicherweise nicht das gleiche Datenschutzniveau und die Durchsetzung Ihrer Rechte kann eingeschränkt oder nicht möglich sein.

Drittanbieter-Cookies

Diese Website verwendet Google Analytics, um anonyme Informationen wie die Anzahl der Besucher der Website zu sammeln.

Betreibergesellschaft der Google-Analytics-Komponente ist die Google Inc., 1600 Amphitheatre Pkwy, Mountain View, CA 94043-1351, USA.

Name des Cookies: _ga
Inhalte: GA1.2.1970440283.1622365906
Ablaufdatum des Cookies : 1 Jahr - Nur bei Verbindungen zur gleichen Website

Name des Cookies: _gat_gtag_UA_1602708_1
Inhalte: 1
Ablaufdatum des Cookies : 1 Minute - Nur bei Verbindungen zur gleichen Website

Name des Cookies: _gid
Inhalte: GA1.2.1949554392.1622365906
Ablaufdatum des Cookies : 24 Stunden - Nur bei Verbindungen zur gleichen Website

Name des Cookies: chimpstatic
Inhalte: E-Mail Adresse bei Newsletter anmeldung
Ablaufdatum des Cookies : 24 Stunden - Nur bei Verbindungen zur gleichen Website

Zusätzliche Cookies

Diese Website verwendet die folgenden zusätzlichen Cookies:

Name des Cookies: pll_language
Cookie zur Verarbeitung eines mehrsprachiges System. Inhalte auf de / en / fr - Ablaufdatum 1 Jahr - Nur bei sicheren Verbindungen zur gleichen Website

Name des Cookies: moove_gdpr_popup
Cookie zur Speicherung der Funktion der Cookieseinstellung - Ablaufdatum 1 Jahr - Nur bei Verbindungen zur gleichen Website