Über uns | Kontakt

info@experte.de

Homepage-Baukästen im Test: Webflow

  Martin Gschwentner   11. Dez. 2019

Die "Code-Barriere brechen" - so lautet die Mission des innovativen Homepage-Baukastens Webflow. Mit intuitiven Tools und vorgefertigten Schablonen vereinfacht er die Erstellung und Verwaltung professioneller Websites. Ähnliche Versprechen machen alle anderen Website-Builder auch - was Webflow so besonders macht, verrät unser Test.

Was ist Webflow?

Webflow ist ein einzigartiger Hybrid aus Homepage-Baukasten und CMS. Anders als herkömmliche Website-Builder reduziert der Dienst Webdesign nicht auf den kleinsten gemeinsamen Nenner, sondern verlangt seinen Nutzern ein gewisses Verständnis für Programmier-Vorgänge ab. Nutzer, für die CSS und HTML keine Fremdsprachen sind (und all jene, die zum Lernen bereit sind) können mit dem vielseitigen Werkzeugkasten für Fortgeschrittene dynamische Websites erstellen, designen und verwalten, wobei visuelle Tools mühsame Coding-Arbeit abnehmen.

Testbericht

Features
Note 1,0
Kundensupport
Note 1,3
Templates & Design
Note 1,3
Marketing, SEO & E-Commerce
Note 1,7
Einrichtung und Bedienkomfort
Note 2,0

Pro & Contra

Mischung aus CMS und Website-Baukasten

beinahe unendliche Möglichkeiten

großartige Lernplattform "Webflow University"

einfache E-Commerce-Integration

Design- und Programmier-Vorkenntnisse notwendig

steile Lernkurve

nur auf Englisch verfügbar

Einrichtung und Bedienkomfort

Die ersten Minuten bei Webflow stehen unter dem Motto "Sign up - Set up - build". Nach der blitzschnellen Registrierung müssen Sie also zunächst ein paar Fragen zu Ihrer Erfahrung und dem Ziel Ihrer Website beantworten. Dann haben Sie die Wahl, ein von Webflow vorgeschlagenes Template auszuwählen, ein Tutorial zu absolvieren oder mit einem anderen Template - oder ganz ohne - loszulegen.

Sie haben es wahrscheinlich schon bemerkt: Webflow fordert Ihnen zwar nicht explizit Programmiersprachen ab, kommuniziert dafür bisher nur auf Englisch.

Bereits im ansprechenden Tutorial von Webflow wird klar, dass Sie mit dem Website-Builder zwar das Coding umgehen, den komplexen Zusammenhängen des Programmierens aber dennoch nicht ganz entkommen. Auch im Baukasten müssen Sie sich mit dem "Box-Modell" auseinandersetzen, das beim Website-Design eine wichtige Rolle spielt: Jedes Element in Webflow sitzt in einer Box. Die Website, die am Ende herausspringt, ist also eine Ansammlung verschiedener Boxen, die auf- und ineinander gestapelt sind.

Visualisiertes Programmieren

Statt diese Boxen mit Code zu verwalten, erlaubt Ihnen Webflow, per Drag and Drop zum gleichen Ergebnis zu kommen. Schnell wird klar, dass Webflow weitaus komplexer als vergleichbare Homepage-Baukästen ist. Mit einer Benutzerfläche, die an Photoshop erinnert, programmieren Sie sozusagen visuell auf der Frontpage-Leinwand, während das Programm Ihre Pinselstriche im Backend automatisch in Code verwandelt. Prinzipiell trifft das auch auf andere Website-Builder zu, doch Webflow bleibt wesentlich näher an der Philosophie des Programmierens.

Die Lernkurve bei Webflow ist also wesentlich steiler als bei Programmen wie Wix oder Squarespace. Wennn Ihnen das Box-Modell, Hierarchien, Floating und andere Grundkonzepte des Web-Designs kein Begriff sind, wird Sie das Programm besonders anfangs stark herausfordern. Das kurze Tutorial zu Beginn geht zudem nur auf die absoluten Grundlagen ein. In der hauseigenen Lernplattform gibt es dafür zahlreiche Video-Kurse, die die komplexeren Features von Webflow erklären.

