Eine moderne Website muss heute deutlich mehr leisten, als gut auszusehen. Sie soll schnell laden, auf unterschiedlichen Geräten funktionieren, für Suchmaschinen verständlich sein und sich ohne großen Entwicklungsaufwand weiterentwickeln lassen. Gleichzeitig steigen die Anforderungen an Sicherheit, Barrierefreiheit und die Integration externer Systeme.
Mit dem Relaunch unserer eigenen Website haben wir diese Anforderungen neu gedacht. Aus 25to wurde TWENTYFYVE. Statt einer klassischen Agenturwebsite haben wir ein digitales Magazin entwickelt, das redaktionelle Gestaltung mit einer individuell programmierten Benutzeroberfläche verbindet.
Die eigentliche Herausforderung lag dabei nicht im ungewöhnlichen Design, sondern darin, ein eigenständiges digitales Erlebnis auf einer leistungsfähigen, wartbaren und suchmaschinenfreundlichen technischen Grundlage umzusetzen.
Eine moderne Website beginnt mit der richtigen Architektur Unser eingesetzter TechStack Die Entscheidung für eine Technologie sollte sich aus den Anforderungen eines Projekts ergeben. Eine umfangreiche Unternehmenswebsite benötigt andere Strukturen als ein Onlineshop oder eine digitale Plattform mit individuellen Benutzerfunktionen.
Für TWENTYFYVE haben wir uns für Next.js, React und TypeScript entschieden. Diese Technologien ermöglichen eine komponentenbasierte Entwicklung, bei der sich wiederkehrende Funktionen und Gestaltungselemente zentral organisieren lassen.
Eine wesentliche Architekturentscheidung war die statische Seitengenerierung. Statt bei jedem Seitenaufruf Inhalte über einen laufenden Anwendungsserver zusammenzustellen, erzeugen wir beim Build fertige HTML-, CSS- und JavaScript-Dateien.
Diese Dateien werden anschließend direkt über Nginx ausgeliefert.
Das reduziert die Abhängigkeit von einer aktiven Serveranwendung und schafft gute Voraussetzungen für schnelle Antwortzeiten, eine effiziente Auslieferung und eine stabile Verfügbarkeit.
Gleichzeitig nutzen wir React für die interaktiven Bereiche der Website. So verbinden wir die Vorteile statisch bereitgestellter Inhalte mit einer Benutzeroberfläche, die weit über klassische Seitenwechsel hinausgeht.
Performance ist eine Frage der gesamten Umsetzung Die Ladegeschwindigkeit einer Website wird von zahlreichen Faktoren beeinflusst. Große Bilddateien, unnötige JavaScript-Pakete, schlecht konfigurierte Schriftarten oder aufwendige Animationen können die Nutzung erheblich beeinträchtigen.
Besonders bei visuell anspruchsvollen Websites entsteht schnell ein Konflikt zwischen Gestaltung und Performance.
Für TWENTYFYVE haben wir deshalb eine eigene Medienpipeline entwickelt.
Bilder werden automatisiert verarbeitet, in moderne Dateiformate konvertiert und in mehreren Auflösungen bereitgestellt. Mithilfe responsiver Bildvarianten kann der Browser die Datei auswählen, die zur jeweiligen Bildschirmgröße passt.
Zusätzlich berücksichtigt unsere Website, welche Inhalte tatsächlich benötigt werden. Da das Magazin horizontal aufgebaut ist, laden wir die Bilder der aktuellen und unmittelbar benachbarten Seiten gezielt nach. Entfernte Magazinseiten müssen ihre Bilddaten nicht bereits beim ersten Aufruf übertragen.
Auch bei der Typografie setzen wir auf Optimierung. Schriftarten werden lokal bereitgestellt und anhand der benötigten Zeichensätze aufgeteilt. Dadurch lassen sich unnötige Datenübertragungen vermeiden.
Interaktive Komponenten, beispielsweise der ausführliche Artikelleser, werden bei Bedarf geladen.
Das Ziel ist nicht, Gestaltung zugunsten der Performance zu reduzieren, sondern beides technisch miteinander zu vereinbaren.
Die Ergebnisse von Google Lighthouse für be-fyve.com Technisches SEO wird von Anfang an mitentwickelt Suchmaschinenoptimierung beginnt nicht erst mit Keywords und redaktionellen Texten. Bereits die technische Architektur beeinflusst, wie zuverlässig Suchmaschinen Inhalte erreichen, interpretieren und indexieren können.
Bei TWENTYFYVE haben wir deshalb die ungewöhnliche Navigation bewusst von der eigentlichen Erreichbarkeit der Inhalte getrennt.
Während sich Besucher durch das digitale Magazin bewegen können, besitzen ausführliche Artikel eigenständige URLs. Diese lassen sich direkt aufrufen, teilen und unabhängig von der Magazinnavigation laden.
Jede Artikelunterseite erhält individuelle Metadaten, darunter Seitentitel, Beschreibungen und Canonical URLs. Ergänzend verwenden wir strukturierte Daten nach Schema.org, um Informationen über unsere Organisation, die Website und einzelne Artikel maschinenlesbar bereitzustellen.
Eine dynamisch generierte XML-Sitemap unterstützt die Auffindbarkeit veröffentlichter Beiträge. Sollte das CMS nicht erreichbar sein, steht eine statisch erzeugte Sitemap als Rückfalllösung zur Verfügung.
Die statische HTML-Auslieferung sorgt außerdem dafür, dass wichtige Seiteninhalte nicht erst durch eine vollständig ausgeführte Browseranwendung entstehen müssen.
Diese Maßnahmen garantieren keine bestimmten Rankings. Sie schaffen jedoch die technischen Voraussetzungen, auf denen nachhaltige Suchmaschinenoptimierung aufbauen kann.
Ein Headless CMS verbindet redaktionelle Freiheit mit technischer Kontrolle Eine Website ist kein abgeschlossenes Produkt. Inhalte ändern sich, neue Leistungen entstehen, Referenzen kommen hinzu und bestehende Seiten müssen aktualisiert werden.
Deshalb gehört die redaktionelle Pflege bereits bei der Entwicklung zur technischen Konzeption.
Für TWENTYFYVE verwenden wir Directus als Headless Content Management System. Anders als bei klassischen CMS-Architekturen sind die Verwaltung der Inhalte und deren Darstellung im Frontend voneinander getrennt.
Unsere Redaktion kann Beiträge erstellen, Bilder austauschen, Seitenlayouts auswählen und unterschiedliche Inhaltsbausteine kombinieren, ohne dafür den Quellcode bearbeiten zu müssen.
Dafür haben wir einen modularen Artikelbaukasten entwickelt, der unter anderem formatierte Texte, Bilder, Videos, Zitate und FAQ unterstützt.
Die Besonderheit unserer Architektur liegt in der Verbindung zwischen statisch erzeugten Seiten und aktuellen CMS-Inhalten.
Beim Build übernehmen wir die veröffentlichten Inhalte und benötigten Medien in die Website. Nach dem Laden kann das Frontend zusätzlich freigegebene Änderungen aus Directus abrufen.
Ist das CMS vorübergehend nicht erreichbar, bleibt der bereits ausgelieferte Inhaltsstand verfügbar. Neue eigenständige Artikeladressen und aktualisierte Suchmaschinenmetadaten werden mit dem nächsten Build veröffentlicht.
So entsteht ein System, das redaktionelle Flexibilität mit einer robusten technischen Grundlage verbindet.
Individuelle Benutzererlebnisse brauchen individuelle Lösungen Standardisierte Komponenten sind sinnvoll, solange sie die Anforderungen eines Projekts erfüllen. Für unsere Magazinnavigation reichte ein gewöhnlicher Slider jedoch nicht aus.
Die Website musste verschiedene Eingabemethoden unterstützen, darunter Mausrad, Trackpad, Touchgesten und Tastatur. Gleichzeitig sollten längere Artikel innerhalb einer Magazinseite vertikal lesbar bleiben, ohne unbeabsichtigt die nächste Seite aufzurufen.
Dafür haben wir eine eigene Navigationslogik mit TypeScript und nativen Browserfunktionen entwickelt.
Sie interpretiert unterschiedliche Scrollimpulse, steuert die horizontale Bewegung und sorgt dafür, dass sich die Ansicht kontrolliert auf der nächsten Magazinseite positioniert. Auch schnelle Richtungswechsel, verschachtelte Scrollbereiche und unterschiedliche Bildschirmgrößen werden berücksichtigt.
Wir verzichten dabei weitgehend auf zusätzliche Animationsbibliotheken und nutzen vorhandene Browsertechnologien wie CSS-Transformationen, die Web Animations API und requestAnimationFrame.
Das reduziert zusätzliche Abhängigkeiten und gibt uns die Kontrolle darüber, wie sich die Benutzeroberfläche verhält.
Entscheidend ist dabei nicht, möglichst viele Animationen einzusetzen. Interaktionen müssen einen gestalterischen oder funktionalen Zweck erfüllen und auch unter unterschiedlichen Nutzungsbedingungen zuverlässig funktionieren.
Barrierefreiheit gehört zur technischen Qualität Moderne Webentwicklung muss berücksichtigen, dass Menschen Websites auf unterschiedliche Weise bedienen.
Nicht jeder verwendet eine Maus. Manche navigieren mit der Tastatur, andere nutzen assistive Technologien oder haben in ihrem Betriebssystem reduzierte Animationen eingestellt.
Auch bei einer ungewöhnlichen Benutzeroberfläche dürfen diese Anforderungen nicht außer Acht gelassen werden.
Unsere Website bietet deshalb neben der gestengesteuerten Navigation alternative Bedienmöglichkeiten über Tastatur, Navigationsbuttons und Inhaltsverzeichnis.
Der Artikelleser verwendet das native HTML-Element dialog und berücksichtigt die Fokussteuerung beim Öffnen und Schließen. Für Personen, die reduzierte Bewegung bevorzugen, werden Animationen entsprechend angepasst.
“ Diese Entscheidungen sind Teil einer barrierebewussten Entwicklung.
Sicherheit entsteht nicht durch ein einzelnes Plugin Neben Gestaltung und Performance ist Sicherheit ein wesentlicher Bestandteil professioneller Webentwicklung.
Mit jeder Schnittstelle, jedem Formular und jedem externen Dienst entstehen zusätzliche Anforderungen an die Verarbeitung und den Schutz von Daten.
Bei TWENTYFYVE haben wir verschiedene Sicherheitsmaßnahmen direkt in die Architektur integriert.
Öffentliche CMS-Zugriffe sind auf freigegebene Inhalte beschränkt. Administrative Funktionen und Schreibzugriffe bleiben geschützt. Redaktionelle HTML-Inhalte werden kontrolliert verarbeitet, wobei nicht erlaubte Elemente und Attribute entfernt werden.
Auch unser Kontaktformular verwendet eine eigene serverseitige Verarbeitung. Eingaben werden überprüft, Anfragen begrenzt und gegen typische automatisierte Missbrauchsversuche abgesichert. Der Versand erfolgt über Resend, ohne dass der verwendete API-Schlüssel im Browser offengelegt wird.
Zusätzlich sind Website und CMS betrieblich voneinander getrennt.
Damit betrachten wir Sicherheit als Zusammenspiel aus Architektur, Zugriffsrechten, Eingabevalidierung und kontrollierter Verarbeitung, statt sie ausschließlich einer einzelnen Erweiterung zu überlassen.
Automatisierte Veröffentlichungen reduzieren Risiken Mit dem Launch einer Website endet die technische Arbeit nicht. Neue Inhalte, Fehlerbehebungen und zusätzliche Funktionen müssen auch im laufenden Betrieb zuverlässig veröffentlicht werden können.
Dafür haben wir einen automatisierten Deployment-Prozess mit GitHub Actions eingerichtet.
Vor einer Veröffentlichung werden Tests ausgeführt und die Website neu gebaut. Anschließend wird die neue Version auf den Server übertragen und geprüft.
Erst wenn sämtliche benötigten Dateien vollständig vorhanden sind, erfolgt die Umschaltung auf das neue Release.
Schlägt die anschließende Funktionsprüfung fehl, kann das System automatisch auf die vorherige Version zurückwechseln.
Durch diese Vorgehensweise vermeiden wir, dass Besucher während eines Uploads auf unvollständige Dateien zugreifen. Gleichzeitig bleibt eine vorherige funktionierende Version verfügbar.
Ein strukturierter Release-Prozess ist besonders dann wichtig, wenn eine Website regelmäßig erweitert werden soll oder geschäftskritische Funktionen bereitstellt.
Eine gute Website ist auf Weiterentwicklung ausgelegt Die Anforderungen an digitale Kommunikation verändern sich. Neue Inhalte, technische Standards, Integrationen und Nutzungsgewohnheiten sorgen dafür, dass Websites kontinuierlich angepasst werden müssen.
Deshalb haben wir TWENTYFYVE nicht als starre Sammlung einzelner Seiten entwickelt, sondern als erweiterbares System.
Das CMS verwaltet Inhalte unabhängig von ihrer Darstellung. Wiederverwendbare React-Komponenten bilden die technische Grundlage. Individuelle Seitenlayouts schaffen gestalterische Vielfalt, ohne für jeden Beitrag eine neue Website entwickeln zu müssen.
Die Trennung von Frontend, Content Management und Medienverarbeitung erleichtert es, einzelne Bereiche gezielt weiterzuentwickeln.
Mit unserem Relaunch wollten wir zeigen, dass eine eigenständige visuelle Identität und moderne technische Standards keine Gegensätze sein müssen.
Eine Website kann ungewöhnlich gestaltet sein und trotzdem auf Performance, Suchmaschinenfreundlichkeit, Sicherheit, Zugänglichkeit und langfristige Wartbarkeit ausgelegt werden.
Gute Webentwicklung beginnt deshalb nicht bei der Frage, welche Funktionen technisch möglich sind, sondern welche Architektur das gewünschte digitale Erlebnis dauerhaft trägt.
Und genau dieser Anspruch prägt die neue Website von TWENTYFYVE.
