Artikel

Wie viel Freiheit soll es sein? Verschiedene CMS-Ansätze im Vergleich.

In meiner Arbeit als Webentwickler habe ich einige verschiedene CMS-Systeme eingesetzt und noch mehr gesehen. Sie unterscheiden sich oft grundlegend darin, wie die Inhalte einer Website strukturiert sind und bearbeitet werden können. Hier möchte ich einige Ansätze vergleichen und meine persönliche Erfahrung schildern, welcher Ansatz in welchen Projekten Sinn macht und wie ich persönlich bei der Auswahl vorgehe.

Bild von Enzo Volkmann, dem Autor dieses Artikels 14.11.2024

One to rule them all: Ein Texteditor

Das klassische Beispiel ist eine WordPress-Seite, wie sie früher aufgebaut war (heute gibt es da auch mehr Möglichkeiten). Das Design der Seite gibt den visuellen Rahmen vor, in einem einzigen Textfeld lassen sich sämtliche Inhalte beispielsweise eines Blog-Posts verfassen. Dabei stehen verschiedene Möglichkeiten bereit, den Text zu formatieren, also etwa die Farbe, fett oder schräg oder auch das Anlegen von nummerierten oder nicht nummerierten Listen. Einen solchen Editor nennt man auch WYSIYWG-Editor, kurz für "what you see is what you get".

Generell gibt es dabei abgesehen von eben diesem Textinhalt für den normalen Benutzer - ohne Programmierkenntnisse - keine Möglichkeit, das Aussehen und Verhalten der Seite grundlegend anzupassen

Je umfangreicher die Bearbeitungsmöglichkeiten des Fließtextes sind, desto mehr Variationen und auch Abweichungen von einem generell einzuhaltenden Stil werden möglich. Wenn den Benutzern etwa erlaubt wird, den Text in jeder erdenklichen Farbe darzustellen, ist es sehr wahrscheinlich, dass das Ergebnis beispielsweise von den Farben der Marke abweicht. Zudem kann dies dazu führen, dass Text unleserlich wird, etwa durch mangelhaften Kontrast zum Hintergrund. 

Durch die Einschränkung der verfügbaren Text-Formatierungsmöglichkeiten (beispielsweise keine Farbauswahl) lässt sich dem entgegenwirken. Die Gesamterfahrung und die Möglichkeiten zur Gestaltung einer ansehnlichen Website lassen aber auch dann zu Wünschen übrig.

Durch die Beschränkung auf reinen Text gibt es keine Möglichkeit, die Seite aus verschiedenartigen Komponenten aufzubauen und so Abwechslung ins Spiel zu bringen. Kein Wunder also, dass wir uns von dieser Art der Bearbeitung schon lange entfernt haben und inzwischen bessere Möglichkeiten haben.

Screenshot des klassischen Wordpress-Editors
Screenshot des klassischen Wordpress-Editors (Quelle: wordpress.com)
Screenshot of thebiguglywebsite.com
Extrembeispiel für die völlig freie Nutzung von Farben und Formatierung in Text und Hintergrund (Quelle: thebiguglywebsite.com)

Visuelle Page-Builder

Die nächste Evolutionsstufe von Content-Management-Systemen sehe ich in visuellen Page-Buildern, also Systemen, die versuchen, den "what you see is what you get"-Ansatz (WYSIWYG) noch weiterzuverfolgen, indem die Bearbeitung quasi direkt in der fertigen Seite stattfindet, anstatt in einem getrennten Editor.

Dieser Ansatz ist in vielen Systemen verbreitet und bis heute gängig. Neben klassischen Beispielen aus dem Wordpress-Umfeld wie dem Divi-Plugin oder dem Gutenberg-Editor gibt es auch hochmoderne Vertreter wie Builder.io. Auch Shop-Systeme wie Shopify verwenden diesen Ansatz.

Alle Systeme haben hier gemeinsam, dass die Bearbeitung der Inhalte möglichst 1:1 in derselben Oberfläche stattfindet, in der sich die Seite auch den normalen Besucherinnen präsentiert. Wenn das gut funktioniert, ergibt sich bei der Bearbeitung der Seite eine sehr gute Erfahrung, denn es wird genau das gesehen, was auch später sichtbar ist.