Webflow ist als Hybrid-Tool also weitaus komplexer als herkömmliche Website-Baukästen und für Anfänger nicht wirklich geeignet. Wer etwas Verständnis für Webdesign mitbringt, oder bereit ist, Zeit ins Lernen zu investieren, erhält dafür ein mächtiges Tool zur Website-Gestaltung, das im Vergleich zu anderen Baukästen kaum Einschränkungen mit sich bringt.

Note: 2,0

Features

Webflow ist Webhoster, CMS und Homepage-Baukasten in einem, wobei das Baukasten-Element mit seiner innovativen Visualisierung komplexer Coding-Prozesse das Herzstück der Software ist. Sehen wir uns die Teilbereiche des mächtigen Website-Builders einmal genauer an.

Webflow Designer

Die erste Spritztour durch den Designer erinnert an Anfangsversuche mit Photoshop oder Premiere: Der ganze Bildschirm steckt voller Funktionen, die sicherlich allesamt wichtige Antworten liefern - auf Fragen, die man noch gar nicht kennt. Bei Webflow können Sie nicht, wie bei anderen Programmen, einfach loslegen, und ohne Plan und Kontext via Drag & Drop Elemente auf die Oberfläche ziehen. Die Programmier-Logik, in der jedes Element seinen Platz im HTML oder CSS-Code finden muss, greift auch im Baukasten.

Auf alle Funktionen des Editors einzugehen, würde ein ganzes Buch füllen. Deshalb widmen wir uns im Folgenden nur auf ein paar Grundlagen. In der Bedienleiste ganz links können Sie mit einem Klick aufs "Plus" neue Elemente hinzufügen. Natürlich gibt es auch bei Webflow viele vorgefertigte Content-Blöcke, Buttons, Formulare und mehr.

Den Stil und das Layout Ihrer Elemente können Sie im Style-Panel auf der rechten Bildschirmseite bearbeiten. Im Navigator-Panel können Sie Ihre Elemente auf dem Bildschirm per Drag and Drop anrichten. An der Oberseite der Benutzeroberfläche können Sie mit einem Klick auf die Geräte-Icons überprüfen, wie Ihr Design auf unterschiedlichen Oberflächen zur Geltung kommt. Zur Vorschau Ihrer Seite gelangen Sie mit einem Klick auf das Augen-Symbol oben links.

Insgesamt ist der Webflow-Designer ein Homepage-Baukasten für Programmierer und jene, die es werden möchten: Er automatisiert bestimmte Coding-Vorgänge und macht es durch seine Visualisierungs-Tools einfacher, ansprechende Websites mit sauberem Code zu erstellen. Nutzer ohne CSS- oder HTML-Erfahrung werden allerdings am Potenzial des Editors nur kratzen können und sind mit anderen Lösungen besser bedient.

Webflow CMS

Webflow ist nicht nur ein Homepage-Baukasten, sondern auch ein vollwertiges Content Management System (CMS) wie Drupal oder WordPress. Gerade Letzterem hat Webflow den Kampf angesagt: Der eigene Service sei eine Alternative, die noch vielseitiger ist als der Marktführer, weil sie klassisches Content Management mit innovativen Visualisierungs-Tools kombiniert.

Im Webflow CMS erstellen Sie "Collections" unterschiedlicher Content-Typen, die jeweils aus verschiedenen Feldern bestehen. So können Sie also beispielsweise eine "Blog-Collection" anlegen, die Sie mit einer Überschrift und Permalinks versehen, und danach mit Inhalt füllen.

Oder Sie erstellen eine "Autoren-Collection" für Ihre Teammitglieder, mit Feldern für Fotos, Kurzbios oder Links zu Social Media-Profilen. Ihre Collections können Sie dann miteinander verbinden, etwa um Blogbeiträge Ihren Autoren zuzuordnen.

