Webflow Erfahrungen & Testbericht: Der Homepage-Baukasten für Designer

Du bist ein professioneller Webentwickler, Webdesigner oder Programmierer, der für Kunden ganz individuelle Webseiten entwickelt. Du willst aber nicht für jedes Projekt das „Rad neu erfinden“. Wozu auch?

Mit einem Website-Baukasten wie Webflow arbeitest du visuell und musst nicht alles mühselig per Hand coden. Das erspart dir viel Aufwand und Zeit.

Webflow wirbt damit, dass man absolut professionelle Ergebnisse mit der No-Code-Methode erzielen kann. Doch stimmt das wirklich?

Oder handelt es sich hier wieder um eines der typischen marktschreierischen Marketing-Versprechen, das sich bei näherer Betrachtung als Schall und Rauch entpuppt? In diesem Erfahrungsbericht berichte ich dir von meinen Webflow Erfahrungen.

Finden wir gemeinsam heraus, was tatsächlich an diesem Versprechen dran ist.

Hast du es eilig? Dann ist hier deine Kurzversion.
Mit Webflow hast du quasi unendliche Möglichkeiten bei der Gestaltung von Websites. Du solltest aber Erfahrungen im Webdesign mitbringen, da du sonst schnell überfordert bist. Beim Thema E-Commerce hingegen sind die Möglichkeiten eher eingeschränkt. Wenn du auf der Suche nach einer einfachen Lösung für Webseiten bist, dann sind Jimdo oder Weebly die bessere Wahl für dich.

Webflow Vorteile

  • Funktionsumfang: Meinen Webflow Erfahrungen zufolge bietet dir der Website-Builder viele Funktionen, mit denen du ausgesprochen viele Möglichkeiten hast. Du kannst mit vorgefertigten, kostenpflichtigen Templates starten oder du baust deine Seite komplett selbst auf.
  • Individualisierung: Webflow ist wie ein Schweizer Taschenmesser für Entwickler & Co.: Du kannst quasi alle Web-Projekte mit Webflow umsetzen.
  • CMS: Das Webflow-CMS ist sehr flexibel. Du kannst zum Beispiel eigene wiederverwendbare Inhaltstypen wie Blog-Beiträge erstellen und dabei statische und dynamische Inhalte kombinieren – ohne zusätzliche Plug-in-Installationen. Zudem kannst du mehrere Datenbanken anlegen.

Webflow Nachteile

  • Wer ein E-Commerce-Projekt umsetzt, dem bietet Webflow einige solide Grundfunktionen. Reine Shopsysteme wie beispielsweise Shopify sind im Vergleich um einiges leistungsfähiger und daher die bessere Wahl für ambitionierte Projekte.
  • Die Preisgestaltung bei Webflow ist komplex und kann verwirrend sein. Es gibt zwei „Pläne“, die sich wiederum in weitere Unterpläne aufteilen. Es dauert ein wenig, hier die richtige Wahl zu treffen.
  • Persönlicher Support: Webflow bietet Tutorials an zu vielen Themen wie zum Beispiel zu Layout & Design oder Interaktionen & Animationen. Persönlicher Support erfolgt nur via E-Mail.
  • Die Webflow-Systemsprache ist Englisch.

Inhalte
1 Warum Webflow nutzen?
2 Webflow Beispiele
3 Webflow Bedienung & Funktionen
4 Webflow Preise
5 Webflow DSVGO-Konformität & Datensichheit

6 Webflow Kundensupport
7 Webflow Alternativen

Warum Webflow nutzen?

Webflow wurde für Entwickler konzipiert, die möglichst frei sein wollen beim Design ihrer Webseiten. Der Website-Builder bietet weitaus mehr Möglichkeiten als die bekannteren Website-Baukästen wie beispielsweise Jimdo. Sein volles Potenzial entfaltet Webflow, wenn du zumindest Grundkenntnisse in HTML und CSS hast.

Mit dem Webflow Content-Management-System (CMS) verwaltest du deinen Content. Das CMS ist im Vergleich zu WordPress um einiges flexibler. Ein wichtiger Vorteil ist, dass du nicht wie bei WordPress etliche Plug-ins installieren (und regelmäßig updaten) musst für bestimmte Funktionalitäten. Das bietet Webflow alles aus einer Hand an.

Mit dem visuellen Webflow Designer designst du Elemente und Webflow erzeugt dafür HTML- und CSS-Code, den du exportieren kannst. Das ist aber nur bei der kostenpflichtigen Version von Webflow möglich.

Du sparst mit Webflow viel Zeit und bekommst auch technisch „sauberen“ Code, der einwandfrei funktioniert.

Webflow Beispiele

