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.
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
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
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
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
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
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
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
Ä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
Ä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
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
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
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.