Allgemein: Pagebuilder

Pagebuilder sind Tools, die es ermöglichen, Webseiten ohne tiefgehende Programmierkenntnisse in HTML oder CSS zu erstellen. Somit können Personen mithilfe von Pagebuildern Webseiten erstellen, die bislang keine Erfahrungen in der Website Programmierung haben. Im betrieblichen Kontext bedeutet dies beispielsweise, dass auch Angestellte im Bereich Marketing, Management oder Design, Websites erstellen oder bearbeiten können.

Je nach Tool sind allerdings die Gestaltungsmöglichkeiten mitunter stark eingeschränkt, da auf Templates und vorgegebene Komponenten zurückgegriffen werden muss. Auch ist es teilweise unmöglich mithilfe von Pagebuildern komplexe Funktionalitäten (Bezahlvorgänge, Content Mangement, Login-Funktionen, …) in Webseiten zu integrieren.

Webflow: Überblick

Webflow existiert bereits seit über 10 Jahren und hat sich als SaaS (Software as a Service) im Bereich der Website-Pagebuilder etabliert. Nutzer können mit dem Cloud-basierten Tool Webseiten entwerfen und direkt über Webflow hosten.

Im Gegensatz zu namenhaften Konkurrenten wie „Wix“, „Squarespace“ oder „Jimdo“ ist Webflow eher für fortgeschrittene Anwender geeignet. Um Webflows Möglichkeiten komplett auszuschöpfen, sollte ein grundlegendes Verständnis von Webprogrammierung vorhanden sein. Anders als bei einfacheren Tools, arbeitet man in Webflow direkt mit den HTML-Elementen und passt deren Optik über CSS Attribute an. Man sollte also die prinzipielle Funktionsweise von HTML-Elementen kennen und wissen, welche CSS Attribute deren Gestaltung auf welche Weise beeinflussen.

Die Erstellung einer aufwändigen Webseite von Grund auf, eignet sich in Webflow somit nicht für Laien der Website-Programmierung. Einfache Seiten können jedoch anhand von Templates und vorab erstellten Komponenten erstellt werden, ohne ein tiefgehendes Verständnis der dahinterliegenden Technologie zu haben (dazu mehr unter Ressourcen & Community).

Anders als bei einfacheren Pagebuilder Tools werden fortgeschrittene Webdesigner & -entwickler durch die Möglichkeiten von Webflow nicht ausgebremst. Es besteht die Möglichkeit eigenen HTML, CSS und JS Code in der Seite zu integrieren und bestehende Elemente über den visuellen Editor präzise auf CSS-basis anzupassen. Dazu kommen zahlreiche Funktionen, mit denen einfache Seiten mit einem Content Mangement Systemt (CMS) oder einer Online-Shop Funktionalität erweitert werden können.

Funktionsumfang

Im folgenden werden verschiedene Funktionen von Webflow beschrieben. Zu Beginn wird auf die beiden Oberflächen der Website-Bearbeitung (Designer und Editor) eingegangen. Im Anschluss wird die Hosting-Funktion erläutert, die es ermöglicht, die erstellte Webseite über einen Webserver abzurufen. Die darauf folgenden Funktionen (CMS, E-Commerce, Memberships und Logikautomatisierung) stellen Erweiterungen dar, mit denen komplexere Webseiten erstellt werden können.

Designer

Der Webflow Designer ist die Oberfläche, in der Webseiten mit visuellen Werkzeugen erstellt werden können. Vorgegebene HTML-Elemente (wie bspw. Texte, Überschriften, Links, Bilder, Schaltflächen und Formulare) können per Drag & Drop in die zu erstellende Seite gezogen werden. Die Elemente können hierarchisch angelegt und in verschiedenen Ansichten (Desktop, Tablet, Mobil) betrachtet werden. Nach dem Platzieren der Elemente können diese anhand von CSS-Attributen angepasst werden. Im Designer ist es ebenfalls möglich, CMS-Elemente (siehe CMS Integration), Online-Shop Produkte (siehe E-Commerce) oder eigenen JavaScript-, CSS- oder HTML-Code einzupflegen.

Editor