Wie schon Goethe sagte: Grau, teurer Freund, ist alle Theorie… Ich habe dir daher ein paar absolut hervorragende Webseiten herausgesucht, die mit Webflow designt wurden. Sie überzeugen durch Stil, Eleganz und Funktion.

[image_carousel source=“media: 5227,5228,5229″ limit=“20″ slides_style=“default“ controls_style=“dark“ crop=“none“ columns=“1″ adaptive=“yes“ spacing=“yes“ align=“center“ max_width=“none“ captions=“no“ arrows=“yes“ dots=“no“ link=“none“ target=“blank“ autoplay=“0″ speed=“medium“ image_size=“large“ outline=“yes“ random=“no“]

Webflow Bedienung & Funktionen

In diesem Kapitel schauen wir uns Webflow einmal etwas genauer an. Du wirst erfahren, wie du meinen Webflow Erfahrungen zufolge den Website-Builder bedienst und was er dir bietet.

Zunächst einmal musst du dich natürlich registrieren oder anmelden. Die Basis-Version ist kostenlos, aber wenn du den gesamten Funktionsumfang von Webflow nutzen möchtest, dann wähle einen kostenpflichtigen Tarif.

Webflow stellt dir anschließend ein paar grundlegende Fragen. Anhand deiner Antworten erstellt Webflow die Basis für deine Seite. Das erspart dir schon mal eine Menge an Zeit und Arbeit.

[image_carousel source=“media: 5201,5202,5203,5204,5205″ limit=“20″ slides_style=“default“ controls_style=“dark“ crop=“none“ columns=“1″ adaptive=“yes“ spacing=“yes“ align=“center“ max_width=“none“ captions=“no“ arrows=“yes“ dots=“no“ link=“none“ target=“blank“ autoplay=“0″ speed=“medium“ image_size=“large“ outline=“yes“ random=“no“]

Zunächst legst du deine Rolle im neuen Projekt fest und bestimmst dann, für wen die neue Seite ist. Anschließend fragt dich Webflow nach deinen Erfahrungen. Abhängig davon bietet dir Webflow Funktionen an, die deinem aktuellen Kenntnisstand entsprechen. Abschließend bringt Webflow in Erfahrung, welchen Seitentyp du brauchst. 

Das Webflow-Tutorial ist wirklich gut. Es erklärt dir kurz und kompakt Webflow.

Webflow Tutorial

Webflow Website-Designer

Der Website-Designer ist das Webflow-Flaggschiff mit schier gigantischem Funktionsumfang, was Fluch und Segen zugleich ist. Ich gebe dir daher auch nur einen kurzen Einblick in meine Webflow Erfahrungen. Sonst wird dieser Artikel so lang, dass du dir Streichhölzer zwischen die Augen klemmen musst, bis du am Ende angekommen bist. 

Wie der Name schon vermuten lässt, gestaltest du im Website-Designer deine Website und zwar nach dem CSS-Box-Modell. Du baust so deine Seite Baustein für Baustein zusammen – das bekannte Lego-Prinzip. Durch das Box-Modell wird deine Seite auch responsiv. Sie wird so auf allen Endgeräten vom Smartphone bis hin zum Desktop PC korrekt dargestellt.

Nach dem Drag & Drop-Prinzip ziehst Du einfach das, was du brauchst, auf deine Arbeitsfläche. Auf der linken Seite des Designers findest essenzielle Funktionen. Rechts legst du die speziellen Eigenschaften deiner Elemente fest wie beispielsweise ihre Schriftgröße und -art und ihre Abstände untereinander.

Links fügst du über den Plus-Button Elemente oder Layouts hinzu. 

  • Bei den Layouts handelt es sich um vorgefertigte Blöcke wie Galerien oder Cards Sections, mit denen du Produktkategorien oder Dienstleistungen vorstellst.
  • Die Elemente sind die Bausteine deiner Seite. Du nutzt sie beispielsweise für Überschriften, Textblöcke oder Buttons. 
  • Je komplexer deine Seite wird, desto unübersichtlicher wird sie. Der Navigator bietet dir Orientierung. Er zeigt den Seitenaufbau in Form einer Baumstruktur. Wenn du eines der Elemente anklickst, dann wählst du es damit aus.
  • Mit dem Pages-Button fügst du weitere Seiten oder Unterseiten hinzu. Hier bekommst du auch einen guten Überblick über deine Website-Hierarchie.
  • Bilder, Dokumente und andere Dateien lädst du über die Asset-Seite hoch.
  • Oben in der Mitte des Webflow Website-Designer bekommst du eine Vorschau, wie deine Seite auf unterschiedlichen Endgeräten dargestellt wird.
