Wir haben natürlich nicht für alles eine Lösung. Aber an Problemen, über welche wir selber schon gestolpert sind, müssen sich andere ja nicht auch noch die Zähne ausbeissen.

Das Thema Responsive Webdesign und TYPO3 passte bisher noch nicht ganz so ganz zusammen, da TYPO3 von Haus aus nicht den Code ausgibt, um diesen den jeweiligen Ausgabegeräten angepasst anzuzeigen. So erstaunt es auch nicht, dass es im Gegensatz zu anderen CMS Systemen noch kaum Responsive Templates gibt. Deshalb haben wir einmal einen Versuch unternommen, ein Responsive TYPO3 Template zu kreieren, welches hoffentlich auch anderen TYPO3 Entwickler helfen kann, und gerne verwendet, weiterentwickelt und ergänzt werden darf. responsive typo3 template

Live Demo TYPO3 Responsive Template „sunflower“

Das Responsive TYPO3 Template „sunflower“

Das Template „sunflower“ basiert auf YAMB – Yet Another Mobile Boilerplate, welches eine Grundstruktur für Responsive Webdesign bereitstellt. Das Template ist so konfiguriert, dass Seiteninhalte entweder ein- oder zweispaltig dargestellt werden können. Auch im Backend kann durch die Auswahl des entsprechenden Backend-Layouts die Darstellung entsprechend auf ein- oder zweispaltig eingestellt werden.

Der Bild-Slider auf der Startseite ist fix ins Template der Startseite eingebunden, und nicht mit einer TYPO3-Extension realisiert. Dies bedeutet, dass Änderungen und Anpassungen am Slider direkt im Template der Startseite vorgenommen werden müssen.

Das Kontaktformular auf der Seite Kontakt wurde mit der Extension „formhandler“ erstellt. Dieses muss für eine reibungslose Funktion entsprechend installiert und konfiguriert werden. Auch wurde für das Template die Extension „automaketemplate“ verwendet, welche ebenfalls installiert werden muss.

Wir empfehlen Ihnen, unsere sunflower Demo-Seite zuerst ausgiebig zu testen und auch in den verschiedenen Browsern und auf den gewünschten Geräten anzuschauen, damit Sie sich ein Bild machen können, ob das Template auch Ihre Erwartungen erfüllen kann, und ob Sie allfällige fehlende Funktionen selber entsprechend erweitern können.

Installation

Download der Template-Files und der t3d-Datei

1. Setzen Sie eine neue und leere TYPo3 Installation der Version 4.7.x auf (das aktuelle Template wurde mit der Version 4.7.9 erstellt). Für die Verwendung des Templates mit den Versionen 6.0 und 6.1 lesen Sie bitte die Bemerkungen am Ende des Artikels.

2. Laden Sie die benötigten Files mit dem obigen Link lokal auf Ihren Computer herunter

3. Klicken Sie im Seitenbaum mit der rechten Maustaste zuoberst auf das graue TYPO3-Symbol und wählen Sie im Kontextmenü den Punkt “Importieren aus .t3d”. Dann wählen Sie den Reiter „Hochladen“ und wählen die Datei „sunflower_typo3template.t3d“. Nach dem hochladen wird die importierte Struktur angezeigt. Wichtig ist auch, dass die Checkbox „Alle UID-Werte erzwingen“ ausgewählt ist. Unter Import kann die Struktur dann importiert werden.

4. BaseURL anpassen: Mit dem Modul „Template“ muss nun noch eine kleine Anpassung am Template der Seite „rootlevel“ gemacht werden. Dort findet man im Setup die folgende Zeile: config.baseURL = http://sunflower.pas-solutions.ch/
Hier muss noch der Pfad zu Ihrer TYPO3 Installation angepasst werden.

5. Importieren und installieren Sie unter “Erweiterungen” die Erweiterung ”automaketemplate”

6. Importieren und installieren Sie unter “Erweiterungen” die Erweiterung “formhandler” (im Template der Seite rootlevel unter includes noch die “Example Configuration (formhandler)” auswählen). Ausserdem muss auf der Seite „Kontakt“ im Inhaltselement des Formulars noch die Empfängeradresse geändert werden, an welche das ausgefüllte Formular versendet werden soll.

7. Importieren und installieren Sie unter “Erweiterungen” die Erweiterung “html5boilerplate”

8. Löschen Sie den TYPO3 Cache, indem Sie zuoberst auf das gelbe Blitz-Icon klicken, und „Alle Caches löschen“ auswählen

Damit sollte die Seite aufrufbar sein und laufen

Bermerkungen:

  • Das Responsive TYPO3 Template „sunflower“ lässt sich auch mit den neuen TYPO3 Versionen 6.0 und 6.1 verwenden. Da der t3d Export und Import in diesen Versionen noch nicht wie gewünscht läuft, sollte dafür das Template zuerst wie im Beitrag beschrieben mit der Version 4.7.x installiert werden, und danach ein Update auf die gewünschte Version gemacht werden.
  • sunflower 2 für TYPO3 6.2: Wir haben das sunflower Template auch für die neue Version 6.2 angepasst (unter dem Namen sunflower 2). Zum sunflower 2 Template
  • Wir hoffen natürlich, dass das Template für viele eine hilfreiche Grundlage und ein Ausgangspunkt für eigene Versuche im Bereich des Responsive Webdesign ist. Ausserdem freuen wir uns auch immer über Feedback und Verbesserungsvorschläge,  sind aber auf Grund unserer Grösse nur sehr begrenzt in der Lage, Hilfe und Support für das Template anzubieten.
Update Sommer 2016: Nach über 10 Jahren und unzähligen Projekten mit TYPO3 und WordPress, mussten wir uns irgendwann entscheiden, mit welchem CMS-System wir zukünftige Projekte umsetzen werden. Beide CMS Systeme haben Ihre Vor- und Nachteile, sodass es bei dieser Entscheidung wohl kein richtig oder falsch gibt. Unsere Wahl ist schlussendlich auf WordPress gefallen. Die Gründe dafür sind vielfältig – ein Grund ist sicher die enorme Verbreitung und Weiterentwicklung von WordPress in den letzten Jahren. Daneben spielen aber auch Faktoren wie die Komplexität von Updates, die Optimierung für mobile Geräte (Responsive Design) und unsere Einschätzung im Hinblick auf die Zukunft mit. Wir können deshalb auch für das TYPO3 Template „sunflower“ keinen Support mehr anbieten und bitten dafür um Verständnis.

Lizenz Das Template „sunflower“ basiert wie erwähnt auf YAMB – Yet Another Mobile Boilerplate. Da YAMB unter der GNU GENERAL PUBLIC LICENSE veröffentlicht wurde, wird dies auch für dieses Template so gehandhabt. Sie dürfen das Template gerne für private wie auch kommerzielle Zwecke einsetzen, weiterentwickeln und verbessern, sofern dabei die Lizenz von YAMB nicht verletzt wird.

Bewerte dieses Template
Sending
User Review
4.67 (3 votes)

Pin It on Pinterest

Share This