Referenz: eigene Website
Unsere Website läuft im selben System wie das Portal.
Diese Website ist ein TYPO3, das nur Daten liefert, und davor steht eine Oberfläche in Angular. Die Inhalte pflegen wir in TYPO3 nach festen Regeln, und Wächter prüfen Texte und Bilder, bevor eine Änderung weitergeht. Was wir Kunden für große TYPO3-Auftritte empfehlen, hat hier den ersten Lauf: Redaktion mit Wächtern, Auslieferung als Paket und Betrieb in Deutschland.
Die Aufgabe und der Weg
Herausforderung und Umsetzung
Der Relaunch sollte die Positionierung schärfen und zugleich zeigen, wie wir TYPO3 heute aufsetzen.
Ausgangslage
Die Herausforderung
Der Relaunch sollte Individualsoftware zuerst zeigen und TYPO3 als zweite Säule. Zugleich wollten wir eine Website, die dieselbe Bauform trägt wie unsere Kundenprojekte auf TYPO3, sich wie eine Anwendung anfühlt und deren Inhalte ein Wächter gegen feste Regeln prüft.Headless, Regeln, Prüfstand
Umsetzung
Die Umsetzung
Wir haben TYPO3 mit Content Blocks als Redaktionssystem aufgesetzt, das Seiten nur als Daten liefert, und davor eine Oberfläche in Angular entwickelt. Zwei Wächter messen die Stage, die Pipeline liefert beides als Container aus, und seit 2026 ist die Website unser eigener TYPO3-Beleg.TYPO3, Angular, Pipeline
Startseite
Die Seite, die wir selbst ausliefern
Was man sieht
Der Einstieg trägt die Aussage des Hauses, das Menü die vier Leistungen und den Kontakt. Alles darunter sind Inhaltsbausteine aus TYPO3 Content Blocks, vom Intro über Text mit Bild und Kachelraster bis zu Story und Banner.
Die Oberfläche in Angular holt die Seite als Daten und setzt sie zusammen; TYPO3 liefert keine einzige HTML-Seite aus. Das Handy zeigt dieselbe Ordnung, Menü und Knöpfe passen sich an.
Reichweite messen wir mit Matomo auf Servern bei Hetzner in Deutschland, die wir selbst betreuen. Ein Besucher sieht deshalb keinen Cookie-Hinweis.
Redaktion
Inhalte nach Regeln, die ein Wächter prüft
Was dahinter steht
Jede Seite, jedes Element und jedes Bild pflegen wir in TYPO3. Die Regeln dafür stehen in einer Redaktionsdatei, von der Wir-Form bis zur Bildgröße.
Zwei Wächter messen die Stage nach jeder Änderung: einer die Redaktion mit Knöpfen, Absätzen, Wiederholungen und Bildgewicht, einer den Kopf jeder Seite mit Titel, Beschreibung, Strukturdaten und Sitemap. Ein Befund nennt Regel, Seite und Element, und erst danach geht die Änderung weiter.
Auslieferung
Jede Änderung geht denselben Weg wie beim Kunden
Was dahinter steht
Frontend und TYPO3 entstehen als Container, also als abgeschlossene Pakete je Anwendung, in unserer eigenen Pipeline mit Tests und Wächtern. Ausgerollt wird erst nach grünen Prüfungen, auf Stage und Live.
Die Website liefert Sitemap und Strukturdaten für Suchmaschinen selbst aus; ihr Kopf trägt je Seite Titel, Beschreibung und Vorschaukarte. Die Server dafür stehen bei Hetzner; Updates, Sicherung und Überwachung laufen über unser Portal.
Betrieb
Technische Schwerpunkte
Diese Website liegt auf Servern bei Hetzner in Deutschland, die wir selbst betreuen, zusammen mit dem Portal, mit dem sie sich das Backend teilt.
Ein Backend für zwei Oberflächen
Website und Portal sind logisch getrennt und nutzen dasselbe TYPO3, dieselbe Anmeldung, dasselbe Kontaktformular und denselben Terminplaner. Eine Anfrage von hier landet als Datensatz im Portal, wo das Team sie bearbeitet.
Was das Portal kann, steht in der Referenz zum bytediver-Portal.
Wer sie aktuell hält
Sicherungen, Überwachung und neue Fassungen steuern wir aus unserem eigenen Portal, an derselben Stelle wie bei den Kunden.
Warum Headless
Vier Gründe für diese Bauform
Eine Agentur-Website ist selten der Prüfstand für ihr eigenes Redaktionssystem. Unsere ist es.
foto
Redaktion
Bausteine statt freier Seiten
Jedes Element ist ein Content Block mit festen Feldern: Vorzeile, Überschrift, Text, Bild und Knöpfe. Eine Redaktion kann nichts verbiegen, ein Wächter kann alles messen.Oberfläche
Angular vor dem Redaktionssystem
Die Oberfläche ist eine Anwendung, die Seiten als Daten holt und Übergänge, Partikel und Ladezustände selbst spielt. TYPO3 bleibt Datenquelle und Rechteverwaltung.Wächter
Regeln, die ein Skript prüft
Die Redaktionsregeln stehen in einer Datei, und ein Wächter misst jede Seite dagegen. Ein Befund nennt Regel, Element und Ersatz.Datenschutz
Messen ohne Cookies
Matomo läuft auf unseren Servern und zählt Besuche ohne Cookies; deshalb braucht die Website kein Einwilligungsfenster. Die Daten bleiben bei uns.
Womit umgesetzt
Technologien im Projekt
Dieselben Werkzeuge wie in den Kundenprojekten auf TYPO3, nur dass wir hier jeden Tag selbst hineinsehen.
logo
Redaktion
TYPO3 mit Content Blocks
Das Redaktionssystem hinter Website und Portal. Content Blocks beschreiben jedes Element als Datensatz mit festen Feldern, den die Oberfläche als JSON bekommt.
Oberfläche
Angular als Oberfläche
Die Website ist eine Angular-Anwendung, die Seiten als Daten holt; Übergänge, Partikel und Ladezustände kommen aus einem Bewegungskonzept, nicht aus dem CMS.
Auslieferung
Docker in der Pipeline
Frontend und TYPO3 entstehen als zwei Images in unserer eigenen Pipeline, geprüft von Tests und Wächtern, ausgerollt auf Stage und Live.
Messung
Matomo
Die Reichweitenmessung läuft auf unseren Servern, ohne Cookies. Besuchsdaten bleiben nur so lange, wie die Datenschutzerklärung es nennt.
Betrieb
Server bei Hetzner
Website, Portal und Matomo laufen auf denselben Servern in Deutschland. Updates, Sicherungen und Überwachung laufen über unser Portal, das im selben System wohnt.
Prüfung
Playwright
Die Oberfläche wird mit Playwright im echten Browser geprüft, Desktop wie Handy, und dieselben Werkzeuge nehmen die Screens für die Referenzseiten auf.
Referenzen
Aus eigener Hand und beim Kunden
Eigene Anwendung
bytediver-Portal
Das Werkzeug hinter dieser Website. Tickets, Zeiten, Angebote und Rechnungen laufen bei uns in einer Anwendung zusammen, die wir selbst betreiben.Angular, PHP, Echtzeit
Referenz bytediver-Portal
Kundenportal
BITMARCK
Was hier im Kleinen steht, trägt beim Kunden ein Portal für die gesetzlichen Krankenkassen. Wir entwickeln es auf TYPO3 weiter.TYPO3, Relaunch
Referenz BITMARCK
Signal senden
Fragen zu Headless-TYPO3? Sprich direkt mit Tim.
TYPO3
Angular
Redaktion
Tim Rücker
Geschäftsführer
Nächster Schritt
Eine Website, die sich wie eine Anwendung anfühlt?
Sag uns, wie eure Website heute gepflegt wird und wo sie klemmt.
Im Gespräch sagen wir, ob Headless für euch trägt oder ein klassisches TYPO3 besser passt.