Wie entwickeln wir Websites, die redaktionsfreundlich sind, technisch auf dem neuesten Stand bleiben und gleichzeitig eine Developer Experience schaffen, mit der wir gerne arbeiten?

Wir haben unseren Tech-Stack immer wieder hinterfragt und optimiert und versucht, dabei auf unsere, wie auch die Bedürfnisse unserer Kund:innen einzugehen. Für uns ist es wichtig, dass wir unseren Stack einerseits für unterschiedlich grosse, wie auch für Projekte in unterschiedlichen Kontexten, skalierbar und wartbar einsetzen können.

Mit der Benutzeroberfläche und dem Setup von WordPress wurden wir auf längere Zeit nicht glücklich und entschieden uns schliesslich für Craft CMS als eigenständiges Headless-Backend und Nuxt JS als Frontend-Framework. Somit konnten wir für uns eine Entwicklungsumgebung schaffen, die uns die Freiheit gibt nach unseren Vorstellungen und den Anforderungen der Projekte zu arbeiten.

Craft CMS kombiniert eine intuitive, redaktionsfreundliche und barrierefreie Benutzeroberfläche mit der Flexibilität eines modernen Headless-Systems. Backend und Frontend sind somit voneinander getrennt, kommunizieren jedoch über die leistungsstarke GraphQL-Schnittstelle von Craft. Das Content Modelling lässt sich frei gestalten. So können Inhalte nicht nur auf der Website, sondern auch in anderen Anwendungen oder Plattformen genutzt werden.

• Für Redakteur:innen: intuitive Oberfläche, klare Workflows, einfache Pflege von Inhalten
• Für Entwickler:innen: flexibles Content-Modelling, saubere Strukturen, API-first-Ansatz
• Für Kund:innen: skalierbare, zuverlässige Plattform, die mitwächst

Nuxt, was einst als kleiner Static-Site-Generator auf Basis des Frameworks von Vue.js entstand, ist mittlerweile ein umfassendes Web-Framework und bietet uns bei der Umsetzung einige entwicklerfreundliche Features. Mit Nuxt haben wir die Möglichkeit, kleinere Single-Page-Apps, bis hin zu grösseren und komplexeren Web-Apps umzusetzen.

• Moderne Entwicklungsumgebung
• Schnelle, SEO-freundliche Seiten: Nuxt unterstützt sowohl serverseitiges Rendering als auch das Generieren statischer Seiten, was für uns und unsere unterschiedlichen Projekte eine tolle Flexibilität bietet
• Modular & übersichtlich: Dank standardisierter Projektstruktur, Komponenten und Plugins bleiben Projekte erweiterbar, wartbar und teamfreundlich.

Je nach Projekt setzen wir auf unterschiedliche Hosting-Strategien:

Klassisches Hosting:

• Kombination aus einem bestehenden Hosting für das CMS (z. B. Metanet/Hostpoint) und zusätzlich die CDN-Lösung von Netlify für das Frontend
• Ideal für kleinere oder standardisierte Projekte

Managed Server bei Ops One – unser bevorzugtes Setup:

• CMS und Frontend auf derselben Infrastruktur
• Direkte Vertragsbeziehung zwischen Endkund:innen und Hosting-Anbieter
• Hohe Stabilität, klare Backup-Strategie, sichere Infrastruktur
• Effiziente Zusammenarbeit dank direktem Support
• Server in der Schweiz, nachhaltiger Strom

Ops One bietet für unser Setup ein schönes Gesamtpaket, das sowohl technisch als auch organisatorisch ideal zu unseren Projekten passt.

Damit wir bei unseren unterschiedlichen Projekten den Überblick über neue Releases behalten, verwenden wir Buddy.works. Mit diesem Tool automatisieren wir unsere Build- und Deployment-Workflows zuverlässig und flexibel.

Für jedes Projekt und jede Umgebung haben wir die Möglichkeit, individuelle Pipelines zu definieren, die genau zu den jeweiligen Anforderungen passen. So können bei jedem Release automatisch Tests ausgeführt und Deployments sicher und reproduzierbar durchgeführt werden.

Die eingesetzten Tools in unserem Stack müssen nicht nur funktionieren, sondern auch Freude machen. Unsere vielfältigen Hintergründe helfen uns, Designs und die Bedürfnisse der Nutzer:innen zu verstehen und gleichzeitig unsere Anforderungen bei der Umsetzung gerecht zu werden. 

Mit unserem Setup haben wir die Freiheit, unabhängig von fertigen Themes oder starren Vorgaben zu arbeiten. So können wir Designs individuell und exakt über das gesamte Projekt hinweg umsetzen. Unabhängig davon, ob das Design aus unseren eigenen Federn entstand, oder wir mit einem anderen Team zusammenarbeiten.

Mit unserem Setup durften wir bereits einige unterschiedlich grosse Projekte umsetzen. Von kleineren Inhaltsseiten für KMUs, bis zu komplexeren Auftritten für Institutionen.

• Skalierbar und erweiterbar: Dank Headless-Architektur können Inhalte über APIs auch in Apps, Microsites, Digital-Signage oder IoT-Systeme eingebunden werden.
• Langlebig und wartungsarm: Regelmässige Updates von Craft und Nuxt.
• Unabhängig & flexibel: Durch den modularen Aufbau kann jede Komponente (Hosting, Frontend, CMS) bei Bedarf ausgetauscht oder erweitert werden, ohne das ganze System zu verändern.
• Zukunftssicher: Der Stack basiert auf modernen Webstandards.

Es ist uns ein Anliegen, unsere Projekte möglichst barrierefrei umzusetzen. Einerseits in der Bedienung der Webseite für Nutzer:innen, andererseits soll das im besten Fall auch bereits auf der Ebene der Inhaltspflege geschehen. Mit dem baldigen neuen Release von Craft 6 soll nun auch das Control-Panel des CMS dem Accessibility-Standart «WCAG 2.2» konform werden.

Der Headless-Ansatz erlaubt es uns dabei, sowohl das CMS als auch das Frontend individuell auf den neusten Stand zu bringen und somit auch Gebrauch der neusten Features zu machen, sei es bei der Programmierung, oder der Inhaltspflege.