Wenn Sie vor der Aufgabe stehen, eine Webseite zu realisieren, tauchen schnell Fragen auf wie: „Brauche ich einen Entwickler?“ oder „Reicht ein Website-Baukasten?“ An diesem Punkt lohnt es sich, einen Schritt zurückzutreten und die Grundlagen zu betrachten: Was macht eine Webseite eigentlich aus, und welche unterschiedlichen Arten von Webseiten gibt es? Diese Überlegungen helfen Ihnen, die passende Lösung und die richtigen Partner oder Tools für Ihre Webseite zu finden.

Heute geringe Kosten, morgen Skalierbarkeit? Automationen, Sprachen, eigenes Design? Die Anforderungen an Webseiten können sehr unterschiedlich sein, und manchmal ergeben sich im Geschäftsalltag auch über Nacht neue. Hinzu kommen die sich ständig ändernden Marktbedingungen, die neue Anforderungen, aber auch Chancen mit sich bringen.

Vor 20 Jahren, noch bevor Facebook zugänglich war, habe ich Webseiten in Photoshop entworfen, mit dem Slice-Tool zerteilt und als HTML und Bilder exportiert, um meine Fotos online mit meinem Netzwerk zu teilen. Heute publiziere ich weiterhin Fotos und Videos online, doch das Slice-Tool ist Geschichte. Vor etwa 10 Jahren, bei der Gründung meiner ersten Firma, wurden die Anforderungen an meine Arbeit plötzlich exponentiell komplexer. Etwas später hatte ich einen zweiseitigen Marktplatz mit einer eigens programmierten Software-Applikation, verwaltete unzählige Kanban-Tickets für Entwickler im Task-Management-Tool und arbeitete 70-Stunden-Wochen. Zwischendurch schickte ich CSS-Änderungen per Git-Commands auf Branches. Es war eine steile Lernkurve. 2018 kam der Durchbruch von Figma und Webflow und Flexibilität und Effizienz änderten sich maßgeblich.

Was ist eigentlich eine Webseite?

Eine Webseite ist im Kern vor allem eines: Code! Dieser Code bildet die unsichtbare Grundlage, die dafür sorgt, dass alle Inhalte richtig angezeigt werden und funktionieren. Und genau hier liegt oft die erste Herausforderung: Während wir leicht beurteilen können, ob eine Seite optisch korrekt dargestellt wird und die Elemente funktionieren, bleibt der zugrunde liegende Code für viele von uns unsichtbar und schwer verständlich. Diese Unkenntnis kann zu Fehlentscheidungen führen. Im weiteren Artikel werde ich diese technische Basis mit einbeziehen.

Was ist eine individuell programmierte Webseite?

Eine individuell programmierte Webseite wird von Entwicklern komplett nach den Wünschen des Kunden erstellt. Im Gegensatz zu einem Website-Builder, wo ein Account reicht, muss hier eine technische Umgebung mit Servern und Datenbanken eingerichtet werden. Änderungen an Inhalten wie Texten oder Bildern erfordern oft technisches Wissen, da sie ohne ein Verwaltungssystem (CMS) direkt im Code vorgenommen werden müssen. Zudem können regelmäßige Updates und Wartungsarbeiten zeitaufwendig sein.

Was ist ein Webseiten-Baukasten?

Ein Webseiten-Baukasten oder No-Code-Website-Builder bietet dir die Möglichkeit, Webseiten ohne Programmierkenntnisse zu erstellen. Dies geschieht in der Regel durch vorgefertigte Elemente, die Sie per Drag-and-Drop in einen visuellen Editor einfügst. Dabei wird der Code im Hintergrund erzeugt, ohne dass Sie diesen selbst sehen oder bearbeiten musst. Um dies zu ermöglichen, vereinfacht der Baukasten in der Regel die Komplexität des Codes, indem er die visuellen Elemente in eine grundlegende und vereinfachte Version von HTML und CSS übersetzt. Das hat einerseits den Vorteil, dass Sie als Nutzer die technische Basis nicht verstehen müssen, kann aber den Nachteil haben, dass die Flexibilität eingeschränkt ist. Besonders bei individuellen Anforderungen oder komplexeren Funktionen stoßen viele Baukästen an ihre Grenzen. 