Webflow Designer

Webflow Editor

Den Webflow Editor rufst du direkt aus dem Website-Designer auf. Damit führst du Änderungen an deiner Live-Seite durch nach dem WYSIWYG-Prinzip. Deine Änderungen im Editor werden nach dem Speichern genauso auf der Live-Seite angezeigt.

Webflow Editor

Du kannst auch anderen Personen einladen, dass sie neue Inhalte hinzufügen und veröffentlichen. Das ist optimal für Teams. So können beispielsweise deine Kunden oder die Marketing-Kollegen ihre Arbeit machen.

Wichtig zu beachten: Du legst im Website-Designer fest, welche Elemente bearbeitet werden dürfen. Der Funktionsumfang ist dabei auf das Editieren der Seite beschränkt. Niemand muss sich Sorgen machen, dass man versehentlich Elemente löscht oder verändert und so die Seite ramponiert.

Template & Design

Du kannst es dir auch ein Stück weit einfacher machen. Anstatt Tage in ein neues Design zu investieren, suchst du dir einfach eines der kostenpflichtigen Templates aus. Die Auswahl ist riesig. Preislich liegen sie zwischen 19 und 129 Dollar.

Dein Template passt du dann im Website-Designer nach Gusto an und änderst beispielsweise die Schriftgrößen und -arten oder die Element-Positionen und Abstände. Die Auswahl an Schriftarten ist groß und du kannst zusätzlich deine eigenen hochladen. Du kannst auch jederzeit überprüfen, ob deine Seite responsiv ist.

Wenn du dich mit CSS auskennst, dann kannst du Code zu den Elementen hinzufügen. Ein Code-Export ist auch möglich, aber nur in einer kostenpflichtigen Webflow-Version. 

Durch meine Webflow Erfahrungen kann ich sagen, dass du quasi endlose Möglichkeiten hast. Nur technische Kenntnisse können Limits setzen.

Webflow CMS

Webflow hat ein potentes Content-Management-System, das durch seine Flexibilität und seinen Funktionsumfang WordPress oder Homepage-Baukästen wie Jimdo klar in den Schatten stellt. Du kannst beispielsweise Collections selbst anlegen und mit deinem Website-Projekt verbinden. Sie funktionieren ähnlich wie Datenbanken. Es gibt auch Vorlagen wie beispielsweise für Blog Posts, Kategorien oder Kunden.

Webflow CMS

Webflow Hosting

Die kostenlose Webflow-Variante bietet nur sehr eingeschränkte Möglichkeiten. Du darfst nur eine Seite auf einer Webflow-Subdomain erstellen. Das reicht zu Testzwecken, aber nicht für professionelle Ansprüche. Die kostenpflichtige Version ist also auf Dauer alternativlos. Dann bekommst du auch eine eigene Domain. Alternativ bindest du eine Domain ein, die du schon besitzt.

Webflow E-Commerce Online-Shop 

Du kannst auch einen Online-Shop mit Webflow aufbauen. Wenn du Ecommerce im Website-Designer aktivierst, dann legt Webflow unter anderem zwei Collections für Produkte und Kategorien an. Ein Guide unterstützt dich bei der Einrichtung deines Shops. Du kannst folgende Elemente in deinem Online Store verwalten:

  • Produkte
  • Produktkategorien
  • Rabatte
  • Bestellungen

Die Zahlungsanbieter sind nur auf Paypal und Stripe beschränkt. Darüber hinaus ist der Funktionsumfang von Webflow E-Commerce recht beschränkt. Für kleine Projekte mag das ausreichen. Bei größeren Stores sind daher Shopsysteme wie Shopify die bessere Wahl.

Webflow SEO

Auch wenn deine Seite umwerfend geworden ist: Das bringt dir rein gar nichts, wenn niemand die Seite kennt oder besucht. Du musst also Suchmaschinenoptimierung (SEO) betreiben für Google & Co.

Webflow bietet dir einige SEO-Funktionen an: 

  • URL: Achte unter anderem auf eine sprechende URL mit ein bis zwei Keywords.
  • Meta-Titel: Hier gibst du den Titel der jeweiligen Seite an.
  • Meta-Beschreibung: Lege hier eine Kurzzusammenfassung deines Seiteninhalts an, der in den Google-Suchergebnissen angezeigt wird.
  • Strukturierte Daten: Diese Daten helfen Google dabei, deine Seite und deren Inhalte zu verstehen. In einem standardisierten Format informierst du über den Inhalt deiner Seite und klassifizierst ihn.
SEO in Webflow

Webflow Preise – Ist es das Geld wert?