Webflow bietet über den Webflow Editor eine Möglichkeit an, bestehende Webflow Projekte direkt auf der Live-Seite der jeweiligen Webseite zu bearbeiten. Hierbei kommt ein WYSIWYG (What You See Is What You Get) Prinzip zum Einsatz, bei dem die Elemente der Webseite bearbeitet oder ausgetauscht werden können. Hierbei können lediglich bestehende Elemente redaktionell (Texte, Bilder, Videos) ausgetauscht, sowie CMS-Elemente angelegt, bearbeitet und gelöscht werden.

Hosting

Eine Webflow Webseite kann direkt über Webflow gehostet werden. Standardmäßig ist das Projekt dann unter einer Subdomain von “webflow.io” erreichbar. Durch eine einfache Verbindung zu Domainregistraren kann die Webseite auch unter einer eigenen Domain verfügbar gemacht werden.

Ab einer Preiskategorie lässt sich auch der HTML-, CSS- und JS-Code der Webflow Webseite exportieren, wodurch ein externes Hosting der Webflow Seite möglich ist. Beim Code-Export werden allerdings nur statische Elemente exportiert. Elemente, die beispielsweise per CMS oder E-Commerce Funktion angelegt wurden, werden nicht mit exportiert und gehen verloren.

CMS Integration

Mit der CMS (Content Management System) -Funktion von Webflow kann man Daten, die man in der Webseite verwenden möchte, in einer zentralen Datenbank verwalten. Diese Daten können dann im Designer in Form von Platzhaltern eingesetzt und visuell angepasst werden. Dies ist vor allem nützlich für Inhalte, die mehrfach auf Unterseiten der Website vorkommen und hiermit zentral bearbeitet werden können.

In den sog. Collections, kann definiert werden, welche Form die gespeicherten Daten annehmen (bspw. Text, Bilder, Videos, Wahrheitswerte, Datumsangaben, etc.). Innerhalb der Collection können dann Einträge angelegt werden, die jeweils die festgelegten Datentypen der Collection enthalten.

Für jede Collection kann eingestellt werden, dass jeder Eintrag eine eigne Unterseite erhält. Mit diesem Prinzip lassen sich beispielsweise Blogs oder Portolio Webseiten erstellen, bei denen automatisch eine Unterseite für jeden neuen CMS-Eintrag erstellt wird.

E-Commerce

Mit der E-Commerce Funktion kann innerhalb von Webflow ein Online-Shop erstellt werden. Dafür stehen zahlreiche vorgefertigte Elemente zur Verfügung, mit denen sich bspw. die Produktvorschau, der Bezahlvorgang und die Warenkorbverwaltung implementieren lassen.

Memberships (Beta)

Mit dem Memberships Feature kann man Mitgliedschaften für die Webseite erstellen und verwalten. Über ein Login-Portal können sich Mitglieder anmelden, um Zugriff auf spezielle Seiten zu erhalten, die dem Gast Nutzer verwehrt sind.

Durch die Kombination von Membership und E-Commerce Funktionen lassen sich hierdurch beispielsweise Paywalls einstellen, womit nur Nutzer den Zugriff auf Inhalte haben, für die sie bezahlt haben.

Logikautomatisierung (Beta)

Mit dem Feature namens „Logic“ können Automationen innerhalb von Webflow erstellt werden. Logic Automationen bestehen aus drei Schritten: Trigger, Bedingungen und Aktionen.

Trigger stoßen Automationen an, und können von abgesendeten Webflow-Formularen oder externen Webhooks ausgelöst werden. Als Webhooks werden Zugriffe auf Schnittstellen (APIs) anderer webbasierten Systeme bezeichnet.

Bedingungen werden verwendet, um auf der Grundlage der Daten (des Formulars oder Webhooks) Unterscheidungen durchzuführen.

Aktionen werden ausgeführt, sobald die entsprechenden Bedingungen zutreffen. Hierbei können beispielsweise Benachrichtigungen gesendet, Berichte erzeugt oder die Daten weiterverarbeitet werden.

Ressourcen & Community