Webflow Editor

Wenn Sie in bestehende "Collections" Ihrer veröffentlichten Websites neue Inhalte hinzufügen oder Content auf statischen Seiten bearbeiten möchten, können Sie dafür den Webflow-Editor verwenden.

So bringen Sie dynamische Inhalte auf statische Websites und erleichtern es auch Mitwirkenden, beispielsweise neue Artikel live zu schalten.

Das Zusammenspiel aus Webdesign und Content Management macht Webflow zu einem weitaus mächtigeren Tool als die meisten Homepage-Baukästen dieser Testreihe. Seiner Zielgruppe ermöglicht der leistungsstarke Hybrid-Service, im Handumdrehen und in Eigenregie dynamische Websites mit zahlreichen Features zu erstellen, die ohne die Assistenz-Tools eine Mammutaufgabe wären.

Note: 1,0

Templates & Design

Webflow stellt Nutzern Hunderte Templates zur Verfügung, von denen etwa 30 völlig kostenlos sind. Die Kosten für Premium-Templates variieren stark - zwischen 19 und 149 USD. Es gibt Schablonen für alle möglichen Website-Typen: Portfolios, Blogs, Events, Dienstleistungen und mehr. Je nach Art der Seite sind Features wie dynamische Seiten mit CMS oder Shops, in die Sie nur noch Produkte einfügen müssen, bereits voreingestellt.

Die Wahl eines Templates bindet Sie aber nicht an einen Look, der wie bei anderen Homepage-Baukästen manchmal alles gleich aussehen lässt. Webflow-Templates sind auf Flexibilität ausgelegt und geben Ihnen oft bereits zu Beginn die Wahl zwischen verschiedenen Layouts.

Im Template selbst können Sie im Designer dann so gut wie alle Elemente der vorgefertigten Website bearbeiten: Farbe, Hintergrund, Effekte, Positionen, Schriftgröße, etc. Anders als bei anderen Baukästen benötigen Sie allerdings ein gewisses Auge für Design, denn im komplexen Editor fällt die Flexibilität nicht der Einfachheit zum Opfer.

Wieder gilt: Wer Talent für Webdesign und ein Verständnis für die Grundlagen des Programmierens bereits mitbringt, bekommt von Webflow seiner Kreativität kaum Grenzen gesetzt.

Note: 1,3

Marketing, SEO & E-Commerce

Ein weiteres Flaggschiff von Webflow ist die E-Commerce-Seite des Hybrid-Dienstes. Wenn Sie Ihrer Website einen Online-Shop hinzufügen, erstellt das CMS automatisch neue Collections für Produkte und Kategorien.

Im Produktmenü können Sie mit wenigen Klicks neue Elemente hinzufügen, die Sie Ihren manuell erstellten Kategorien zuweisen können. Weitere Felder gibt es für Produktbilder, Maße, Steuerangaben, Bestandsverfolgung und mehr.

Eine Art Tutorial führt Sie zudem Schritt für Schritt zum fertigen Online-Shop. Webflow erklärt Ihnen, welche Angaben Sie machen und welche Elemente Sie hinzufügen müssen, um einen voll funktionsfähigen Shop zu erhalten.

Von Produkten und Kategorien bis zu benutzerdefinierten Einkaufswägen und Checkout-Optionen: Webflow ermöglicht seinen Nutzern ein Ausmaß der Kontrolle, das in anderen CMS-Systemen mit entsprechenden Shop-Erweiterungen weitaus mehr Arbeit erfordert.

Bei den Zahlungsmöglichkeiten ist das Programm aber bisher sparsam: Bisher werden nur Stripe und PayPal unterstützt.

Insgesamt erfindet Webflow das Rad nicht neu, doch die bequeme Einbindung in den eigenen Hybrid-Service macht die Erstellung eines vollwertigen Shop-Systems ist im Vergleich zu anderen Baukästen vielfältiger, im Vergleich zu anderen CMS weniger aufwendig.

