Stiftungsverwaltung Freiburg - Website mit TYPO3 und Vue.js: Projekthauptbild / Keyvisual

Stiftungsverwaltung Freiburg
Website mit TYPO3 und Vue.js

Die Stiftungsverwaltung Freiburg vereinigt unter ihrem Dach sechs eigenständige Stiftungen. Rund 640 Mitarbeitende in der Kinder- und Jugendhilfe, der Altenhilfe, in Bildung, Weinbau und Administration erbringen einen wichtigen Beitrag für mehr Menschlichkeit in der Stadt Freiburg. Durch einen Relaunch der Website haben wir diese technisch und optisch in die Gegenwart transferiert. Dabei galt vor allem, dem sehr breiten Zielgruppenspektrum einen schnellen Weg zur gewünschten Information zu ermöglichen. Eine Website als Informationsportal. Für jung und alt, für Bewerber und Mitarbeiter, für Smartphone und Tablet, für große Screens und Screenreader. Eben für alle.

Zurück
Stiftungsverwaltung Freiburg - Website mit TYPO3 und Vue.js: Screenshot
Stiftungsverwaltung Freiburg - Website mit TYPO3 und Vue.js: Stilelement Notebook

Das Projekt und dessen
Zahlen, Daten, Fakten

Launch:
Mai 2024
Kunde:
Stiftungsverwaltung Freiburg
Design:
Mikel Wohlschlegel
Technologien:
PHP, JavaScript / TypeScript, HTML, CSS
Frameworks:
TYPO3 CMS, Vue.js
www.stiftungsverwaltung-freiburg.de

Die redaktionellen Möglichkeiten:
Das Backend

Die Website nutzt TYPO3 CMS als Grundlage und verfügt über ein erweitertes Backend mit eigenen Inhaltselementen und Datensätzen. Diese wurden an die spezifischen Anforderungen des Kunden angepasst und entsprechend gebrandet. Es wurden 18 spezielle Inhaltselemente und Plugins entwickelt, um eine vielseitige Funktionalität zu bieten. Die klare Struktur und intuitive Benutzeroberfläche des Backends ermöglichen eine einfache Bedienung mit geringem Schulungsaufwand. TYPO3 bietet eine flexible und leistungsstarke Lösung für die Anpassung von Websites an individuelle Anforderungen.

Die Website umfasst zwei maßgeschneiderte Erweiterungen, die speziell für den Kunden entwickelt wurden, um Stellenanzeigen und Veranstaltungen redaktionell zu verwalten. Darüber hinaus wurden eigene Backend-Previews für alle individuell entwickelten Inhaltselemente implementiert, um Redakteuren eine schnelle Orientierung zu ermöglichen und das Backend nahezu selbsterklärend zu gestalten.

Was beim Benutzer ankommt:
Das Frontend

Das Frontend der Website präsentiert sich modern, klar und zeitlos. Es legt den Fokus auf den Inhalt, wobei jegliche Spielereien und emotionale Elemente so dosiert eingesetzt wurden, dass sie den Lesefluss nicht beeinträchtigen. Besonderes Augenmerk wurde auf eine gut strukturierte Navigation und die schnelle Auffindbarkeit von Informationen gelegt, um den Bedürfnissen eines breiten Zielgruppenspektrums gerecht zu werden. Design follows function. Zugunsten des Lesers.

Die Angebote von Wohnanlagen und Pflegeeinrichtungen wurden umfassend optimiert, um Interessierten einen schnellen Überblick über das Immobilienangebot der Stiftungsverwaltung zu bieten. Durch entsprechende Formulare können sich interessierte Personen unkompliziert für ein Wohnungsangebot vormerken lassen. Die Seiten der einzelnen Wohnanlagen und Pflegeeinrichtungen liefern detaillierte Informationen und bieten visuelle Einblicke, um einen umfassenden Eindruck zu vermitteln.

Teile des Frontends wurden mit Vue.js entwickelt, wobei besonderes Augenmerk auf die Navigation und die Listung der Stellenanzeigen gelegt wurde. Der Einsatz von Vue.js ermöglicht nicht nur eine ästhetische Darstellung der Inhalte, sondern auch eine reaktionsschnelle Interaktion für die Benutzer. Durch die Integration von Vue.js wurden sowohl die Navigationsstruktur als auch die Darstellung der Stellenanzeigen optimiert, um eine effektive und benutzerfreundliche Erfahrung zu gewährleisten.

Zusätzlich bietet eine solr Suche hochwertige Ergebnisse und ermöglicht es den Benutzern, die Suchergebnisse nach verschiedenen Facetten zu filtern. Dadurch wird eine effiziente Navigation innerhalb der Website gewährleistet und die Nutzer können gezielt die Informationen finden, nach denen sie suchen.

Ein Blick unter die Haube:
Die Technik

Die Realisierung dieses Projekts umfasste die Entwicklung neuer TYPO3 Inhaltselemente und Plugins, die eine erweiterte Funktionalität gewährleisten. Im Frontend haben wir auf modernste Technologien gesetzt, insbesondere TypeScript und Vue.js. Dabei läuft unser Frontend-Stack unter Verwendung von nativem Webpack, während wir für die Entwicklung des CSS auf SCSS zurückgegriffen haben.

Unsere Entwicklungsprozesse profitierten von einer agilen Umgebung, die auf ddev / docker basiert, um Flexibilität und Effizienz zu gewährleisten. Durch das automatisierte Deployment mittels Bitbucket Pipelines auf Staging- und Live-Umgebungen können wir einen reibungslosen Ablauf und zeitnahe Aktualisierungen sicherstellen.

UI- / UX-Design
Frontend Development
TYPO3 Extension Development (PHP)
TYPO3 Integration