Um mit Webflow komplexe Webseiten und beeindruckende Designs erstellen zu können, muss der Anwender sich entweder bereits gut mit dem System auskennen, oder auf Ressourcen (bspw. aus dem Webflow Marketplace) und Hilfe aus der Webflow Community zurückgreifen. Webflow hat bereits zahlreiche Anhänger, die ihre Arbeit und Erfahrungen (meist) kostenfrei mit der Community teilen.

„Made with Webflow“ Clonables

Ein Beispiel für den Austausch von Projekten innerhalb der Community ist hierbei die Plattform „Made with Webflow“, welche auf der Webflow Homepage zu finden ist. Hier stellen Webdesigner ihre Webflow Projekte vor. Neben einer Beschreibung und Screenshots ist auch die Webseite direkt aufrufbar und benutzbar.

Ein großer Teil der Webseiten sind als sogenannte „Clonables“ kostenfrei in den eigenen Webflow Arbeitsbereich duplizierbar. Hierdurch kann sich zum einen angesehen werden, wie das Projekt in Webflow umgesetzt wurde (z.B. welche Struktur aufgebaut wurde und wie diese gestaltet wurde) und andererseits können einzelne Komponenten des Projekts in eigene Webflow Seiten kopiert werden.

Clonables tragen dazu bei, zu verstehen, wie bestimmte Webseiten-Features in Webflow konzipiert werden und können als Ausgangspunkt für eigene Designs dienen.

Templates

Webflow bietet neben den Clonables auch einen Marktplatz für Templates an. Auf diesem können hochqualitative Webdesigns von professionellen Agenturen oder Webflow selbst erworben werden. Während vereinzelte einfache Templates kostenfrei verwendet werden können, kosten die allermeisten Templates aktuell zwischen $30 USD und $150 USD.

Templates eignen sich ideal für Laien oder Anfänger der Website-Entwicklung, da ohne spezielle Vorkenntnisse Webseiten erstellt werden können.

Libraries (Beta)

Neben den Clonables und Templates werden auf dem Webflow Marketplace auch Librarys (Bibliotheken) angeboten. Diese können in ein Webflow Projekt integriert werden und enthalten einzelne, anpassbare Website-Komponenten (Hero Banner, CTA Buttons, Spezielle Layouts).

Integrationen (Webflow Apps)

Seit kurzem bietet Webflow auf ihrem Marketplace auch sogenannte Webflow Apps an, die über eine API Schnittstelle die Funktionalität der Webseite erweitern können. Webflow kuratiert hierbei anhand bestimmter Standards die Apps, wodurch nur hochqualitative Anwendungen Zugriff auf die Webflow API erhalten sollen.

Mit Webflow Apps können beispielsweise Webflows CMS-Einträge mit externen Datenbanken synchronisiert oder zeitgesteuert veröffentlicht werden (z.B. mit Story Chief oder Whalesync). Andere Apps erlauben tiefgreifendere E-Commerce Funktionalitäten, wie die Anbindung von CRM (Customer-Relationship-Management) – Systemen oder Cross-Selling-Systemen (z.B. mit Monto oder Upsells). Auch Analysetools sind per Webflow App in eine Webseite integrierbar (z.B. mit Audienceful oder Nocodelytics).

Ablauf einer Website-Erstellung

Anhand des folgenden BPMN (Business Process Model and Notation) Diagramms soll beispielhaft der Prozess einer Website-Erstellung mit Webflow dargestellt werden. Dabei soll als fiktives Beispiel eine Marketing One-Page Website (Webseite ohne Unterseiten) für ein neues Produkt erstellt werden. Für diesen Prozess sind drei Personen aus unterschiedlichen Bereichen eines Unternehmens beteiligt:

Projektmanager: In unserem Beispiel startet der Prozess, in dem ein Projektmanager sich für die Verwendung von Webflow entscheidet. Nun muss dieser sowohl ein Site-Plan als auch ein Workspace-Plan auswählen. Die verschiedenen Pläne unterscheiden sich maßgeblich im Umfang der enthaltenen Funktionen, der Skalierung und dem Preis. Da nur eine einfache One-Page Webseite ohne Unterseiten oder Online-Shop erstellt werden soll, genügt es, einen „Basic Plan“ als Site-Plan zu wählen. Da eine parallele Bearbeitung der Seite vorerst nicht gewünscht wird, wird sich beim Workspace-Plan für den Starter Plan entschieden. Nach dem Entscheidungsprozess muss ein Account mit zugehörigem Login erstellt werden und darüber die gewählten Pläne gebucht werden. Die weitere Arbeit der Website-Erstellung übernehmen nun spezialisierte Web-Designer und Marketing-Spezialisten. Anschließend kann der Projektmanager die Website veröffentlichen, indem die firmeneigene Domain angebunden wird.