SEO-Funktionen sind bei Webflow direkt in den Editor gebaut, sodass keine externen Plugins benötigt werden. Dort können Sie zum Beispiel Metatitel und Beschreibungen ganz einfach festlegen.

Auch die Einbindung externer Analytics- und Marketing-Tools wie Google Analytics, Facebook Pixel, Matomo, Hotjar, Zapier oder Integromat funktioniert problemlos.

Note: 1,7

Kundensupport

Die Webflow University setzt einen neuen Standard für Support-Bereiche, die sich an Autodidakten und Selbsthelfer richten. In dieser Online-Universität warten Hunderte Kurse und Videos, sinnvoll in aufeinander aufbauende Lektionen unterteilt, mit denen Sie nach und nach die Funktionen von Webflow, aber auch allgemeine Prinzipien des Webdesigns und Programmierens kennenlernen können.

Wenn Sie doch einmal persönliche Hilfe benötigen, können Sie ein Support-Ticket aufmachen. Das Webflow-Team ist von Montag bis Freitag 12 Stunden am Tag aktiv und gibt sein Bestes, sich innerhalb von 24 bis 48 Stunden zu melden.

Im Test erhielten wir eine Antwort nach bereits etwa vier Stunden. Jene war ausführlich und personalisiert: Der Mitarbeiter nahm sich Zeit, auf jede unserer Fragen einzugehen und Beispiele zu nennen.

Ein Live-Chat wäre natürlich wie immer schön, aber die exzellente Webflow University und hilfsbereite Support-Mitarbeiter machen Webflow trotzdem zu einem Vorreiter in Sachen Kundensupport.

Note: 1,3

Preisgestaltung

Gratis basteln und fürs Hosting bezahlen: Nach diesem bewährten Prinzip operiert auch Webflow. Sie können kostenlos zwei Projekte auf Webflow-Subdomains veröffentlichen, alles Weitere kostet.

Ganz allgemein unterscheidet Webflow zwischen Tarifen für Seiten und Accounts. Bei Ersteren bezahlen Sie pro Projekt, also für jede Website, bei Letzteren für Ihren Gesamt-Account mit mehreren Projekten.

In beiden Preisschichten gibt es wiederum unterschiedliche Tarife, aufgeteilt in jeweils drei Website- und E-Commerce-Tarife bei den Seiten-Tarifen, sowie drei individuelle und zwei Team-Pläne bei den Account-Tarifen.

Für Unternehmen gibt es schließlich besondere Tarife, die individuell abgestimmt werden.

Die Preisstruktur von Webflow wirkt etwas kompliziert und die Unterschiede und Gemeinsamkeiten der verschiedenen Tarife könnten etwas besser erklärt werden. Eine aktuelle Übersicht finden Sie hier:

Website BasicWebsite CMSWebsite BusinessEcommerce Standard
Preise
Einrichtungsgebühr 0,00 € 0,00 € 0,00 € 0,00 €
Grundpreis pro Monat 15,00 € 20,00 € 45,00 € 42,00 €
Vertragslaufzeit (Monate) 1 1 1 1
Inklusive
Speicherplatz (GB) unbegrenzt unbegrenzt unbegrenzt unbegrenzt
Anzahl Seiten 100 100 100 100
Traffic (GB) unbegrenzt unbegrenzt unbegrenzt unbegrenzt
Eigene Domain möglich
Domains inklusive 0 0 0 0
Features
Werbefrei
SSL-Verschlüsselung
Blog-Funktion
Shop-Funktion
Mehrsprachige Seiten
Serverstandort

Fazit

Features
Note 1,0
Kundensupport
Note 1,3
Templates & Design
Note 1,3
Marketing, SEO & E-Commerce
Note 1,7
Einrichtung und Bedienkomfort
Note 2,0

