Die Nachfrage nach mobilen Webseiten steigt mit jedem Auftrag. Kaum ein Kunde, der nicht ein iPhone, iPad oder anderes Smartphone sein eigen nennt. Schon nach den ersten Gesprächen wird meist deutlich, dass der Kunde weniger eine mobile Webseite möchte, als vielmehr eine, die auf allen Geräten gut aussieht und funktioniert. An diesem Punkt kommt Responsive Webdesign ins Spiel, mit dem eben keine mobile Webseite für eine bestimme Auflösung erstellt wird, sondern eine für alle Geräte optimierte Webseite. Die Nachfrage nach einem Content Management System tritt dabei aber keineswegs in den Hintergrund, und so muss man einen Weg finden, wie man beides zusammen bringt.

Responsive Webdesign erlaubt es Webworkern nicht nur, eine mobil funktionierende Webseite zu erstellen, sondern vielmehr eine vom Endgerät und der Bildschirmauflösung unabhängig funktionierende Webseite auszuliefern. Die Inhalte werden zugänglicher, und lästiges Zoomen oder horizontales Scrollen gehören der Vergangenheit an. Möglich wird dies durch die Trennung von Inhalt und Design, sowie durch flexible Layouts, JavaScript und nicht zuletzt durch neue Webtechnologien wie CSS3. Wer allerdings denkt, dass es dabei nur um CSS3 Media Queries geht, liegt falsch.

Um Probleme lösen zu können, muss man sie zunächst kennen und verstehen lernen. So tauchen auf dem Weg zu einem flexiblen Design verschiedene Problemstellungen auf, die bei einem festen Layout mit Pixeln und einem eindeutigen grafischen Entwurf kaum Beachtung finden. Unabhängig vom verwendeten System sind dies die Darstellung der Navigationsstruktur, große Bilder, JavaScript-Effekte (Lightbox, Slider) oder eine DropDown-Navigation, die man schon bei der Konzeption bedenken sollte. Bei der Erstellung eines flexiblen Webdesigns besteht der größte Mehraufwand in genau diesen Punkten. Wenn man sie nicht von Anfang an berücksichtigt, wird man unter Umständen gezwungen, das ursprüngliche Konzept zu überarbeiten.

Wohin mit der Navigation? TYPO3 neigen oft zu umfangreichen Menüs mit Unterpunkten. Platz sparen kann man z. B. mit einer Select-Box, die auch für Touch-Geräte gut bedienbar ist.

Die technischen Stolpersteine liegen hingegen meistens nicht in diesem Bereich, sondern stehen im Zusammenhang mit dem verwendeten System. Während Webdesigner bei der Template-Gestaltung in TYPO3 die volle Kontrolle haben und CSS-Frameworks wie YAML [1] oder 960gs [2] verwenden können, setzt TYPO3 für das Rendern der Inhaltselemente auf die bewährte System-Extension „css_styled_content“. Der durch diese Extension erzeugte Quelltext bleibt aber glücklicherweise das einzige durch TYPO3 verursachte Hindernis.

Ausnahmen können hier natürlich durch andere Frontend-Extensions auftreten. Insbesondere bei Extensions, die kein Template für die Ausgabe verwenden, ist die Anpassung äußerst schwierig bis unmöglich.

TYPO3 gibt den Inhalt bei der Verwendung mit Bildern in festen Breiten und Höhen aus. Die Bilder enthalten dabei feste Angaben in Attributen. Die umliegenden Elemente, die hauptsächlich für das Umfließen der Texte und Abstände genutzt werden, erhalten feste Breiten mit Inline-Styles.

Bei der Verwendung eines flexiblen Layouts passen sich die Bilder im Inhaltsbereich nicht automatisch an – damit sind merkwürdige Fehldarstellungen quasi vorprogrammiert. Die einfachste Möglichkeit, um eine fehlerhafte Darstellung des Layouts zu vermeiden, ist das Setzen von „overflow:hidden“ für alle von TYPO3 zur Positionierung verwendeten Elemente. Bilder werden dann allerdings nicht skaliert, sondern abgeschnitten und können somit ihren Sinn und die Aussage verlieren.