Gibt es eine Zwischenlösung aus Baukasten und individueller Programmierung?

Ja, genau hier setzt das Konzept der “Website Experience Platform” (WXP) an, ein Begriff, den Webflow aktuell etabliert. Eine WXP verbindet die Einfachheit und Zugänglichkeit eines klassischen Baukastens mit der Flexibilität und den erweiterten Möglichkeiten, die normalerweise nur durch individuelle Programmierung erreicht werden können. Ergänzend kann sie durch weitere No-Code- und Low-Code-Tools sowie Webflow-Apps erweitert werden.

Je nach Anforderung können Nutzer Webflow in verschiedenen Ansichten nutzen:

Der Webflow Designer im Design-Mode

Designer und Entwickler mit grundlegenden Kenntnissen in HTML und CSS können hier ohne Einschränkungen visuell programmieren. Auf der linken Seite befindet sich der sogenannte Navigator, der alle HTML-Elemente der Seite in einer hierarchischen Liste darstellt, wie zum Beispiel Divs, Sections, Bilder oder Links. Jedes dieser Elemente wird 1:1 in die entsprechenden HTML-Tags übersetzt. Das bedeutet, dass ein Div im Code als <div></div> erscheint, eine Section als <section></section> und ein Bild als <img />. Auch die Verschachtelung von Elementen sowie die Semantik und andere essenzielle HTML-Konzepte werden originalgetreu umgesetzt, was es ermöglicht, Webseiten nach technischen und professionellen Standards aufzubauen.

Klickt man auf ein Element, öffnet sich auf der rechten Seite das Stil-Panel, in dem alle visuellen Eigenschaften der Seite bearbeitet werden können. Webflow bietet hier eine direkte Abbildung der CSS-Programmiersprache an – keine vereinfachte oder abstrahierte Version wie bei klassischen Website-Baukästen. Änderungen wie das Anpassen von Abständen mittels „Margin“ oder „Padding“ werden unmittelbar in sauberes, standardkonformes CSS übersetzt. Dies geschieht effizient und mit sofortiger visueller Vorschau, sodass jeder Schritt nachvollziehbar bleibt. Sollte man dennoch an Grenzen der visuellen Programmierung stoßen, bietet Webflow die Möglichkeit, jederzeit benutzerdefinierten Code („Custom Code“) einzufügen und die volle Flexibilität der Programmierung zu nutzen.

Der Webflow Designer im Edit-Mode

Im Edit-Mode konzentriert sich Webflow auf die Bearbeitung von Inhalten durch Content Manager oder andere Benutzer, die keine technischen Kenntnisse benötigen. Dieser Modus ist besonders für Texter, Redakteure oder Marketing-Mitarbeiter geeignet, die Inhalte wie Texte, Bilder oder Links direkt auf der Webseite bearbeiten können.

Ein Beispiel: Klickt ein Benutzer im Edit-Mode auf eine Textzeile, kann diese direkt bearbeitet und gespeichert werden. Änderungen werden in Echtzeit übernommen, ohne dass die zugrunde liegende Struktur der Seite gefährdet wird. Für größere Projekte mit dynamischen Inhalten, wie Blogs oder Produktdatenbanken, bietet Webflow zudem die Möglichkeit, Inhalte direkt aus dem CMS (Content Management System) zu verwalten. Das CMS ist nahtlos in den Edit-Mode integriert und ermöglicht es Nutzern, dynamische Inhalte zu bearbeiten oder hinzuzufügen, ohne die Design-Elemente der Webseite zu beeinflussen.