Code-Barrieren brechen bedeutet für Webflow nicht, so zu tun, als wären Websites nicht das Ergebnis komplexer Programmier-Vorgänge. Im Gegenteil: Webflow visualisiert diese Vorgänge, um Sie so eng mit dem Frontend zu verbinden wie möglich. Das bedeutet, dass Webflow für Anfänger und solche, die dem Programmieren aus dem Weg gehen möchten, nicht wirklich geeignet ist. Doch für seine eigentliche Zielgruppe ist Webflow so nützlich, dass man den Hybrid-Baukasten fast als Gamechanger bezeichnen könnte.

WebflowWebflow Homepage Baukasten
 531
15,00 €
∅ mtl. Effektivpreis
monatlich kündbar
Mischung aus CMS & Baukasten
beinahe unendliche Möglichkeiten
Lernplattform "Webflow University"
gute E-Commerce-Integration
etwas steile Lernkurve
Webflow Website Basic + 5 weiterere Tarife
GB Webspace
30
Templates
eigene Domain
Domains inklusive

Den Design-Möglichkeiten sind kaum Grenzen gesetzt, die E-Commerce-Einbindung ist lückenlos und Ihre fertige, dynamische Website können Sie und Ihr Team mit einem leistungsstarken CMS verwalten. Der gerade anfangs steilen Lernkurve wirkt das Programm mit der hauseigenen Lernplattform Webflow University entgegen.

WordPress wurde bereits oft herausgefordert - und konnte sich bisher immer behaupten. Webflow schickt sich an, dem CMS-Marktführer echte Konkurrenz zu machen.

Kundenbewertungen

Experte.de hat die Erfahrungsberichte und Bewertungen von verschiedenen Bewertungsportalen untersucht und dabei 531 Bewertungen mit einer Gesamtwertung 4.5 von 5 ermittelt (Quellen).

Alternativen

Weil sich Webflow als WordPress-Konkurrent verkauft, ist das bekannteste aller Content-Management-Systeme natürlich die offensichtlichste Alternative. Ansonsten steht Webflow als Hybrid zwischen CMS und Baukasten aber ziemlich alleine da. Wer kein Interesse an Coding und Webdesign hat, ist mit weniger komplexen Homepage-Baukästen besser bedient.

Empfehlung: Testsieger 2020
WixWix Homepage Baukasten
 72.774
4,50 €
∅ mtl. Effektivpreis
12 Monate Laufzeit
Kostenloser Einsteiger-Tarif
sehr viele hochwertige Templates
einfache & intuitive Bedienung
Domains nur ein Jahr kostenlos
Server nicht in Deutschland
Wix Connect Domain + 3 weiterere Tarife
0.5
GB Webspace
550
Templates
eigene Domain
Domains inklusive
Empfehlung: Preis-Leistungs-Sieger 2020
WeeblyWeebly Homepage
 116.796
0,00 €
∅ mtl. Effektivpreis
ohne Vertragslaufzeit
Kostenloser Einsteiger-Tarif
SSL-Zertifikat in allen Tarifen
moderne Designvorlagen
Domains nur ein Jahr kostenlos
kein E-Mail Account enthalten
Weebly Kostenlos + 4 weiterere Tarife
0.5
GB Webspace
100
Templates
eigene Domain
SquarespaceSquarespace Homepage
 3.901
11,00 €
∅ mtl. Effektivpreis
12 Monate Laufzeit
qualitativ hochwertige Templates
einfache Handhabung
guter Kundensupport
verschiedene mobile Apps
vergleichsweise teure Tarife
Squarespace Standard (12 Monate) + 3 weiterere Tarife
GB Webspace
100
Templates
eigene Domain
1
Domain inklusive
Autor: Martin Gschwentner
Martin Gschwentner hat Amerikanistik und Medienwissenschaft in Deutschland, den USA und Frankreich studiert und arbeitet als freier Redakteur in Paris. Er forscht als Doktorand am Institut für England- und Amerikastudien der Universität Paris Diderot zum Einfluss des Geldes auf die US-Politik. Auf EXPERTE.de schreibt er über IT-Sicherheit, Datenschutz und Software für Selbständige und Kleinunternehmen.