Für Marketing- und Storytelling-Seiten ist das ein hervorragender Ansatz, denn hier kommt es auf den genauen Seitenaufbau an. Auch wenn der WYSIWYG-Ansatz hier perfektioniert ist, erfordert die Bearbeitung doch auch Fachwissen und vor allem ein Gespür dafür, wie eine Seite aufgebaut sein sollte.

Zumindest meine Kundinnen und Kunden sind meist keine Experten im Bereich Websites und Marketing, sondern eben in ihrem jeweiligen Fachgebiet - seien es Immobilien, Beregnungsanlagen, Sport oder Grundschullehre. Für diese Menschen ist es oft am einfachsten, wenn sie nur die Inhalte bereitstellen müssen, sich aber um den Seitenaufbau keine Gedanken machen müssen (dazu später mehr).

Screenshot der Bearbeitung der Website uzun.work in builder.io
Visuelle Bearbeitung der Website meines Freelancer-Kollegen uzun.work in builder.io

Seitenaufbau anhand vorgegebener Blöcke

Der aktuelle Trend vieler Content-Management-Systeme ist das Aufteilen der Seite in Blöcke, also meist horizontal abgetrennte Bausteine, aus denen man den Seitenaufbau frei zusammenstellen kann. Je nach System nennt man sie beispielsweise auch Komponenten oder Slices - gemeint ist immer dasselbe.

Die Blöcke haben in der Regel ein durch das Webdesign und die Programmierung festgelegtes Erscheinungsbild. Beispielsweise gibt es eine Text-Bild-Komponente, bei der das Bild links und der Text rechts daneben angezeigt wird. Dabei ist es beim Verwenden des Blocks nur möglich, das Bild auszuwählen und den Text einzugeben.

Welche Einstellungs- und Eingabeoptionen ein Block hat, ergibt sich aus dem Design und wird vorab in Absprache festgelegt. Am Beispiel der Text-Bild-Komponente würde es Sinn machen, als weitere Einstellmöglichkeit noch die Ausrichtung, also Bild-Links-Text-Rechts oder Text-Links-Bild-Rechts, hinzuzufügen. Damit gibt es insgesamt drei Parameter (Text, Bild, Ausrichtung), welche die Nutzer des Systems beeinflussen können.

Ob oder inwiefern der Text sich formatieren lässt, wird auch bereits vorgegeben und es gibt in der Regel weniger Möglichkeiten. Sprich, es lässt sich beispielsweise nicht jede beliebige Text-Farbe auswählen. Diese Einschränkung wird getroffen, damit der Block unabhängig von den Kenntnissen der Benutzer und der eingegebenen Inhalte möglichst gut ins Gesamtbild passt und eine geringe Gefahr besteht, ein visuell nicht zusammenpassendes Gesamtbild zu erhalten.

Ähnlich wie beim visuellen Page-Builder ist auch bei diesem Ansatz ein gewisses Fachwissen und Gespür gefragt, was den Seitenaufbau angeht. Man muss wissen, welche Blöcke sich für die Darstellung welcher Inhalte eignen und diese gezielt platzieren. Das ist nicht für alle Anwender bzw. alle Seitentypen der optimale Weg.

Screenshot des Prismic-Editor der Website osterdach.de
Screenshot des Prismic-Editors der Website osterdach.de - ein Beispiel für einen block-basierten Ansatz der Content-Bearbeitung. Diese Website habe ich in 2019 erstellt.
Screenshot der Website von Mehlhorn und Vier
Screenshot des Editors der kommenden Website des Ingenieurbüros Mehlhorn und Vier. Die Seite habe ich mit Kirby erstellt und enthält neben dem Block-Editor auch eine integrierte Live-Vorschau.

Automatischer Seitenaufbau anhand strukturierter Inhalte

Alle bisher vorgestellten Möglichkeiten erlauben den mehr oder weniger direkten Eingriff der Nutzer auf die Struktur und den Aufbau einer Seite. Als letzte Alternative, die ich hier vorstellen möchte, gibt es die noch stärkere Einschränkung auf lediglich die Bereitstellung der Inhalte, nicht aber die Bearbeitung der visuellen Darstellung.