Eine perfekte Lösung gibt es für diese Inhaltselemente leider nicht. Mit ein paar Kompromissen können aber gute, funktionierende Ergebnisse erzielt werden. Zunächst gilt es, die festen Breiten der umliegenden Container zu entfernen. Dafür lohnt sich ein Blick in den TypoScript Object Browser (Setup) und in in die Objekte „tt_content.image.20.imageStdWrap“, „tt_content.image.20.imageStdWrapNoWidth“, „tt_content.image.20.layout“ und „tt_content.image.20.rendering“. Dort sind die Breiten als Variablen in Wraps hinterlegt und können per Hand entfernt werden. Das hat natürlich Auswirkungen auf das Verhalten der Inhalte. Durch das Entfernen dieser festen Breiten kann es gerade bei mehreren Bildern in einem Inhaltselement zu einer falschen Darstellung kommen.

Beispiel der Darstellung von Inhaltselementen in verschiedenen Bildschirmgrößen – links: 320px Breite, rechts: 768px Breite.

Der nächste Schritt ist die Anpassung des Stylesheets. Nach der Methode „Progressive Enhancement“ muss das CSS der „css_styled_content“ so aufbereitet werden, dass die meisten Fehldarstellungen in nahezu allen Browsern behoben werden. Dabei wird es allerdings kaum gelingen, alle nur erdenklichen Möglichkeiten abdecken. Geht man aber einen Kompromiss ein und legt fest, dass maximal zwei Bilder nebeneinander stehen sollen, ist auch hier eine Lösung möglich.

Zu guter Letzt definiert man die Breite der Bilder in Prozent und passt die Höhe an.

img,
embed,
object,
video {
 max-width: 100%;
 height: auto;
}

Da die Bilder noch immer einen Wert im Attribut „height“ haben, muss die Höhe neu definiert werden. Die genaue Funktionsweise von flexiblen Bildern beschreibt Ethan Marcotte im Blog „A List Apart“ [3].

Das Design ist jetzt flexibel und auch die Bilder passen sich an. Natürlich kann man Bildern in Kombination mit Media Queries weitere Verhaltensregeln zuweisen, so dass ein Bild im Text rechts bei einer Fensterbreite von unter 480px nicht breiter als 50 Prozent sein darf, damit der Text auch auf dem iPhone um das Bild herum fließt. Eine noch präzisere Darstellung erreicht man, wenn die Pixelwerte der Bilder von JavaScript in Prozentwerte umgerechnet werden. Eine Zusammenstellung von TypoScript-Konfiguration und CSS für „css_styled_content“ können Webworker bei Github herunterladen und an die eigenen Anforderungen anpassen [4].

TemplaVoila bietet gegenüber dem Standard-Templating den Vorteil, dass es Inhaltselemente definieren kann. Einmal definiert, kann ein solches Inhaltselement auch von Redakteuren immer wieder verwendet werden und dabei Texte, Bilder und Links enthalten, die man sogar ineinander verschachteln kann. Mit diesem mächtigen Werkzeug ist der entstehende Quelltext wieder vollständig unter Kontrolle, und wer damit arbeitet, kann auch vollständig flexible Elemente anlegen – dies wäre mit den Standard-Inhalten nie möglich.

Für alles, was sich nicht direkt mit Inhaltslelementen von „css_styled_content“ umsetzen lässt, sind die flexiblen Inhaltselemente von TemplaVoila geeignet.

Auf einem Smartphone große Bilder zu laden und dann mit flexiblen Breiten auf das kleine Display zu skalieren, ist hingegen wenig sinnvoll. Die Ladezeiten erhöhen sich unnötig und gerade ohne WLAN macht sich das stark bemerkbar.