Site plans: Für Personen, die Webseiten und Online-Shops für sich selbst brauchen. Die Anzahl der Seitenaufrufe bestimmen dabei den Preis.

  • Basic: 12 Dollar/Monat für maximal 25.000 Seitenaufrufe/Monat.
  • CMS: 16 Dollar/Monat für maximal 100.000 Seitenaufrufe/Monat.
  • Business: 36 Dollar/Monat für maximal 500.000 Seitenaufrufe/Monat.
  • Enterprise: Individuell – muss angefragt werden.

E-Commerce-Kunden wählen aus drei Varianten aus, die von der Menge an angebotenen Produkten abhängen:

  • Standard: 29 Dollar/Monat für maximal 500 Produkte.
  • Plus: 74 Dollar/Monat für maximal 1.000 Produkte.
  • Advanced: 212 Dollar/Monat für 3.000 Produkte.
Webflow Preise E-Commerce

Account plans: Richtet sich an Personen, die Projekte im Kundenauftrag entwickeln. Hier hängt die Preisgestaltung von der Anzahl der Projekte ab, die umgesetzt werden:

  • Starter: Zwei Projekte sind kostenlos.
  • Lite: 16 Dollar/Monat für maximal zehn Projekte.
  • Pro: Für 35 Dollar/Monat können unbegrenzt Kundenprojekte realisiert werden.

Webflow Datensicherheit & DSGVO-Konformität

Die Themen Datenschutz und Datenschutz sind bei jeder Webseite wichtig, da bei Verstößen sonst hohe Strafen drohen. Webflow unterstützt dich dabei wie folgt:

  • Webflow erstellt regelmäßig Backups deiner Seiten. Wenn es nötig ist, dann kannst du sie jederzeit einspielen.
  • Du kannst auf jeder Webflow-Seite Passwörter setzen.
  • Die Webflow-Daten werden auf sicheren Cloud-Providern wie Amazon und Fastly gespeichert.
  • Die DSGVO-Konformität erfordert aber „Handarbeit“ von dir:

Die Daten von Webflow liegen auf Servern außerhalb der EU. Daher solltest du einen AV-Vertrag (engl. DPA) mit Webflow unterzeichnen, insbesondere wenn du einen Shop aufsetzt.

Cookie-Banner kannst du nur mit einer externen Lösung anlegen.

Um Rechtstexte musst du dich selbst kümmern. Nimm am besten eine Rechtsberatung in Anspruch wie zum Beispiel durch die IT Recht-Kanzlei oder den Händlerbund.

Welchen Kunden-Support bietet Webflow?

Webflow ist ein umfangreiches, aber ganz sicher nicht selbsterklärendes Tool. In der Webflow University findest du aber viele richtig gute Kurse und Tutorials für Anfänger und Fortgeschrittene. Weiterhin bietet ein Blog viele sehr nützliche Artikel an.

Falls du doch einmal persönliche Unterstützung brauchst, dann schicke eine E-Mail an den Webflow-Support.

Webflow Alternativen

Du hast gesehen, was für ein tolles Tool Webflow ist und was es dir an Möglichkeiten bietet. Können die Konkurrenten da mithalten oder müssen sie die Segel streichen? 

  • Jimdo: Falls dich Webflow überfordert oder du nach einer ganz simplen Webflow-Alternative suchst, dann ist dieser Homepage-Baukasten eine gute Alternative. 
  • Weebly: Dieses Tool ist ebenfalls ausgesprochen einfach zu bedienen. Der Funktionsumfang ist ebenfalls geringer als bei Webflow.
  • WordPress mit dem Plugin Elementor: In dieser Kombination hast du ähnliche, aber nicht ganz so umfangreiche Möglichkeiten wie im Webflow Website-Designer.

Fazit: Finales Urteil

Aufgrund meiner persönlichen Webflow Erfahrungen kann ich sagen, dass der Website-Builder ein sehr interessantes Tool ist, mit dem man tolle Webseiten entwickeln kann. Das „No Code“-Versprechen ist kein Marketing-Gag, aber Grundkenntnisse in HTML und CSS sind durchaus sehr hilfreich. Nur so kannst du das voll Potenzial von Webflow vollständig ausschöpfen.

Wenn du als Anfänger mit Webflow startest, dann musst du mit einer flachen Lernkurve rechnen. Hier gilt es dann, beharrlich zu bleiben. Wenn du hingegen Spaß an technischen Themen hast und zugleich die Kontrolle über deinen Code behalten willst, dann ist Webflow eine gute Wahl für dich.

So oder so: Probieren geht über studieren! Du kannst Webflow kostenlos testen. Entscheide dann selbst, ob es die Ideallösung für deine kommenden Projekte ist.