Dabei werden die erforderlichen Informationen strukturiert erhoben, vergleichbar mit einem Steckbrief. Wie diese Inhalte dann auf der Website dargestellt werden, liegt völlig in der Kontrolle des Webdesigns und der Programmierung. Dieser Ansatz hat diverse Vorteile und eignet sich vor allem für die Erstellung gleichartiger Seiten, etwa für Projekte, Pressemitteilungen oder Konzerte.

  • Bei der Eingabe der Inhalte muss kein Gedanke an die visuelle Darstellung aufgewendet werden. Das einzige Ziel ist das Ausfüllen aller Felder und Bereitstellung aller erforderlichen Informationen.

  • Gewisse Felder (etwa ein Cover-Bild oder ein Datum) können verpflichtend gemacht werden, wenn sie für die Darstellung essentiell sind oder die Seite sonst inhaltlich unvollständig ist.

  • Die Seite kann dynamisch reagieren und sich visuell anpassen aufgrund des Vorhandenseins oder Fehlens gewisser Informationen; beispielsweise wird nur eine Karte angezeigt, wenn auch ein Ort angegeben wird.

  • Der Designer und/oder Entwickler hat maximale Kontrolle über das Erscheinungsbild der Seite, da programmatisch alle Eventualitäten/Kombinationen abgedeckt werden können und nicht auf eine hochwertige Content-Pflege vertraut werden muss.

Dieses Konzept ist genau das Richtige, wenn eine Vielzahl gleichartig aufgebauter Seiten gewünscht ist, etwa in einem Projekt- oder Referenz-Liste oder auch in einem Onlineshop mit Produkten. Meiner Erfahrung nach ist diese Art der Bearbeitung auch für ideal und am angenehmsten für Laien, die zwar fachliche Experten in ihrem jeweiligen Gebiet sind, aber nicht für die Erstellung und den Aufbau von Websites.

Screenshot des Kirby-Panels mit struktuerierten Inhalten
Beispiel für die Bereitstellung strukturierter Daten für eine Projektseite im Kirby-Panel

Die Wahrheit liegt in der Mitte

Ich verwende bei meinen Projekten meistens die Ansätze der Blöcke und der strukturierten Inhalte gemeinsam und entscheide je nach Anwendungsfall und Zielgruppe, welche Lösung am meisten Sinn ergibt.

Während ich bei meiner eigenen Website mit Blöcken und flexiblen Layouts (eine weitere Ausbaustufe des beschrieben Block-Ansatzes) arbeite, setze ich beispielsweise bei der Vereinsseite des FSK Vollmarshausen größtenteils auf einen strukturierten Ansatz.

Meine Website-Projekte setze ich seit längerem mit dem Content-Management-System Kirby um; einige Vorteile des Systems beschreibe ich hier. Es erlaubt die freie Strukturierung der Inhalte und so eine reibungslose hybride Nutzung von strukturierten und nicht-strukturierten Inhalten.

So lassen sich etwa globale Informationen wie Kontaktdaten oder Niederlassungen an einer Stelle strukturiert pflegen, während im selben Projekt auch block-basierte Marketing- und SEO-Seiten vorhanden sind.

Meine Aufgabe als Webentwickler und Vertrauensperson für meine Kundinnen und Kunden ist es, die Anforderungen des Projektes genau zu verstehen und eine optimale Lösung für das Content-Management zu erarbeiten.

Screenshot von der Bearbeitung dieses Artikels
Screenshot von der Bearbeitung dieses Artikels im Rahmen meiner eigenen mit Kirby erstellten Website
Screenshot der Bearbeitung eines Artikels beim FSK Vollmarshausen
Screenshot der Bearbeitung eines Artikels beim FSK Vollmarshausen anhand strukturierter Felder
Screenshot eines Kirby Panels zur Pflege globaler Seitendaten
Beispiel für die Pflege globaler Seitendaten
Bitte gib dein Einverständnis

Um deinen Like zu speichern, benötigen wir deine Zustimmung zur Verwendung von Cookies.

Dadurch kann die Seite sich merken, dass dir der Artikel gefällt.

Es werden keine personenbezogenen Daten übertragen oder gespeichert. Deine Einwilligung wird für ein Jahr gespeichert.