Relaunch Georgienseite TYPO3 2016

Die Georgienseite gibt es seit 2000. Im September 2014 haben wir sie auf TYPO3 LTS 6 eingerichtet. Juni 2016 erfolgte ein upgrade auf die Version LTS 7 von TYPO3. 

Mit dem update sollte für die kommenden zwei Jahre ein sicherer Betrieb der Webseite gewährleistet werden. Zudem stand eine Umstellung auf ein responsives Layout an. 

Die Inhalte (Texte, Bilder) wurden per mySQL direkt in die neue Version der Webseite übernommen. 

Download Referenzliste als PDF

Details zum Relaunch der Georgienseite mit TYPO3 LTS 7.6

Für die Inhalte der Georgienseite haben wir die Möglichkeiten genutzt, die uns TYPO3 zur Verfügung stellt. Für Bildergalerien und die Einbindung von Google Maps in unsere Reiseberichte haben wir eigene Extensions mit Extbase und Fluid programmiert. Die Reiseberichte der Georgienseite enthalten Slider, die für jedes Jahr die einzelnen Artikel im Kopf jeder Seite auflisten.

Die Startseite der Georgienseite

Responsives Layout der Startseite für mobile Endgeräte ✔ Georgienseite TYPO3 Relaunch 2016 ✔ TypoScript ✔ Extension Programmierung mit Extbase und Fluid

Die Startseite der Georgienseite. Als Technik kommt TYPO in der neusten Version 7.6 zum Einsatz. Das Frontend ist nun responsiv gestaltet.

Ansicht der Navigation bei großen Bildschirmen

Konzept der Navigation im Layout mobile Endgeräte ✔ responsives Frontend ✔ Georgienseite TYPO3 Relaunch 2016 ✔ TypoScript ✔ Extension Programmierung mit Extbase und Fluid

Mit dem neuen Konzept zum Layout der Georgienseite war es notwendig, die Navigation von der linken Seite zum Kopf der Seite hin umzuziehen. Dafür haben wir ein Navigationsmenu erstellt, das über aufklappende Menus die folgenden beiden Ebenen anzeigt. Das Layout ist mit Farbverläufen in der ersten Ebene und flächigen Farben in der zweiten und dritten Ebene gestaltet.

Responsive Navigation: aufklappende Menus für kleinere Bildschirme

Navigation im Layout mobile Endgeräte ✔ JavaScript mit jQuery für aufklappbare Menus ✔ CSS für responsives Frontend ✔ Georgienseite TYPO3 Relaunch 2016

Das Navigationsmenu am Kopf der Seite sollte responsiv gestaltet sein. Unterhalb einer festgelegten Auflösung wird von der gesamten Breite der Navigation auf einen Button „Navigation“ umgeschaltet. Durch Klick auf den Button klappt die erste Ebene der Navigation vertikal auf. Die folgenden beiden Ebenen klappen auf, wenn man mit der Maus die Schaltflächen überfährt. Durch einen weiteren Klick auf den Button „Navigation“ kann das Menü wieder eingeklappt werden. Der Pfeil passt sich dem entsprechenden Zustand an. Die Umschaltung erfolgt über selbst entwickeltes JavaScript.

Slider Startseite und Rubriken

Slider für Inhalte mit JavaScript und jQuery ✔ Georgienseite TYPO3 Relaunch 2016 ✔ TypoScript ✔ responsives Frontend ✔ Navigation mobile Endgeräte

In mehreren Seiten der Georgienseite befinden sich Slider. Diese wurden in der früheren Version der Webseite (TYPO3 6.2) über eine Extension eingepflegt. Diese Extension war für die Version LTS 7 zum Zeitpunkt des updates nicht verfügbar. Die Inhalte der betreffenden Rubriken werden daher nicht mehr über eine Extension dargestellt. Die Inhalte werden über das TypoScript des Setup Templates ausgelesen. Das Template der Georgienseite und das Backend Layout sind so angepasst, dass sie über die Auswahl einer für diesen Zweck eingefügten Spalte gepflegt werden können. Als Software kommt der Slick Slider zum Einsatz.

Inhalt und Navigation mit Accordions

Accordions zur Navigation ✔ Backend Layout und TypoScript Setup ✔ Fluid Template ✔ Georgienseite TYPO3 Relaunch 2016 ✔ Navigation mobile Endgeräte