Web-Designer: Nachdem der Web-Designer Zugriff auf das Interface von Webflow erhalten hat, kann er beginnen, das Layout und Design der Website im Webflow Designer zu erstellen. Je nach Anforderungen und Know-How kann der Designer entweder mit einer blanken Seite starten, oder auf Basis eines Templates, Clonables oder einer Library die Webseite entwerfen.

Marketing-Spezialist: Nachdem die Webseite vom Web-Designer fertig erstellt wurde, kann ein Marketing-Spezialist das Wording von Texten oder Bilder redaktionell im Webflow Editor austauschen. Hierfür ist keine Erfahrung in der Website-Programmierung erforderlich.

Nachteile von Webflow

Trügerische Einfachheit

Der visuelle Editor von Webflow erscheint zunächst leicht zu bedienen und schnell lässt sich ein Design anlegen. Fehlt jedoch das nötige Verständnis der HTML Elemente und CSS Layout Systeme (Flexbox, Grid, Float, etc.) so bekommt man spätestens beim Versuch, die Webseite responsive (für Mobilgeräte optimiert) anzulegen große Probleme. Dem kann teilweise durch die Verwendung von Clonables, Librarys und Templates entgegengewirkt werden. Doch auch hierbei sollte ein Grundverständnis für Webentwicklung vorhanden sein, da man sonst Gefahr läuft, fahrlässig im Umgang mit sensible Nutzerdaten oder dem allgemeinen Datenschutz zu handeln.

Datenschutz

Webflow wird in den USA entwickelt und die Projekte werden auch dort gehostet. Besonders, wenn auf einer mit Webflow erstellten Seite Nutzerdaten gespeichert werden, sollte genau geklärt werden, dass dies im Einklang mit der DSGVO geschieht. Allgemein sollte darauf geachtet werden, dass in der Datenschutzerklärung einer Seite, die mit Webflow erstellt wurde, der Webseitenbesucher auf die Technologie und das Hosting in der USA hingewiesen wird.

Hosting

Wie bereits beschrieben, ist das Exportieren des Website-Codes aus Webflow heraus nur bedingt möglich. Sobald CMS oder E-Commerce Elemente auf der Webseite verwendet wurden, gehen diese Daten beim Export verloren. Somit ist man meist auf das von Webflow angebotene Hosting Paket angewiesen, was sich auf Dauer teurer als vergleichbare Hosting Services erweisen kann.

Trennung der Entwicklungsumgebung

In der professionellen Webentwicklung wird darauf geachtet, dass die öffentlich zugängliche Website immer in einem perfekten Zustand ist. Das bedeutet, dass es für die Entwicklung und das Testen von neuen Features oder Änderungen separate Systeme gibt, welche nicht öffentlich zugänglich sind. Konkret erfolgt dies durch “Branching” in git, sowie die Trennung von “Staging”- und “Live”-Websiten. Sobald ein Feature in einem Entwicklungs-Branch ausreichend getestet ist, wird der Code in den primären Branch überführt und die Live-Website dementsprechend aktualisiert. Webflow bietet kein vergleichbares Konzept. Hier kann nur an der Live-Seite gearbeitet werden.

Alternativen

Eine Auswahl alternativer Systeme sind hier aufgelistet. All diese Systeme fallen (teilweise mit Pugins; vorallem bei WordPress) in die Kategorie der Pagebuilder:

• WIX
• Elementor
• Squarespace
• WordPress
• Weebly
• Jimdo

Quellen

• https://webflow.com (mit allen Unterseiten)
• https://www.webflow-lernen.de/lp/das-webflow-cms-ein-umfangreicher-einblick-in-die-funktionen
• https://raidboxes.io/blog/webdesign-development/wordpress-pagebuilder-nachteile