Webseite Agentur IBK: TYPO3, Mega Menu, Blog Extension

Die Webseite der Internetagentur Irma Berscheid-Kimeridze gibt es seit 2015. Seinerzeit mit der Version 6.2 von TYPO3 entstanden, läuft diese Seite seit Juli 2020 mit der Version 10.4 des beliebten Redaktionssystems. Allen Versionen seit dieser Zeit gemeinsam ist die Ausrichtung auf responsives Frontend. Besonderheiten der Webseite sind das Mega Menu mit Bootstrap 4 und die von Thomas Berscheid mit Extbase und Fluid programmierte Blog Extension.

Frontend Konzept für responsive Webseite

Das Frontend Konzept der ersten Version unserer Webseite basierte auf einem eigenen kompakten Style Sheet mit wenigen Media Queries zur Umschaltung der Ansicht, so dass man die Webseite auf allen mobilen Endgeräten und dem Desktop gleichermaßen nutzen konnte. Die Inhalte haben wir nach und nach ausgebaut und redaktionell erweitert.

Relaunch mit Bootstrap 3 und responsiver Navigation

Bereits Anfang 2017 haben wir die Webseite neu gestartet. Ein Grund dafür war, dass die Navigation nicht mehr den Anforderungen für eine mobile Webseite genügte. Denn nun hatten wir mehr als 50 einzelne Seiten, für die wir eine Navigation bereitstellen wollten, die auf allen Endgeräten gleichermaßen läuft. Somit haben wir also das Twitter Bootstrap Framework in der Version 3.3.5 eingeführt. Mit Hilfe von Bootstrap haben wir nicht nur die Navigation neu gestaltet, sondern auch alle Inhalte dem Raster Konzept von Bootstrap angepasst.

Ende 2018 war es Zeit für ein weiteres upgrade der Webseite: Die Version 9.5 von TYPO3 war erschienen. Das Frontend und die Inhalte haben wir im bisherigen Layout gelassen. Das upgrade machte allerdings eine weitere technische Anpassung notwendig: Unser Blog läuft mit Hilfe einer selbst entwickelten Extension und musste auf den neuen doctrine Datenbank Treiber umgestellt werden. Dies war für alle SQL-Abfragen in wenigen Stunden erledigt. Ein Problem stellte allerdings die Suche dar, denn diese stand wegen der technischen Änderungen am Projekt erst mehrere Wochen nach dem Start von TYPO3 v9.5 zur Verfügung. 

Relaunch mit Bootstrap 4 und Mega Menu

Im Oktober 2019 erfolgte ein weiterer Relauch der Agenturseite. Wir haben die Webseite auf Bootstrap 4 umgestellt. Grund dafür war in erster Linie erneut die Navigation: Um alle Inhalte der Webseite auf einen Blick darstellen zu können, haben wir ein Mega Menu eingeführt, dass die Inhalte der ersten drei Ebenen für jede Rubrik auf einen Blick darstellt. Den Quelltext für das Mega Menu erzeugen wir dabei mit Hilfe des VHS Viewhelpers, der mit seinen eigenen Schnittstellen und der Logik von Fluid eine wertvolle Hilfe darstellt. 

TYPO3 Tutorial von Thomas Berscheid

In den ersten Monaten des Jahres 2020 haben wir die redaktionellen Inhalte dieser Webseite unserer Internetagentur weiter ausgeweitet. Der wichtigste Punkt dabei: Das TYPO3 Tutorial von Thomas Berscheid! In diesem Lehrgang bieten wir Ihnen Informationen über die Installation, das Setup und die Konfiguration des beliebten Content Management Systems an.

Relaunch mit TYPO3 10.4

Im Juli 2020 haben wir diese Webseite auf einen neuen technischen Stand gehoben: Agentur IBK läuft nun auf der Version 10.4 von TYPO3!

Damit einher gingen mehrere technische Updates:

  • Die Bootstrap Version haben wir auf 4.5.1 upgedatet
  • jQuery ist nun in der Version 3.5.1 eingebunden
  • Unser jQuery Theme läuft nun in der Version 1.12.1

Blog Extension als Nachrichtensystem für Agentur Webseite

Im Jahr 2015 hat Thomas Berscheid mit der Programmierung der Blog Extension für die TYPO3 Webseite der Agentur IBK begonnen. Diese Extension haben wir im Jahr 2020 massiv ausgebaut. Zum eine hatte dies technische Hintergründe:

  • Mit dem Upgrade auf die Version 9.5 von TYPO3 war es notwendig geworden, die SQL-Queries in der Extension auf den Doctrine Datenbank Treiber umzuschreiben
  • Mit dem Upgrade auf TYPO3 10.4 musste die gesamte Modellierung der Daten angepasst und alle PHP-Skripte auf Standards der objektorientierten Programmierung umgeschrieben werden

Zum zweiten haben wir die Extension nun weiter ausgebaut, um sie als Nachrichtensystem für die gesamte Webseite zu nutzen:

  • Mehrere Listenansichten ermöglichen die Darstellung der neuesten Blogbeiträge in einem Raster und als Drop Down Menu
  • Die Listenansicht und Einzelansicht aller Beiträge überschreibt für für SEO relevante Daten (META-Description, TITLE-Attribut) über die API von TYPO3 10.4
  • Alle Links werden als sprechende Links generiert und über das Routing aufgelöst

Der Erfolg gibt uns Recht. Google listet Beiträge des Blog bereits wenige Stunden nachdem diese veröffentlicht wurden.

Mehr zu diesen TYPO3 Themen auf unserer Seite:

 TITLE-Tag und die META Description in Extension füllen

 Canonical Link mit TypoScript: SEO für eine Extension

Routing und Weiterleitungen: sprechende Links für SEO in TYPO3

Weitere Informationen

Die Navigation dieser Webseite, auf der Sie sich gerade befinden, ist ein Mega Menu auf der Basis von Bootstrap 4. Dieses Mega Menu haben wir mit Hilfe der TYPO3 Extension VHS Viewhelper erstellt. Lesen Sie mehr dazu im TYPO3 Tutorial von Thomas Berscheid:

 Mega Menu mit VHS Viewhelper im TYPO3 Tutorial