Websites mit TYPO3 für Smartphones und Tablets optimieren: Touch me TYPO3
Ob zum Shoppen auf dem Sofa, zum Lesen in der U-Bahn oder zum Filme gucken in der Bahn: Websites müssen heutzutage auch für die Nutzung per Smartphone und Tablet optimiert sein. Für TYPO3-Websites gibt es da verschiedene Ansätze, die jeweils ihre eigenen Vor- und Nachteile haben. Entweder erkennt der Server, welches Endgerät die Anfrage stellt. Oder aber die Site wird so ausgeliefert, dass sie beim Client entsprechend optimiert erscheint. Clientseitig bietet sich der Einsatz von Media-Types [1] und/oder JavaScript an. Serverseitig kann man eine optimierte Auslieferung in TYPO3 mit einer Standard-TypoScript-Condition oder einer User-Funktion (userFunc) sichern. Für die serverseitige Erkennung sollte man den User-Agent auswerten, der bei jeder Anfrage an den Server Informationen zu Betriebssystem und Browser übermittelt. Das PHP-Skript dazu sieht folgendermaßen aus:
<?php echo $_SERVER['HTTP_USER_AGENT']; ?>
Listing 1
Dieses Skript würde bei einem PC (Mac mit Firefox) „Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:15.0) Gecko/20100101 Firefox/15.0.1“ ausgeben und bei einem iPad (Safari) „Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Geko) Version/6.0 Mobile/10A403 Safari/8536.25“. Die TypoScript-Condition „useragent“ für die Auswertung dieses User-Agent steht im TYPO3-CMS standardmäßig zur Verfügung. Verwendet man für die Darstellung der Touch-optimierten Website eine eigene (Sub-)Domain, kann die Weiterleitung etwa so aussehen:
[useragent = *iPhone*] # Weiterleitung, falls Zugriff mittels iPhone config.additionalHeaders = Location: http://smartphone.domain.tld/ [useragent = *iPad*]||[useragent = *Tablet PC*] # Weiterleitung, falls Zugriff mittels iPad oder Windows tablet config.additionalHeaders = Location: http://tablet.domain.tld/ [global]
Listing 2
Allerdings wäre bei dieser Variante permanent eine Aktualisierung der TypoScript-Condition nötig, da alle neuen User-Agents mit „OR“ ergänzt werden müssten. Das ist umständlich und vor allem sehr fehleranfällig, wenn diese Abfrage an unterschiedlichen Orten der TYPO3-Installation benötigt wird. Eine andere Möglichkeit für die serverseitige Erkennung ist der Einsatz von WURFL [2]. WURFL bedeutet „Wireless Universal Resource File“ und ist ein Device Description Repository (DDR), also im Grunde eine riesige Datensammlung zu mobilen Geräten. Diese kann man verwenden, um zu evaluieren, welche Bildschirmgröße ein Endgerät besitzt, ob es Ajax unterstützt oder ob es sich um ein Smartphone oder ein Tablet handelt. Für die Geräte-Erkennung kann man die Abfrage in eine User-Funktion packen und so ohne großen Aufwand in das TYPO3-CMS integrieren. Nachfolgend eine abgespeckte User-Funktion, wie sie auch in der kommerziellen Extension „t3mobile“ [3] zum Einsatz kommt. Im Vergleich zur User-Funktion, die „t3mobile“ nutzt, wurde hier das Session-Handling entfernt (um nicht bei jedem Request den Device-Typ ermitteln zu müssen) sowie die Möglichkeit, mobile Endgeräte zu simulieren.
<?php
require_once PATH_site.'fileadmin/WURFL-PHP/Application.php';
function user_hasDevice($cmd) {
$return = false;
# Achtung: Pfade in wurfl-config.xml anpassen!
$wurflConfigFile = PATH_site.'fileadmin/WURFL/wurfl-config.xml';
$wurflConfig = new WURFL_Configuration_XmlConfig($wurflConfigFile);
$wurflManagerFactory= new WURFL_WURFLManagerFactory($wurflConfig);
$wurflManager = $wurflManagerFactory->create(true);
$device = $wurflManager->getDeviceForHttpRequest($_SERVER);
switch ($cmd) {
case 'Smartphone':
if(
$device->getCapability('is_tablet') == 'false' &&
$device->getCapability('mobile_browser') != '' &&
$device->getCapability('ajax_support_javascript') == 'true' ){
$return = true;
}
break;
case 'Tablet':
if(
$device->getCapability('is_tablet') == 'true' &&
$device->getCapability('mobile_browser') != '' &&
$device->getCapability('ajax_support_javascript') == 'true' ){
$return = true;
}
break;
}
return $return;
}
?>
Listing 3
Mit der User-Funktion kann man flexibel an den unterschiedlichsten Stellen seiner TypoScript-Konfiguration mit einer gleichbleibenden Condition arbeiten. Das Einbinden verschiedener Seiten-Templates pro Gerätetyp könnte dann folgendermaßen aussehen:
# Desktop page.10.file = fileadmin/templates/desktop.html [userFunc = user_hasDevice(Smartphone)] # Smartphone page.10.file = fileadmin/templates/smartphone.html [userFunc = user_hasDevice(Tablet)] # Tablet page.10.file = fileadmin/templates/tablet.html [global]
Listing 4
Ob man nun für die Erkennung des Geräts auf Bordmittel zurückgreift oder mit einer User-Funktion den Funktionsumfang etwas erweitert: TYPO3 liefert keine fertige Lösung, um eine Website für Smartphones und Tablets aufzubereiten. Deshalb gibt es auch nicht den einen, richtigen Weg. Vielmehr empfiehlt sich der richtige Mix aus verschiedenen Möglichkeiten – siehe die folgenden vier Varianten.
Mehrere Menübäume
Um eine für mobile Clients optimierte Website mit dem TYPO3-CMS zu erstellen, kann man pro Gerät einen Menübaum erstellen. Per TypoScript (siehe unten) wird die Anfrage dann auf die jeweils optimale Seite weitergeleitet.
# Desktop [userFunc = user_hasDevice(Smartphone)] # Smartphones config.additionalHeaders = Location:http://smartphone.domain.tld/ [userFunc = user_hasDevice(Tablet)] # Tablets config.additionalHeaders = Location:http://tablet.domain.tld [global]
Listing 5
Das ist zwar eine einfache, aber nicht ganz optimale Lösung. Einer der wenigen Vorteile ist die übersichtliche Verwaltung der Inhalte im TYPO3-Backend. Per TypoScript kann man zudem jede Seite genau auf das Endgerät abstimmen. Allerdings müssen die Inhalte auch an drei unterschiedlichen Orten gepflegt werden. Außerdem sind Inhalte – je nach Endgerät – auf einer anderen URI zu finden. In der Praxis ist diese Variante daher meist zu aufwändig.
Individuelle Page-Objekte
Alternativ kann man auch pro Device-Typ ein eigenes PAGE-Objekt verwenden. Auch hier ermittelt man per TypoScript-Condition den Gerätetyp. Doch anstelle der Weiterleitung wird hierbei für jeden Gerätetyp ein unabhängiges PAGE-Objekt erstellt, das die Darstellung und Konfiguration gerätespezifisch definiert.
# Desktop page = PAGE page.10 = TEXT page.10.value = Website für Desktop [userFunc = user_hasDevice(Smartphone)] # Smartphones page > page = PAGE page.10 = TEXT page.10.value = Website für Smartphones [userFunc = user_hasDevice(Tablet)] # Tablets page > page = PAGE page.10 = TEXT page.10.value = Website für Tablets [global]
Listing 6
Die Website-Defition per PAGE-Objekt hat den Vorteil, dass man Inhalte nicht mehrfach erfassen und pflegen muss. Ressourcen wie Bilder können zudem geräteoptimiert ausgeliefert werden.
Responsive Webdesign
Wer seine Website nicht serverseitig optimieren will, kann auch auf Responsive Webdesign zurückgreifen. Die Optimierung erfolgt dann optisch beim Client mithilfe so genannter Media-Queries. Sie ermöglichen auf relativ einfache Art eine auf die Browser-Breite angepasste Darstellung der Website.
@media all and (min-width: 1224px){
background-image(Desktop-Background.jpg);
}
@media all
and (min-device-width:320px)
and (max-device-width:480px){
background-image(Smartphone-Background.jpg);
}
@media all
and (min-device-width:768px)
and (max-device-width:1024px){
background-image(Tablet-Background.jpg);
}
Listing 7
Responsive Design hat heutzutage ganz klar seine Berechtigung. Da es sich jedoch um eine clientseitige Optimierung handelt, gibt es auch ein paar Nachteile. So bleibt zum Beispiel die zu übermittelnde Datenmenge bei allen Endgerättypen gleich groß, da Inhalte lediglich clientseitig manipuliert werden können. Außerdem muss das Content Management die Darstellungslogik des Designs kennen und berücksichtigen. Besser als reines Responsive Design ist daher, wenn auch eine serverseitige Optimierung stattfindet. So lässt sich zum Beispiel mit einer einfachen TypoScript-Condition (WURFL-UserFunc) die maximale Bildbreite pro Endgerättyp skalieren:
# Desktop tt_content.image.20.maxW = 1200 [userFunc = user_hasDevice(Smartphone)] # Smartphone tt_content.image.20.maxW = 320 [userFunc = user_hasDevice(Tablet)] # Tablet tt_content.image.20.maxW = 700 [global]
Listing 8
Die Extension t3mobile
Die kommerzielle TYPO3-Erweiterung „t3mobile“ (entwickelt von der Agentur des Autors, GreenBanana) erweitert den Funktionsumfang von TYPO3 für die Entwicklung und Darstellung mobiler Websites. Um bestehende Websites für Smartphones und Tablets zu optimieren, können Redakteure zum Beispiel bestehende Inhalte per Drag-and-drop neu positionieren oder ausblenden. Zudem können sie Inhaltselemente explizit für die mobile Darstellung erfassen und positionieren.
Auch für TYPO3-Integratoren und Entwickler hat die Extension t3mobile einiges zu bieten. So kann sie andere TYPO3-Extensions nicht nur darstellen, diese lassen sich auch individuell konfigurieren.
Die Extension liefert für Smartphones und Tablets je ein auf FLUIDTEMPLATE und jQuery-Mobile basiertes Template aus, das entweder mit Hilfe des jQuery-Mobile Themeroller [4] angepasst oder durch ein individuelles Design ersetzt werden kann. Die Extension wurde mit Extbase und Fluid entwickelt und benötigt mindestens TYPO3 CMS 4.5.x.
| Mobile-Optimierung mit TYPO3 | ||||
| Menü-Baum | PAGE-Objekt | Responsive Design | t3mobile | |
| Content-Elemente individuell positionierbar | Ja | Nein | Nein | Ja |
| Keine Content-Mehrfacherfassung nötig | Nein | Ja | Ja | Ja |
| Content kann man für Mobile ergänzen | – | Nein | Nein | Ja |
| Content-Elemente lassen sich ausblenden | – | Nein | Nein | Ja |
| Decvice-optimierte Bilder | Ja | Ja | Nein | Ja |
| Nur Device-spezifischer Content wird ausgeliefert | Ja | Ja | Nein | Ja |
| Bestehende TYPO3-Extensions einsetzbar | Ja | Ja | Ja | Ja |
| Individuelle Verwaltung des CMS-Menübaums | Ja | Nein | Nein | Nein |
| Individuelle TypoScript-Konfiguration möglich (etwa für Menü oder Content-Rendering) |
Ja | Ja | Nein | Ja |
| Backend stellt mobile Inhalte dar | Ja | Nein | Nein | Ja |
Fazit
Das TYPO3-CMS bietet viele nützliche Funktionen für die Erstellung mobiler Websites. Reines Responsive Design nutzt diese jedoch viel zu wenig. Sinnvoller ist es, serverseitig nach verschiedenen Gerätetypen zu unterscheiden. Inhalte wie Bilder, JavaScript-Dateien oder StyleSheets werden so in der entsprechend optimierten Version ausgeliefert. Responsive Design sollte optimierend für die Darstellung innerhalb des Device-Typs verwendet werden. Gerade bei Tablets können Seitenverhältnisse und Auflösungen extrem voneinander abweichen – ganz abgesehen davon, dass die horizontale und vertikale Ausrichtung jeweils ihr eigenes Design fordert.
Jürg Langhard ist Inhaber und Geschäftsführer der Schweizer Internet-Agentur GreenBanana (www.greenbanana.ch). Er hat an der Hochschule für Technik Zürich (HSZ-T) den Bachelor of Science ZFH in Computer Science erlangt, ist Programmierer, Trainer und Certified TYPO3 Integrator.
