Visual Editing im CMS-Vergleich

Was ist ein CMS?

Ein Content Management System (CMS) ist eine Software, die es ermöglicht, Inhalte für Webseiten und Anwendungen zu erstellen, zu verwalten und zu bearbeiten. Es stellt eine benutzerfreundliche Oberfläche bereit, die es auch Anwendern ohne Programmierkenntnisse ermöglicht, Inhalte effizient zu pflegen und zu organisieren.

Headless CMS

Ein Headless CMS ist ein Content-Management-System, das nur das Backend zur Verwaltung von Inhalten bereitstellt, ohne eine eigene Frontend-Ansicht. Es bietet über APIs den Zugriff auf die Inhalte, die dann auf beliebigen Plattformen oder Geräten angezeigt werden können. Diese Architektur bietet maximale Freiheit und Anpassungsfähigkeit bei der Gestaltung von Inhalten, wodurch wir bei Zewas Websites maßgeschneidert und ohne Einschränkungen durch das CMS an die Bedürfnisse unserer Kunden anpassen können.

Visual CMS

Ein Visual CMS ermöglicht es, Inhalte direkt auf der Webseite zu bearbeiten und Änderungen in Echtzeit zu sehen, ohne den Code anpassen zu müssen. Früher boten traditionelle CMS diese Funktion bereits, sodass Benutzer Inhalte „live“ bearbeiten konnten. Viele moderne Headless CMS-Systeme wie Tinacms und Sanity haben diese Funktionalität wieder aufgenommen und ermöglichen es, Inhalte visuell zu bearbeiten, während die Flexibilität eines Headless Systems erhalten bleibt. Dadurch profitieren Nutzer von einer benutzerfreundlichen Bearbeitung bei gleichzeitiger Unabhängigkeit und Flexibilität.

Welche Arten des Visual Editing gibt es?

Je nach CMS-Plattform und Anwendungsfall unterscheidet sich die Bearbeitungserfahrung teilweise erheblich. Grundsätzlich lassen sich vier Kategorien des Visual Editing im Kontext von CMS-Systemen unterscheiden:

1. Visuelle Vorschau

Bei dieser Methode werden die Eingabefelder des CMS und die Website nebeneinander dargestellt. Änderungen am Content können entweder live angezeigt oder nach dem Speichern sichtbar gemacht werden.

Vorteile: Ideal für strukturierte Inhalte, gute Übersicht durch parallele Ansicht.

Nachteile: Bearbeitung erfolgt nicht direkt im Content, eher technisch-abstrakt.

Beispiele: Hygraph, Directus, Amplience, Strapi, Contentstack

2. Kontextuelles Live-Editing

Hier klickt man direkt auf ein Element der Seite, woraufhin ein Bearbeitungsformular – meist in einer Seitenleiste – erscheint. Teilweise öffnet sich auch ein neuer Tab mit der passenden CMS-Oberfläche. Hier wird der Content auch schon in Blöcke eingeteilt werden, sodass ganze Seiten intuitiv vom Nutzer erstellt werden können.

Vorteile: Intuitive Bedienung durch visuelle Zuordnung der Inhalte.

Nachteile: Wirkt wie echtes WYSIWYG*, ist es aber nicht ganz – zusätzlicher Entwicklungsaufwand nötig.

Beispiele: Sanity, Storyblok, kontent.ai, tinacms

* What you see is what you get

3. Fast WYSIWYG

In dieser Kategorie wird blockbasiert gearbeitet, meist auf Basis eines Designsystems. Es lassen sich Inhalte innerhalb vordefinierter Muster und Strukturen bearbeiten – oft inklusive externer Datenquellen und Personalisierung.

Vorteile: Strukturierte Bearbeitung mit klaren Design-Vorgaben, oft zusätzliche Features wie Sitemap-Management.

Nachteile: Komplexe Setups oder starker Plattform-Lock-in.

Beispiele: Uniform, Contentful Studio, builder.io, Plasmic, Netlify Create

4. Vollständiges WYSIWYG

In dieser Kategorie gestaltet man wie ein Designer – inklusive aller CSS-Eigenschaften, Animationen und Layouts. Die Plattform übernimmt dabei meist sowohl das Hosting als auch den Code.

Vorteile: Einfacher Einstieg, visuell sehr mächtig.

Nachteile: Wenig skalierbar, Inhalte oft nicht wiederverwendbar, starke Abhängigkeit von der Plattform.

Beispiele: Webflow, Wix, Squarespace, Weweb

Warum verwenden wir Kontextuelles Live Editing?

Bei Zewas setzen wir bewusst auf kontextuelles Live Editing, weil es den idealen Mittelweg zwischen Benutzerfreundlichkeit und technischer Flexibilität bietet. Im Vergleich zu anderen Visual-Editing-Ansätzen hat sich dieses Modell für unsere Anforderungen als besonders geeignet erwiesen.

Die visuelle Vorschau wirkt auf den ersten Blick modern, erlaubt aber keine direkte Interaktion mit den Inhalten – man kann nicht auf ein Element klicken und es bearbeiten. Es fehlt der echte „Live“-Charakter, den Redakteure erwarten, und das Bearbeiten bleibt oft abstrakt und wenig intuitiv.

Fast-WYSIWYG-Systeme hingegen arbeiten meist blockbasiert und innerhalb eines starren Designsystems. Das schränkt unsere gestalterische Freiheit ein und führt oft zu komplexen Setups oder einem starken Plattform-Lock-in – beides passt nicht zu unserem flexiblen und technologieoffenen Entwicklungsansatz.

Vollständige WYSIWYG-Systeme wiederum bieten eine beeindruckende visuelle Kontrolle, stoßen aber bei größeren Projekten schnell an ihre Grenzen. Die Inhalte sind häufig nicht wiederverwendbar, die Plattform kontrolliert den Code und das Hosting, und Anpassungen sind stark limitiert – für unsere skalierbaren und individuellen Kundenprojekte ein klares Ausschlusskriterium.

Kontextuelles Live Editing bietet für uns die perfekte Balance: Es ist einfach zu bedienen, da Nutzer direkt auf der Seite Inhalte anklicken und bearbeiten können – ohne Gefahr, etwas „kaputtzumachen“. Gleichzeitig behalten unsere Entwickler die volle Kontrolle über die Struktur und Technologie der Anwendung. Die Oberfläche ist nicht überladen, und durch den klaren Rahmen, den wir vorgeben, bleibt das System übersichtlich und fehlertolerant. So erreichen wir ein höchst anpassbares, sicheres und zukunftsfähiges Setup, das sowohl für unsere Kunden als auch für die Entwicklung optimal funktioniert.