Scott Jehl hat mit „Responsive Images“ eine Lösung in JavaScript geschrieben und bereitgestellt, die zunächst die kleinere Version eines Bilds und bei entsprechender Bildschirmgröße die große Version lädt. [5] Die Anwendung ist denkbar einfach: Voraussetzungen sind, dass das JavaScript eingebunden, das Modul „mod_rewrite“ aktiviert und die .htaccess entsprechend der Vorlage erweitert wird. Einmal eingebunden, können Bilder auf der Webseite mit <img xsrc="small.jpg?full=large.jpg" > leicht für diese Weiche integriert werden.

Besonders für große Header oder Slider bietet sich diese Lösung an. Selbst wenn JavaScript deaktiviert ist, wird zumindest das kleine Bild geladen und angezeigt.
Auch diese Weiche für verschiedene Bildgrößen kann man unkompliziert mit flexiblen Inhaltselementen integrieren.

Fast alle modernen Browser unterstützen bereits CSS3 Media Queries und eignen sich für ein flexibles Layout. Besonders die vielen mobilen Endgeräte (iOS, Android) unterstützen die Technik und der Darstellung steht nichts im Wege. Lediglich der mobile Internet Explorer in Windows Phone 7 kommt hier oft nicht mit. Aber auch dafür gibt es einen Weg:

<!--[if IEMobile]>
 <link href="css/ie_mobile.css" rel="stylesheet" type="text/css" />
<![endif]-->

Mit Modernizr kann man zudem einen Browser auf die Kompatibilität mit Media Queries prüfen [6] und das Feature zum Beispiel mit einem jQuery-Plugin direkt ergänzen [7]. Solange auf ein festes Layout aufgebaut wird und nicht ausschließlich Media Queries zur Anwendung kommen, ist eine Abwärtskompatibilität sogar ohne die Verwendung von JavaScript gewährleistet.

Für Oktober ist die TYPO3-Version 4.6 angekündigt. Bisher wurde Responsive Design aber weder für diese Version noch für zukünftige Versionen fest eingeplant. Wann TYPO3 diese Technik somit auch „out of the box“ bieten wird, lässt sich nur erahnen. Vermutlich werden sich die Entwickler nach der Fertigstellung der Version 4.6 dem Thema annehmen. Dann steht zumindest eine Überarbeitung von „css_styled_content“ auf dem Plan. Ob das allerdings auch die Entwicklung flexibler Layouts erleichtern wird, bleibt abzuwarten.

Wer Kompromisse eingehen kann und nicht auf jede erdenkliche Möglichkeit der Inhaltsausgabe besteht, kann mit TYPO3 schon heute Responsive Design nutzen. Je nach Projekt sollten Webdesigner dabei circa 20 bis 50 Prozent mehr Aufwand im Bereich der Template-Erstellung einkalkulieren. Der Aufwand hängt jedoch stark mit den verwendeten Inhaltselementen, insbesondere JavaScript-Effekten, zusammen.

Kaum eine der neuen Techniken ist für Kunden und deren Zielgruppe so wahrnehmbar wie Responsive Design. Der Mehrwert für den Endnutzer ist enorm: Nicht nur das lästige Scrollen entfällt, oft geht auch eine Optimierung für Touch-Geräte einher. Ist die Hürde des verwendeten Content Management Systems erst einmal genommen, spricht nichts mehr gegen die produktive Verwendung: Das Stadium der „Spielerei“ ist zumindest in diesem Bereich überwunden und die Nachfrage wächst.

Der Autor

ist als selbstständiger Webentwickler und Designer in Köln tätig (http://elsigno.de). Er hat sich in den letzten Jahren auf TYPO3 spezialisiert und beschäftigt sich außerdem mit WordPress, Joomla und Drupal. Nebenbei interessiert er sich auch für SEM und SMM.