Aus statisch werde responsive: Geht das mit TYPO3?

mtw_faltboot_rwdResponsive Webdesign ist aktuell das Maß der Dinge, wenn es um zeitgemäße Internet-Auftritte geht. Die eigene Website soll nicht nur am PC gut aussehen, sondern auch auf Tablet und Smartphone einen positiven Eindruck hinterlassen. Blöd nur, wenn man eine statische Website betreibt und das Screendesign noch zu gut ist, um einen kompletten Relaunch zu rechtfertigen. Da liegt es nahe, den bislang festgefügten TYPO3-Auftritt auf dem „kleinen Dienstweg“ flexibel machen zu wollen. Doch geht das überhaupt?

Die Antwort lautet: „Im Prinzip ja, aber…“:  Es reicht nicht aus, einfach nur ein bisschen am vorhandenen HTML-Template herumzuschrauben. Hier muss auf jeden Fall etwas gründlicher hingelangt werden. Doch bei klar strukturierten Websites sollte dies relativ schnell zu bewältigen sein. Gedanken muss man sich vor allem darum machen, was mit den vorhandenen Navigationsmenüs auf Mobilgeräten geschieht. Dank TypoScript und hier vor allem dem HMENU-Objekt gelingt das zumeist zügig.

CSS-seitig sind die Ausgabebreite zu flexibilisieren und breakpoints mittels sogenannter Mediaqueries zu definieren. Interessenten möchte ich dazu unbedingt das Buch „Responsive Webdesign“ von Christoph Zillgens ans Herz legen, welches einen leichten Einstieg ins Thema erlaubt.

Bleiben schließlich die Inhalte. Möchte man hier vollkommene Flexibilität durchsetzen, müssen u.U. alle Inhalte noch einmal redaktionell angefasst werden. Bei großen Websites ist diese Zielsetzung mit viel Arbeit verbunden. So weit muss es aber nicht kommen: Sind die Inhalte nicht zu kleinteilig angelegt, lässt sich mit bestehenden Texten und in der Größe festgelegten Bildern häufig gut weiterleben.

Ab Version 6.2 steht im Konstanten-Editor für das Typoscript-Template unter „Content“ die Option Rendering-type for responsive images [styles.content.imgtext.layoutKey] zur Verfügung. TYPO3 hat damit seinen Standard-HTML-Generator CSS Styled Content (CSC) um drei Lösungen für responsive Bilder ergänzt.  Durch Auswahl einer Option übernimmt TYPO3 die Kontrolle über alle Bilder, die als regulärer Inhalt (Bilder, Text und Bilder) eingefügt wurden. Diese passen sich nun der zur Verfügung stehenden Ausgabegröße an. Allerdings sind ggfs. noch Nachbesserungen in der CSS-Formatierung nötig. Weitere Wermutstropfen: Bilder, die über den RTE eingefügt wurden und Bilder, die mit dem nützlichen Tool tkcropthumbs beschnitten wurden, bleiben von der genannten Lösung bislang leider ausgenommen.

Die Website www.mtw-faltboot.de habe ich auf diese Weise in etwa 10 Stunden auf das neue Responsive Webdesign umgestellt. Problematische Teilbereiche (z.B. der Kopfbereich) wurden dabei im Sinne des neuen Konzepts gestalterisch optimiert. Noch muten einzelne Details (z.B. die Galerien) auf Smartphones suboptimal an, aber auch die Probleme werden in überschaubarer Zeit zu lösen sein.

5 Stimmen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Time limit is exhausted. Please reload CAPTCHA.