Case Studies · Digitale Vorbilder
Research & Education · TYPO3
Digitale Vorbilder.
TYPO3 website for an EU-funded project
The project.
The #DigitaleVorbilder initiative by the Hamburg Commissioner for Data Protection and Freedom of Information for the Free and Hanseatic City of Hamburg and the State Commissioner for Data Protection and Freedom of Information of Mecklenburg-Vorpommern is aimed at families with children. The goal of the EU-funded initiative is to promote media literacy and data protection awareness in everyday digital life. To that end, the website features events, online seminars, videos and podcasts that help parents and children navigate the internet safely and use digital media responsibly, supporting families in becoming "digital role models" themselves. We were given the opportunity to build the initiative's new website with TYPO3 to give it a fitting online presence.
Concept & design
Since conveying information is the top priority, we aimed for as simple a navigation concept as possible, with short click paths. This ensures users can quickly and easily find the information they are looking for.
Since events are the heart of the #DigitaleVorbilder initiative, they are presented directly on the homepage with date, topic and a short description. Past events are automatically moved to the topic page and remain accessible online as posts. Posts can be supplemented with video recordings of the events. To make it easier for users to browse posts from past events, they can be filtered by topic.
Materials
A media library was set up to make recordings and other presentation content available long-term. Various media formats such as videos, podcasts and graphic recordings can be added there directly by #DigitaleVorbilder.
To ensure data protection and avoid dependencies, video and audio files are self-hosted. A custom player was built to play back the files and, for videos, to output subtitles in various languages. Below each video, the player includes a description and a table of contents with timestamps.
Accessibility
The homepage meets WCAG 2.1 conformance level AAA and is therefore also BITV 2.0 compliant. Accordingly, information is also available in plain language, and many videos include a version with German sign language.
Insights