Mit dem Wegfall der links stehenden Navigation, die bis in die 4. Ebene hinein den bestehenden Verzeichnisbaum aufgeklappt hatte, war es notwendig, innerhalb der Seite eine Form der Navigation anzubieten. Da bislang in Teilen der Georgienseite eine Navigation mit Accordions zum Einsatz kam, haben wir dieses Konzept die gesamte Webseite übernommen. Der Wegfall der Extension, die in der bisherigen Webseite Slider, Accordions und weitere Elemente bereitstellte, sorgte dafür, dass eine andere Lösung gefunden werden musste. Dazu haben wir die Accordions über das TypoScript Setup in TYPO3 mit eigenem Backend Layout und Fluid Template angebunden. Die Inhalte der Accordions sind nun als Inhaltselemente im TYPO3 Backend pflegbar.

Backend zur Pflege der Inhalte

TYPO3 Backend der Georgienseite ✔ Inhaltselemente ✔ Accordions zur Navigation ✔ Fluid Template ✔ Georgienseite TYPO3 Relaunch 2016 ✔ Navigation mobile Endgeräte

Einblick ins Backend der Georgienseite: Die Inhalte der Accordions der Startseite werden als Inhaltselemente der Spalte „multiplecontent“ gepflegt.

Ansicht Nachrichten bei großer Auflösung

Responsives Frontend ✔ Anordnung HTML-Elemente per media query in CSS ✔ Style Sheet für mobile Endgeräte ✔ Fluid Template ✔ Georgienseite TYPO3 Relaunch 2016

Änderungen im Layout der Georgienseite bei verschiedenen Auflösungen. Rechte Spalte wird unter den Inhalt geladen Breite der rechten Spalte wird über media query auf Gesamtbreite der Webseite gezoomt Umschaltung per media query – kein Bootstrap und damit ca. 1 MB weniger Frameworks beim Erstaufruf der Seite. Fluid Template in TYPO3 für responsives Design der Webseite.

Teaser Nachrichten bei kleiner Auflösung

Responsives Frontend mobile Endgeräte ✔ Anordnung HTML-Elemente per media query in CSS ✔ Style Sheet für mobile Endgeräte ✔ Fluid Template ✔ Georgienseite TYPO3 Relaunch 2016

Änderungen im Layout der Georgienseite bei verschiedenen Auflösungen. Rechte Spalte wird unter den Inhalt geladen Breite der rechten Spalte wird über media query auf Gesamtbreite der Webseite gezoomt Umschaltung per media query – kein Bootstrap und damit ca. 1 MB weniger Frameworks beim Erstaufruf der Seite. Ansicht bei mobilen Endgeräten mit geringer Auflösung.

Slider für Reiseberichte in jeder Seite

Slider für Inhalte mit JavaScript und jQuery ✔ Einbindung über TypoScript ins Fluid Template ✔ Georgienseite TYPO3 Relaunch 2016

Die Reiseberichte sind wichtiger redaktioneller Bestandteil der Georgienseite und sollten daher entsprechend Aufmerksamkeit beim Besucher erregen. Daher wird ein Slider eingesetzt, die über allen Reiseberichten eines Jahres erscheint. Der Inhalt des Sliders wird über TypoScript generiert. Die Inhalte werden über TypoScript Templates in den Kopf der Seite geladen. Dafür nutzen sie den Platzhalter des Fluid Templates, in dem z. B. auch die Slider der Startseite eingebunden werden.

Suche: Funktion und Layout auf Georgienseite angepasst

Extension KE Search für Suche in Georgienseite ✔ Layout Suchbox über eigene Fluid Templates ✔ Konfiguration Facettierte Suchfunktion ✔ Georgienseite TYPO3 Relaunch 2016

Für die Suche kommt die Extension KE Search zum Einsatz. Dies bietet den Vorteil einer schnellen Indexierung der Inhalte der gesamten Webseite und auch der Nachrichten. Zudem erlaubt die Extension auch eine Kategorisierung der Suchergebnisse. Das Layout der Suchbox für die gesamte Webseite und die Darstellung der Suchergebnisse ist auf das Layout der Georgienseite angepasst.

Facebook schnüffelt nicht immer

PHP Modul zur Bewertung per AJAX in Frontend geladen ✔ Einbindung Facebbok und Twitter über Shariff ✔ Georgienseite TYPO3 Relaunch 2016

Eine Bewertung der Seite erfolgt über ein PHP-Modul, das über AJAX in die Webseite eingebunden wird Eine direkte Einbindung von Facebook, Google+ und Twitter findet nicht statt. Die sozialen Netzwerke werden über das Modul Shariff eingebunden. Ein Besucher muss den Kontakt zu einem Netzwerk erst freigeben. Damit wird die Privatsphäre aller Besucher besser geschützt. Ein Werbebanner ist in der gesamten Webseite integriert.