Im Edit-Mode können zudem neue Seiten aus Templates oder Komponenten erstellt werden, die zuvor im Design-Mode vorbereitet wurden. Dies entspricht dann wieder mehr der vereinfachten Bearbeitung eines Webseiten-Baukastens, nur dass die Komponenten programmatisch gezielter und mit weniger Einschränkungen erstellt wurden. Und vor allem, dass Sie durch zusätzliche Möglichkeiten später besser skalieren können. Und noch ein Tipp: Sollten Sie keinen Webflow-Entwickler haben oder die Kosten einsparen wollen, können Sie auch erst einmal mit einem Webflow-Template starten und später einen Webflow-Entwickler hinzuziehen, wenn die Seite beispielsweise um ein Jobboard oder einen Online-Shop erweitert werden soll. 

Was bedeutet das jetzt für die Praxis: Individuelle Programmierung, Baukasten oder Website-Experience-Plattform?

Einen Website-Baukasten empfehle ich, wenn Sie genau wissen, dass Sie lediglich eine einfache und schnell umsetzbare Webseite benötigen. Es ist jedoch wichtig, sich bewusst zu sein, dass Baukästen in Bezug auf Funktionen und Skalierbarkeit oft stark eingeschränkt sind, weshalb sie für Projekte, deren Anforderungen später wachsen könnten, weniger geeignet sind.

Die Website-Experience-Plattform Webflow mag zu Beginn ein wenig anspruchsvoller sein als ein einfacher Website-Baukasten, selbst wenn Sie mit Webflow-Templates arbeiten. Dieser initiale Mehraufwand zahlt sich jedoch durch die zusätzlichen Möglichkeiten aus, wie etwa die einfache Übersetzung der gesamten Webseite in mehrere Sprachen, SEO-Optionen, die Umsetzung individueller Designs auch im Detail, oder die mögliche Skalierung für wachsende Anforderungen.

Individuelle Programmierung empfehle ich, wenn spezifische Funktionen oder komplexe Anforderungen vorliegen, die mit einer Website-Experience-Plattform nicht mehr realisierbar sind. Das könnte beispielsweise schwierig werden, wenn ein zweiseitiger Marktplatz erforderlich ist, bei dem sowohl Kunden als auch Lieferanten individuelle Logins mit spezifischen Workflows und Schnittstellen benötigen. Die Möglichkeit, Backend und Datenbanken individuell zu konfigurieren, bietet zudem Vorteile für zukünftige Skalierung. Dem stehen jedoch hohe Entwicklungskosten und ein erhöhter Aufwand bei der Einrichtung und Wartung gegenüber.

Beispiel: Mein persönlicher Workflow

Meine Reise ging also vom Photoshop Slide-Tool über die komplexe, individuelle Programmierung eines zweiseitigen Marktplatzes bis hin zu Webflow, was ich heute sowohl für diese Webseite als auch für Kunden von Kataloop nutze. 

Die Fotos und Videos in der Stock-Sammlung exportiere ich in meinem Fall automatisiert direkt aus Photoshop. Die zugehörigen Daten werden in der benutzerfreundlichen Datenbank-Alternative Airtable gespeichert, während die Dateien selbst in der Google Cloud Storage landen. Parallel dazu werden automatisch und zweisprachig Metadaten generiert. Nach einer abschließenden Prüfung wird alles ins Webflow-CMS übertragen, wodurch ich auf meiner individuell gestalteten und programmierten Webseite Lizenzen verkaufen kann. Das ermöglicht mir maximale Flexibilität und Effizienz bei der Umsetzung eines technisch anspruchsvollen Prozesses.

‍

Fazit: Ich bin begeistert von der Effizienz, die Webflow seinen Nutzern bietet, und empfehle jedem, die Möglichkeiten der Website-Experience-Plattform Webflow in Kombination mit No-Code-Tools oder Low-Code-Tools für die eigene Geschäftsidee zu prüfen.