Continuous TYPO3 upgrade & TYPO3 website facelift for VGF

Everyone is coming along.

The Verkehrsgesellschaft Frankfurt am Main (VGF) is the transport company for the city of Frankfurt and ensures mobility in the region with over 400 rail vehicles on nine underground and ten tram lines. It is responsible for infrastructure, safety, cleanliness, service and reliable operation. VGF has been a long-standing customer of our digital agency since 2008. During this time, we have implemented the website relaunch, regular TYPO3 upgrades and SEO optimisations for the website, as well as providing technical support. A particular focus was always placed on accessibility, modern, user-friendly web design and information architecture. Our collaboration with VGF takes place in agile sprints – efficient, collaborative and solution-oriented.

Challenge:

The project to update TYPO3 from version 10 to version 12 posed a particular challenge due to its high complexity. In the past, upgrades were usually carried out in one big step, which resulted in extensive testing phases and a high susceptibility to errors. This time, a different approach was taken: the components of the system – both on the server side and on the application side – were first analysed and then updated step by step.
A single-step upgrade would have been too complex due to the large number of technical dependencies and system components. The server-side infrastructure, consisting of PHP, database, Varnish and operating system, had to be renewed, as did the application components in the backend and frontend of TYPO3. Additional challenges were posed by the migration of outdated extensions such as t3quick and GridElements, as well as the upgrade of Bootstrap.

Solution:

The upgrade was divided into clearly defined, smaller steps that were implemented and tested one after the other. First, the outdated t3quick package was removed and replaced with more modern solutions. This was followed by the migration from GridElements to Container and the upgrade of Bootstrap from version 4 to 5.3. Through the use of automated testing tools such as BackstopJS and the parallel use of old and new server infrastructures, the upgrade was carried out without any downtime and with high quality.

Initial situation

Outdated t3quick
GridElements
Old server-side versions

Nerdy stuff

Upgrade Bootstrap from v4 to v5.3
TYPO3 & Server upgrade
Migration of GridElements

Let's start!

Continuous TYPO3 upgrade from version 10 to 12

Due to the high complexity of the project, we decided to divide the upgrade from TYPO3 to version 12 into several clearly defined and separate technical steps. In the past, we usually carried out such upgrades as a single large step, which led to high complexity, extensive testing phases and increased risk. This made it difficult to identify and fix errors.

TYPO3-Upgrade-Service

Implementation of a structured approach for server and application modernisation

After conducting an initial analysis, all relevant components of the system were first identified. These can be divided into two main categories: server-side and application-side components. The server-side updates included updates to the versions for PHP, the database, Varnish and the server operating system. The application-side adjustments in TYPO3 affected the backend and frontend components.

Backend:

Removal of the TYPO3 package t3quick, which is no longer being developed
Migration from GridElements to Container
Upgrade from TYPO3 version 10 to version 12

Frontend:

Upgrade Bootstrap from version 4 to version 5.3

Instead of updating all components at once, we deliberately opted for a step-by-step implementation. After each partial upgrade was completed, the changes were carefully tested and then went live. This iterative approach not only gave us better control over the entire process, but also minimised the risk of unexpected problems. This allowed us to ensure that each component was stable and reliable before moving on to the next step.

Expansion of the t3quick package

The previous VGF website was based on the TYPO3 package t3quick developed by dkd, which in turn was based on t3kit.
As further development of t3quick was discontinued, it was necessary to completely remove this dependency from the project.
The main goal of this step was therefore to cleanly remove t3quick without causing any visible changes in the front end. Furthermore, individual content elements were migrated in the back end as part of this implementation under TYPO3 version 10.4.

Migrating GridElements to Container

As part of the project, the GridElements extension was replaced by the EXT:Container solution to create a future-proof basis for structural elements. This migration was necessary to improve the maintainability and flexibility of the system and to ensure integration with modern TYPO3 standards. A technical highlight was the use of automated regression visual testing with BackstopJS, in which each structural element was created on the live site. Furthermore, there were minor UI changes to the content elements and a large number of elements could be migrated automatically.

Regular TYPO3 upgrades reduce ongoing operating costs. Our automated update management system, Renovate, takes care of everything for us. Major version jumps in TYPO3 should not take longer than two LTS versions. Why? TYPO3 only supports core migrations over 2 LTS versions. This means that no additional migrations need to be integrated or created.

Ivaylo Ivanov-Kolbinger

Regular upgrades of the front-end framework

Upgrading the front-end framework not only offers technical advantages, but also a decisive, albeit often invisible, added value: it ensures support for new mobile and desktop devices on the market. Device manufacturers such as Apple and Samsung release new models every year with different resolutions, display sizes and features. These innovations require adjustments, such as additional breakpoints or higher pixel density for sharper images.

Without regular updates to the framework, these developments cannot be taken into account, which can lead to display problems. Only the latest framework versions can ensure a clean, modern and cross-platform display.

Using Renovate

Graphic with man and woman on chairs in green and black

Thanks to the preliminary work with Renovate, 95% of all extensions were already compatible with TYPO3 version 12. In addition to upgrading the TYPO3 core, new core migrations were also incorporated into the deployment process. Furthermore, our standard package was updated and updates were carried out for various software components, such as the local development environment.
The new TYPO3 version added new UI elements to the backend, offering numerous new functions for editors. However, the frontend has remained unchanged. In summary, smaller steps led to regular deployments, which brought many advantages. For example, individual components could be explicitly tested and deployed. After going live, we noticed a significantly shorter bug-fixing phase, and the go-live went unnoticed by the customer.

Flipcards for the fleet page

As part of the ongoing development of the VGF websites, a completely new fleet page was created. The aim was to present the diverse VGF fleet in a clear, user-friendly and appealing way.

The individual vehicles are displayed on the new page as so-called ‘flipcards’. The technical implementation was carried out using Isotope.js, which, in addition to the layout, also handles the filter function and the smooth animations when changing and arranging the elements. CSS animations were used for the appealing flip effects of the individual cards.

Technically, a new content element was developed within TYPO3 for the flipcards. Editorially, the most important information about each vehicle, such as year of manufacture, weight or special features, can be conveniently entered for each card. In addition, there is a categorisation system that will later be used to implement the filter functions on the page, allowing users to search specifically for certain vehicle types or categories.

After the technical implementation, the page was gradually filled with content and supplemented so that the VGF fleet can now be presented in an attractive digital format and optimally maintained editorially.