Kostenlose Website-Analyse - jetzt sichern

Webflow

Der umfangreiche Webflow Ratgeber- alles was du wissen musst

Autor: Florian Steinle

Flo Steinle - 13.07.2023

Der umfangreiche Webflow Ratgeber- alles was du wissen musst

Einleitung

Man nehme alle Probleme, die beim klassischen Bau von Webseiten auftreten:

  • Die Arbeit mit Webdesigner, Entwickler, Content Editor und Co. ist zäh, langwierig und die Korrekturschleife dauert ewig

  • Templates und vorgefertigte Strukturen bieten nicht genug Freiheit, um alle Kundenwünsche umzusetzen, das Unternehmen akkurat zu repräsentieren und es von den Konkurrenten abzuheben sind zu Beginn undurchsichtig

  • Responsives Design und Animationen sind teuer, kompliziert und ohne Entwickler nicht möglich

  • die Pflege der Webseite und der Inhalte ist später kompliziert und benötigt teure Wartungsverträge, der Kunde kann sich nicht selbst darum kümmern

  • Die Preise für das Hosting, Zusatzfunktionen und Wartung sind zu Beginn undurchsichtig

Und dann erfreue man sich an der Hybrid-Lösung, die all diese Probleme weitgehend behebt: Webflow. Im Gegensatz zu typischen Website Baukästen wie WordPress, Wix, Jimdo und Co. bietet diese Software die Möglichkeit, frei von vorgefertigten Mustern individuelle Webseiten zu gestalten - auch ohne tiefgründige Coding-Kenntnisse.

Die Oberfläche ist auf visuelle Bearbeitung und Benutzerfreundlichkeit ausgelegt, ein übersichtliches CMS und sicheres Hosting sind integriert, alle technischen Updates passieren automatisch - Ich kann mich als UI & UX-Designer also mit Animationen, coolem Design und sinnvollen Strukturen austoben und meine Kunden können die fertige Seite am Ende easy selbst pflegen.

Aber genug des Lobs in der Einleitung. In diesem Artikel geht es sowohl um die Möglichkeiten und Vorteile, als auch um die Limitierungen von Webflow.

Was ist Webflow?

Was ist Webflow?

Webflow ist eine Software zum Erstellen von Webseiten, die Website-Builder und CMS kombiniert. Auch ohne Programmierkenntnisse lassen sich mit Webflow völlig individuelle und kreative Webseiten erstellen. 

Anders als bekannte Website-Baukästen wie Wix oder Wordpress bietet Webflow keine vorgefertigten Bausteine oder Templates, sondern ermöglicht absolute kreative Freiheit beim Design. 

Dabei können Drag- and Drop-HTML-Elemente auf der Webseite eingefügt und mit CSS individuell gestaltet werden, ohne dass der Code manuell geschrieben werden muss. Stattdessen wird der Code beim 100% visuellen Erstellen der Oberflächen automatisch im Hintergrund geschrieben. 

Da es keine zusätzlichen Plug-Ins gibt, wird der Code deutlich übersichtlicher und sauberer als beispielsweise bei Wordpress, was sich vor allem für SEO auszahlt.

Warum mit Webflow arbeiten?

Warum mit Webflow arbeiten?

5 Argumente nenne ich immer wieder, wenn ich gefragt werde, warum ich mit Webflow arbeite:

  • Präzise und übersichtliche BearbeitungDie Webflow Webseite kann zu 100% visuell bearbeitet werden, ganz nach dem Prinzip: What you see is what you get. Dabei hat man absolute Designfreiheit und kann so gut wie alle Ideen präzise umsetzen.

  • Saubere CodesDie Webflow-Codes werden sehr übersichtlich und sauber, sodass sie ohne Probleme von Programmierern gelesen und verwendet werden können und außerdem für ein besseres Suchmaschinen-Ranking der Webseite sorgen.

  • Einfache Zusammenarbeit mit KundenKunden können sich auf Ihrer Webflow Webseite einloggen und dank dem übersichtlichen Editor und CMS eigenständig Inhalte hinzufügen, ändern oder löschen.

  • Professionelle Ergebnisse ohne ProgrammierenEgal ob Animationen oder einfach nur ein 100% individuelles Design: Mit Webflow entstehen hochwertige, professionelle Ergebnisse, die man mit keinem anderen Website-Builder erhält. Und das ohne, dass man bei 0 anfängt und den ganzen Code selbst schreibt.

  • Automatisierte HintergrundprozesseTechnische Prozesse wie Sicherheitsupdates laufen automatisch im Hintergrund, ohne dass man sich darum kümmern musst. Man kann sich bei Webflow also darauf verlassen, dass die Seite immer im optimalen technischen Zustand ist und auch in Zukunft dementsprechend geupdated wird.

Vorteile für den UX & UI Designer & das Marketing Team

Webflow bietet die Möglichkeit, individuelle Designs uneingeschränkt und vergleichsweise günstig umzusetzen. Besonders hilfreich ist, dass über das Dashboard mehrere Kundenprojekte gleichzeitig verwaltet werden können.

Für regelmäßige Leistungen wie SEO oder Content-Pflege lassen sich in Webflow integrierte Kundenabrechnungen erstellen, die der Kunde automatisch erhält.

Vorteile für den Kunden

Für den Kunden ist die relativ einfache, visuelle Bearbeitung der Website ein besonders großer Vorteil. Auch ohne besondere Fähigkeiten oder Kenntnisse können die Kunden ihre eigene Website später unabhängig vom Webdesigner oder von der Agentur pflegen. Inhalte einzufügen, zu ändern oder zu löschen ist im Webflow CMS problemlos möglich. 

Hinzu kommt, dass Webflow sehr sicheres, schnelles und zuverlässiges Hosting bietet. Technische Updates werden automatisch gemacht, sodass die Webseite immer auf dem höchsten Stand der Sicherheit und Funktionalität ist.

Für wen ist Webflow geeignet?

Warum mit Webflow arbeiten?

Für Einsteiger, die noch überhaupt keine Berührungspunkte mit Webseiten und deren grundlegender Struktur haben, ist Webflow vielleicht eher ungeeignet. Denn um in Webflow fehlerfrei zu arbeiten, muss man verstehen, wie Webseiten aufgebaut sind: Im Grunde, dass jedes Element einfach eine Box ist und man jeder Box mithilfe von CSS Eigenschaften zuweisen kann.

Da die ganze Software auf Englisch ist, ist Webflow nicht für Personen geeignet, die keine Englischkenntnisse haben.

Für diese Personen lohnt sich Webflow dafür umso mehr:

  • Webdesigner mit HTML- und CSS-Grundkenntnissen, die ohne einen Entwickler oder fortgeschrittene Programmierkenntnisse hochwertige Webseiten mit kreativen Layouts und Animationen erstellen wollen

  • Agenturen, die Wert auf einen professionellen, präzisen und schnellen Arbeitsablauf legen

  • Freelancer oder Unternehmen mit Website-Grundkenntnissen, die ihre Webseite unabhängig von einem Entwickler aufbauen und bearbeiten wollen

Die Webflow Funktionen

Warum mit Webflow arbeiten?

Mit Webflow ist die gesamte Bandbreite vom Erstellen der Webseiten, über das Content Management System für dynamische Inhalte bis hin zum Hosting möglich. Welche genauen Funktionen die Software hat, erfährst du hier:

Designer

Die Designer Funktion bietet die Möglichkeit, eine Webseite visuell zu gestalten und festzulegen. Im Grunde handelt es sich dabei um eine Frontend-Leinwand, mit der HTML5, CSS3 und JavaScript visuell genutzt werden können.

Im Designer sieht man 3 Abschnitte:

In der Mitte ist die Webseite, an der gerade gearbeitet wird.

Links befindet sich eine Symbolleiste mit den Steuerelementen, die zur Gestaltung der Webseite benötigt werden. Textblöcke, Linkblöcke, Div-Blöcke und typische HTML-Elemente können von hier per Drag-and-Drop an die gewünschte Stelle gezogen und bearbeitet werden.

Rechts befindet sich das Style-Panel, wo visuelle Veränderungen über den CSS Editor vorgenommen werden können. Mit dem JavaScript Editor sind auch Animationen möglich. Für komplexere Designs kann auch CSS-Grid genutzt werden, was aber nur für fortgeschrittene Nutzer geeignet ist.

Während die Webseite im Designer visuell gestaltet wird, wird der entsprechende Code im Hintergrund automatisch geschrieben. Der Webflow Code ist sauber, semantisch und kann ohne Probleme an einen Programmierer weitergegeben werden. Wenn das Design fertig ist, kann der Code als ZIP-Datei heruntergeladen werden.

Editor

Der Editor dient dazu, dass auch Nutzer, die überhaupt keine Erfahrung mit Webflow oder Programmiersprachen wie HTML oder CSS haben, aber dennoch ihre eigene Webseite bearbeiten wollen.

Diese Funktion ist super hilfreich, um meinen Kunden die Möglichkeit zu geben, die fertige Webseite in Zukunft selbst zu pflegen. Es können mehrere Zugänge für den Editor eingerichtet werden, sodass sich mehrere Mitarbeiter aktiv an der Bearbeitung der Seite beteiligen können.

Hier können Kunden neben eigenen Änderungen auch Kommentare und Verbesserungsvorschläge für den Webdesigner hinterlassen.

Um sicherzugehen, dass keine versehentlichen Änderungen vorkommen, können die bearbeitbaren Inhalte vorher eingegrenzt werden. Außerdem können im CMS Collections mit Vorlagen für wiederkehrende Inhalte wie Blogs, Stellenausschreibungen, Team-Mitglieder oder News-Artikel angelegt werden, sodass diese in Zukunft ganz einfach und unkompliziert eingefügt werden können.

CMS

Das Webflow CMS ist ein leistungsstarkes Content Management System, mit dem dynamische Inhalte wie Blogartikel, Team-Mitglieder oder Stellenausschreibungen einfach und übersichtlich gepflegt werden können.

Für jede Inhaltskategorie kannst du im Webflow CMS Kollektionen anlegen, also zum Beispiel eine Kollektion für Blogs, eine Kollektion für Produkte und eine Kollektion für Mitarbeiter. Mit dem Designer wird dann eine Collection Page angelegt, die als Vorlage für alle Inhalte in dieser Kollektion dient. Damit bleibt zum Beispiel das Layout aller Blogposts einheitlich. Das Einfügen neuer Blogartikel ist dadurch ganz einfach und schnell gemacht

Dashboard und Backend

Als UI-& UX-Designer arbeite ich immer an mehreren Projekten gleichzeitig. Mit Webflow ist das überhaupt kein Problem: Über das Dashboard kann ich so viele Projekte gleichzeitig verwalten, wie ich möchte.

Zusätzlich kann ich für jedes Kundenprojekt ein Backend erstellen, um Einstellungen zum Hosting, den Editor-Zugängen, Zahlung & Abrechnung, SEO und weiteren Möglichkeiten zu tätigen.

Animationen

Animationen gehören zu den wichtigsten Funktionen einer Webseite, wenn es um eine herausragende User Experience geht. Egal ob Progressbars, die Animation von Daten oder Cursor Animationen: Wenn der Nutzer das Gefühl hat, mit der Webseite interagieren zu können, nimmt er die Inhalte besser auf und bleibt länger auf der Seite.

Mit dem visuellen JavaScript Editor von Webflow ist es möglich, auch ohne fortgeschrittene Coding-Kenntnisse hochwertige Animationen einzubauen.

E-Commerce

Marktführer im Bereich E-Commerce-Webseiten ist zur Zeit immer noch Shopify. Anders als bei diesem Anbieter baut man einen E-Commerce-Shop mit Webflow nicht aus vorgefertigten Bausteinen zusammen, sondern kann von den einzelnen Produktseiten bis hin zum Warenkorb und Checkout alles komplett individuell gestalten.

Da völlig bei Null anzufangen, ist nicht für jeden etwas. Außerdem ist mit Webflow noch kein so großer Umfang an Artikel wie mit Webflow möglich. Allerdings ist das Schöne an Webflow ja, dass sich die Software konstant weiterentwickelt. Dieses Jahr gab es bereits ein Webflow CMS Update, dass die E-Commerce-Pläne vergrößert hat. Aktuell können mit dem E-Commerce Plus Plan 5000 Artikel und mit dem E-Commerce Advanced Plan 15.000 Artikel angeboten werden.

Support

Webflow ist eine echte Community, in der man sich gegenseitig unterstützt. Im Webflow Forum kann man sich mit anderen Webdesignern und Webflow Experten austauschen und so beinahe alle Probleme und Wissenslücken beseitigen.

Außerdem bietet Webflow umfangreiche, kostenlose Lernressourcen in der Webflow University, mit Tutorials zu Themen rund um Webflow und sogar zu Grundlagen von Webdesign und den Programmiersprachen HTML, CSS und JavaScript.

Wenn trotz allem noch Fragen offen sind, kann man über ein Support-Ticket auch direkt mit Webflow kommunizieren. Meist erhält man innerhalb weniger Stunden eine Antwort.

Accessibility-Optionen

Zu den Grundlagen des UI-& UX-Designs gehört eine gute Accessibility der Seite. Webflow bietet einige Tools, um Webseiten wirklich für jeden zugänglich zu machen und Schwierigkeiten wie z.B. Sehbehinderungen auszugleichen. Zu diesen Tools zählen

  • HTML5 Tags

  • Alt Text Attribute

  • relative Einheiten

  • Kontrast Tools bei Farben

Templates und Vorlagen

Ich dachte, bei Webflow gibt es eben keine Templates wie bei anderen Webseiten-Baukästen? Doch, in der Webflow Library gibt es von Webflow Experten erstellte, teils kostenpflichtige Layouts und Vorlagen, die man herunterladen und individuell anpassen kann. 

Das ist vor allem etwas für Leute, die bei einer ganz blanken Leinwand doch etwas überfordert sind und nicht wissen, wie man am besten anfängt. So können diese vom Know-How anderer Designer profitieren, ohne einen Webdesigner zu engagieren, haben dafür aber wahrscheinlich keine 100% einzigartige Seite.

Mitgliedschaften

Mitgliedschaften sind ein neues Feature, das zu den 2022 Updates gehört und mit dem wir bereits vorher in der Closed Beta Phase positive Erfahrungen sammeln konnten.

Auf einer Webflow Webseite können mit diesem Feature bis zu 20000 Mitgliedschaften abgeschlossen werden, was ganz neue Arten von Webseiten ermöglicht: Zum Beispiel Online-Kurse, exklusive Mitglieder-Beiträge oder einfach unternehmensinterne Informationen wie Schichtpläne, Neuigkeiten, etc. Dazu wird die Webseite in öffentliche und private oder bezahlte und unbezahlte Bereiche eingeteilt.

Für welche Projekte eignet sich Webflow?

Webflow ist unglaublich vielseitig anwendbar. Doch natürlich hat auch Webflow seine Limitierungen, weshalb einige Projekte mit der Software besser funktionieren als andere. Nach meiner Erfahrung ist Webflow in folgenden Fällen immer die perfekte Wahl:

  • Individuelle Webseiten-Strategie Wenn ein Unternehmen Wert darauf legt, eine individuelle Webseite ohne Templates und Vorlagen zu erstellen, dann ist Webflow die perfekte Software dafür. Wer etwas Ahnung von Webseiten-Struktur und UI & UX Design hat, kann hier hochwertige, individuelle Seiten designen, die garantiert kein anderer hat.

  • Die Webseite wird ständig mit neuem Content gefülltO b ein Blog oder eine News-Seite: Wenn eine Webseite ständig um neuen Content ergänzt wird, muss das Einpflegen der neuen Artikel möglichst einfach und schnell gehen. Mit dem Webflow CMS ist das überhaupt kein Problem, denn beim Erstellen der Seite werden für jede Kollektion, also zum Beispiel “Blogartikel” oder “ Neuigkeiten” Templates hinterlegt, in die die neuen Artikel eingepflegt werden können. Das Design ist damit immer einheitlich und muss nicht jedes Mal neu bearbeitet werden.

  • Die User Experience steht im Vordergrund Webflow bietet nicht nur starre Vorlagen, sondern erlaubt nahezu alle Designmöglichkeiten. Ein Traum für den UI & UX Designer. Ich kann mit Animationen, Layouts, Funktionen, Schriften und Farben spielen und die Webseite so ansprechend wie möglich gestalten, ohne zig Plug-Ins zu installieren, die den Code der Seite unübersichtlich machen oder die Ladezeit verlangsamen.

  • Die Website soll sich ohne viel Arbeit stetig weiterentwickeln können Es gibt keine Webseite, die einmal gebaut wird und dann für immer so bleibt. Alle Webseiten wachsen mit der Zeit oder werden verändert. In Webflow legt man ein Grundgerüst für die Webseite an, auf dem alle Inhalte ergänzt, gelöscht oder geändert werden können. Dabei muss das Design nicht jedes Mal neu erfunden werden, sondern liegt bereits vor. Weiterhin macht Webflow einem die Pflege der Webseite dadurch einfacher, dass Sicherheitsupdates und andere technische Updates automatisch stattfinden, sodass man sich wirklich nur um die Pflege der Inhalte kümmern muss. Die Webflow Webseite bleibt von allein auf dem neuesten technischen Stan

  • Die Webseite soll einen Mitglieder-Bereich haben Seit 2022 ist es möglich, eine Webseite in öffentliche und private Bereiche einzuteilen. Dabei sind bis zu 20000 bezahlte oder unbezahlte Mitgliedschaften möglich, die Zugang zu dem privaten Bereich haben. Das ermöglicht Projekte wie Online Kurse, exklusive Member-Beiträge oder unternehmensinterne Informationen auf der Webseite.

  • Traffic-lastige WebseitenDer Webflow Code ist sehr sauber und übersichtlich. Das ist ein Vorteil, den die Software gerade im Gegensatz zu Wordpress und anderen Webseiten-Baukästen, deren Code durch Plug-Ins überladen wird, ganz klar hat. Das professionelle Webflow Hosting und der klare, übersichtliche Code machen auch Webseiten mit sehr viel Traffic möglich, ohne dass die Ladezeit erheblich verkürzt wird. Für besonders große Webseiten bietet Webflow dazu Webflow Enterprise an. In Bezug auf Sicherheit, Ladezeiten und Traffic-Skalierungen wird dabei nochmal mehr angeboten. Webflow eignet sich damit bis zu einem gewissen Grad auch für große Unternehmen mit hohen Anforderungen.

Webflow Integrationen

Verschiedene Webflow Integrationen

Ja, Webflow funktioniert ganz ohne Plug-Ins. Aber es gibt dennoch Möglichkeiten, offizielle Plug-Ins zu verwenden, um die Limitierungen von Webflow zu überbrücken oder die Webseiten noch zu verbessern. Der Unterschied zu z.B. Wordpress ist dabei, dass die Plug-Ins nicht von jedem erstellt werden können. Die Webflow Integrationen bilden damit keine so große Sicherheitslücke. Außerdem wird Wert darauf gelegt, dass der Code dennoch übersichtlich und lesbar bleibt.

Einige offizielle Schnittstellen von Webflow zu anderen Programmen, die ich super finde, sind folgende:

  • MailChimp MailChimp ist eins der bekanntesten Tools für E-Mail-Marketing. Und da E-Mail noch immer die Marketing-Methode mit dem größten ROI ist, ist dieses Plug-In auf der Webseite durchaus sinnvoll.

  • HubSpot HubSpot ist ein CRM Tool, mit dem Kundenservice, Marketing, Analytics und Sales in einem abgewickelt werden. So können Marketing-Prozesse und Kundensupportanfragen reibungslos ablaufen.

  • Weglot Mehrsprachige Webseiten sind ein Muss für Unternehmen, die Produkte oder Dienstleistungen international verkaufen. Leider ist es in Webflow selbst noch nicht möglich, eine mehrsprachige Webseite zu erstellen. Entweder dupliziert man die komplette Webseite, um sie in einer anderen Sprache zu veröffentlichen, oder man benutzt die Integration Weglot, damit die Nutzer der Website ganz einfach zwischen den Sprachen hin- und herwechseln können.

  • Linguana Linguana ist ähnlich wie Weglot eine Webflow-Integration, mit der mehrsprachige Seiten möglich sind. Das besondere an Linguana ist, dass hier besonders viel Wert auf SEO-geeignete Übersetzungen gelegt werden, damit die Webseite in jeder Sprache gleich gut performt. Das ist bei Übersetzungen meist eine der größten Herausforderungen.

  • Finsweet Finsweet ist eine No-Code-Integration, die eine große Auswahl verschiedener Features bietet, die man in Webflow einbinden kann, darunter Social Share Funktionen, Design-Elemente wie Slider, Filteroptionen oder bestimmte Accessibility-Einstellungen. Mit Finsweet können die Details der Webflow Webseite noch verfeinert und perfektioniert werden.

Die meisten dieser Integrationen sind je nach Anforderungen in verschiedenen Preisplänen erhältlich. Über weitere No-Code-Integrationen, die ich für Webflow sinnvoll finde, habe ich bereits einen Blogartikel geschrieben.

Übrigens arbeitet Webflow stetig daran, gängige externe Anbieter durch hauseigene Funktionen zu ersetzen. So ist zum Beispiel gerade das Feature Webflow Logic in Entwicklung, mit dem Lead Generierung in Lead Routing in Webflow selbst automatisiert werden können. Bisher geht das nur mit Integration von externen Anbietern wie Zapier oder Integromat.

Webflow Pricing / Preise

Die Preisstruktur von Webflow bietet jedem Nutzer die Möglichkeit, den richtigen Plan für seine Projekte auszuwählen. Die Preise reichen von kostenlos bis zu mehreren hundert Euro - je nachdem, welche Anforderungen man hat.

Kostenlose Testversion

Was Webflow besonders zugänglich macht, ist die kostenlose Testversion. Damit sind fast alle wichtigen Funktionen freigeschaltet. Man kann:

  • bis zu zwei Projekte anlegen

  • den Webflow Designer nutzen

  • 20 CMS Kollektionen mit je 50 Items (z.B. Blogartikel) anlegen

  • den Webflow CDN Server nutzen und z.B. Bilder hochladen

  • die Webseite unter einer kostenlosen webflow.io Domain veröffentlichen

Man kann die Software also wirklich umfangreich ausprobieren, bevor man einen einzigen Cent zahlt. Um eine eigene Domain zu verknüpfen, noch mehr Designer-Funktionen zu nutzen und den Webseiten-Code zu exportieren, ist allerdings ein bezahlter Plan notwendig.

Hier findest du die offizielle Übersicht zu allen Preisen.

Das Preismodell von Webflow

Webflow Site Plans

Um eine professionelle Webflow Webseite zu veröffentlichen, muss ein passender Webflow Site Plan ausgewählt werden. Je nach Anforderungen der Website bietet Webflow da verschiedene Modelle:

Für einfache, statische Webseiten wie z.B. Landing Pages reicht der Basic Plan für nur 14$ im Monat. Hiermit kann das Webflow CMS nicht genutzt werden - Blogartikel oder andere dynamische Inhalte sind also nicht möglich. Dafür können aber sonst alle Webflow Design Funktionen verwendet werden und man hat die Möglichkeit, bis zu 500 Sign-Up-Form Submissions im Monat zu sammeln - Also zum Beispiel Newsletter-Anmeldungen.

Der Webflow CMS Plan kostet 23 $ im Monat und ermöglicht bis zu 2000 CMS Submissions, 1000 Newsletter Anmeldungen oder andere Arten von Form Submissions und Zugang für bis zu drei Content Editors.

Mit dem Webflow Business Plan für 39$ im Monat können bis zu 10 Content Editors an der Website arbeiten. Hier sind 10000 CMS Items möglich, sowie 2500 monatliche Form Submissions.

Für besonders große Seiten mit mehr als 10.000 CMS Items und individuellen Form Submissions, individueller Bandbreite, unbegrenzter Anzahl an Mitbearbeitern, besonders hoher Sicherheit und weiteren benutzerdefinierten Einstellungen ist Webflow Enterprise eine Lösung. Die monatlichen Kosten werden hier nach den individuellen Anforderungen berechnet.

Webflow E-Commerce Plans

Onlineshop sind mit Webflow möglich

Um mit Webflow einen E-Commerce Store zu erstellen, muss ein E-Commerce Plan gebucht werden.

Dabei eignet sich der Standard E-Commerce-Plan für 29$ im Monat für kleine Shops mit bis zu 500 Artikeln und 2000 CMS Items. Zusätzlich sind alle Features des CMS Plans freigeschaltet. Für jeden Verkauf muss bei diesem Plan 2% Commission an Webflow abgegeben werden. Diese Commission fällt bei den größeren Plänen weg.

Der E-Commerce Plus Plan für 74$ im Monat entspricht dem Webflow Business Plan und bietet zusätzlich Kapazität für 5000 Artikel im Shop.

Für besonders große E-Commerce Stores eignet sich der E-Commerce Advanced Plan für 212$ im Monat mit bis zu 15000 Artikeln im Shop und allen Webflow Business Plan Features.

Webflow Workspace

Eine relativ neue Addition zur Preisstruktur sind die Webflow Workspace Pläne, mit denen mehrere Personen an einem Projekt arbeiten können.

Der kostenlose Plan umfasst einen Hauptbearbeiter der Webseite, sowie 2 Freelancer oder Agenturen. Grundsätzlich gibt es bei jedem Plan Zugang für 2 Freelancer oder Agenturen.

Für *19$ pro Mitarbeiter im Monat sind 3 Mitbearbeiter möglich und für 49$ pro Mitarbeiter im Monat sogar 9 Mitbearbeiter**. Ein besonderes Feature dieser Pläne ist auch, dass der Code exportiert werden kann, sodass die Webseite nicht unbedingt bei Webflow gehostet werden muss.

Alle Preise beziehen sich auf die jährliche Abrechnung. Dabei sind die Preise günstiger, als wenn monatlich abgerechnet wird.

Ist Webflow mit diesen Preisplänen die günstigste Option auf dem Markt? Nicht unbedingt. WordPress sieht zum Beispiel im ersten Moment günstiger aus, da die Software kostenlos ist. Man zahlt am Ende aber doch für das Hosting, verschiedene Plug-Ins und Templates.

Bei Webflow hat man dafür von Anfang an einen klaren Überblick, was die Webseite kosten wird und weiß, dass im Preis bereits alle Funktionen erhalten sind, die man braucht. Im Gegensatz dazu sind die Kosten bei WordPress zu Beginn sehr undurchsichtig.

Datenschutz und Sicherheit mit Webflow

Datenschutz und Sicherheit mit Webflow

Das Thema Datenschutz im Internet darf beim Bau einer Webseite auf keinen Fall vernachlässigt werden. In Deutschland wird der Datenschutz hauptsächlich durch zwei Gesetze geregelt: Die Datenschutz-Grundverordnung (DSGVO) und das Bundesdatenschutzgesetz (BDSG-neu).

Laut DSGVO ist vorgeschrieben, dass jeder Nutzer einer Webseite vor der Seitennutzung über die Weitergabe von Daten aufgeklärt werden muss, zum Beispiel durch das altbekannte Cookies-Popup beim Öffnen einer Seite. 

Die Cookie-Einwilligung ist bei Webflow problemlos einzustellen, da die Integration von europäischen Cookie Opt-In Dienstleistern wie iubenda ohne die Installation von zusätzlichen Plug-Ins problemlos möglich ist. 

Das Webflow Hosting läuft über die Cloud-Computing-Plattform Amazon Web Services (AWS), die an sich bereits eine hohe Sicherheit bietet. Zusätzlich ist Webflow ISO 27018 zertifiziert und entspricht somit den Industriestandards in Bezug auf Sicherheit. Durch ständige, automatische Sicherheitsupdates ist gewährleistet, dass dieser Standard gehalten wird.

SEO (Suchmaschinenoptimierung) mit Webflow

Suchmaschinenoptimierung mit Webflow

Eine Website mit Top-Design ist schön und gut - Aber was genauso wichtig ist wie gutes UI & UX Design ist SEO. Denn die Webseite muss schließlich von so vielen Interessenten wie möglich gefunden werden. 

Eine Webflow-Webseite ist den Konkurrenten damit in der Regel schon einen Schritt voraus, denn der übersichtliche, saubere Code hilft dabei, dass die Seite besser gecrawlt und eingeordnet werden kann. Sie rankt damit automatisch höher als Webseiten mit überladenem Code.

Hier kommen wir aber auch wieder zu einem Argument dafür, dass die Arbeit mit Webflow nur für Personen geeignet ist, die eine gewisse Ahnung von guter Website-Struktur haben. Denn eine klare Navigationsstruktur, übersichtliche URLs und sinnvoll sortierte Inhalte machen nicht nur die User Experience besser, sondern sorgen auch dafür, dass Suchmaschinen-Crawler die Webseite einwandfrei lesen und einordnen können.

Webflow macht SEO zusätzlich einfacher, indem z.B. Meta-Titel und Meta-Description nicht für jede Seite händisch eingegeben werden müssen, sondern in den CMS Collections eine individuelle Metadaten-Vorlage erstellt werden kann. Außerdem ist in jedem Webflow Plan ein SSL-Zertifikat integriert. Das macht die Webseite sowohl für Suchmaschinen als auch für Besucher vertrauenswürdiger und attraktiver.

Die Verknüpfung mit Google Analytics funktioniert bei Webflow einwandfrei, sodass die Effektivität von SEO Maßnahmen genau nachvollzogen werden kann.

Zusammengefasst bietet Webflow also in Bezug auf SEO hervorragende Voraussetzungen:

  • sauberer, übersichtlicher Code, der für höheres Ranking bei relevanten Suchbegriffen sorgt

  • Meta-Daten können individuell angepasst werden

  • integriertes SSL-Zertifikat bei allen Webflow Webseiten

  • Verknüpfung mit Google Analytics ist einfach möglich.

Weitere Infos auf der offiziellen Website von Webflow, findest du hier

Webflow vs. WordPress

Webflow vs. WordPress

Da WordPress einer der beliebtesten Website-Builder ist, habe ich diese Software gewählt, um die Funktionen mit Webflow zu vergleichen.

WordPress ist eine bekannte Open-Source-Software, mit der vielfältige Webseiten erstellt werden können. Durch kostenpflichtige Plug-Ins können die Funktionen und Möglichkeiten erweitert und an die individuellen Bedürfnisse angepasst werden.

Klingt erstmal gut und funktioniert auch für viele Unternehmen und Webseitenbetreiber. Aber in den Plug-Ins liegen auch schon die ersten Probleme:

Sicherheit

Webflow ist ISO 27018 zertifiziert. Das heißt, egal was man in Webflow macht, es entspricht immer den aktuellen Sicherheitsstandards. Bei WordPress ist das nicht gegeben, sondern hängt vom jeweiligen Plug-In oder Theme ab. Die Plug-Ins stellen also ein gewisses Sicherheitsrisiko bei WordPress dar, dass es bei Webflow schlicht nicht gibt.

Bei Webflow ist auch in jedem Plan automatisch ein SSL-Zertifikat integriert, was bei WordPress vom Host abhängt. Man muss sich also selbst darum kümmern.

Code-Qualität

Die unterschiedlichen WordPress Themes und Plug-Ins sorgen dafür, dass der Code einer WordPress Webseite sehr unübersichtlich und wirr wird. Bei Webflow gibt es dieses Problem nicht. Der Code wird klar und sauber im Hintergrund geschrieben und wird nicht durch zahlreiche Plug-Ins überladen.

Ladezeiten

Je mehr Plug-Ins und Funktionen eine WordPress Webseite hat, desto schwieriger ist es auch, schnelle Ladezeiten beizubehalten. Webflow Webseiten haben dafür meist kontinuierlich gute Ladezeiten, was auch mit dem integrierten, professionellen AWS-Hosting zusammenhängt - Auch dann, wenn die Webseite viele Animationen und spezielle Funktionen hat.

Weitere Unterschiede zwischen Webflow und WordPress finden sich bei folgenden Punkten:

Designfreiheit

Auf diesem Punkt kann ich immer wieder herumreiten: Webflow bietet 100% individuelle Designfreiheit. Bei WordPress ist man dagegen an Themes gebunden und muss für jeden Kundenwunsch ein neues Plug-In installieren.

SEO

Natürlich können sowohl WordPress- als auch Webflow Webseiten gut ranken, wenn entsprechende SEO-Maßnahmen vorgenommen werden. Webflow bietet dabei aber von Anfang an eine bessere Grundlage, da der saubere Webflow-Code einfacher gecrawlt und eingeordnet werden kann als der WordPress-Code. Wie SEO-geeignet eine WordPress Webseite wird, hängt immer vom jeweiligen Plug-In ab. 

Animationen & Responsivität

Interaktive Funktionen und Animationen, die auf allen Geräten funktionieren, lassen sich bei Webflow auch ohne tiefgründige Coding-Kenntnisse super umsetzen.

Bei WordPress ist das ohne die Hilfe eines Entwicklers kaum möglich.

Benutzerfreundlichkeit

Das Management der verschiedenen Plug-Ins sorgt bei WordPress für eine gewisse Unübersichtlichkeit, sodass man hier nur vernünftig arbeiten kann, wenn man sich wirklich von Anfang an mit dem Projekt beschäftigt hat. Als UI & UX Designer ist es mir wichtig, das Projekt später so an meinen Kunden abgeben zu können, dass er es ohne meine Hilfe selbst weiterhin bearbeiten kann.

In WordPress ist das natürlich auch möglich, allerdings finde ich, dass Webflow deutlich benutzerfreundlicher aufgebaut ist. Statt alle irrelevanten Funktionen zu sehen, kann mein Kunde bei Webflow nach dem What you see is what you get Prinzip arbeiten: Die Bearbeitung der Webseite ist 100% visuell möglich. Außerdem ist das Einfügen neuer Elemente wie Blogartikel durch die CMS Collection Pages auch für Anfänger ganz einfach möglich.

Wartung der Webseite

Eine Webflow Webseite zu warten ist so einfach wie möglich: Technische Updates und Sicherheitsupdates werden immer automatisch ausgeführt, sodass die Seite auf dem neuesten Stand bleibt, ohne dass man etwas dafür tun muss. Bei WordPress müssen die einzelnen Plug-Ins dagegen händisch geupdated werden. Außerdem besteht immer die Gefahr, dass nicht mehr aktuelle Plug-Ins plötzlich nicht mehr gehen und die gesamte Webseitenstruktur nicht mehr funktioniert.

Auch das Einfügen neuer Inhalte ist mit dem Webflow CMS sehr übersichtlich und einfach.

Fazit

Um nochmal zusammenzufassen, was Webflow ist, kann und nicht kann:

Die Software ist ein visueller No-Code Website Builder mit integriertem CMS und Hosting. Anders als andere Website Builder basiert Webflow nicht auf Templates und vorgefertigten Bausteinen, sondern ermöglicht 100% Designfreiheit und damit komplett individuelle Webseiten.

Das sind die klaren Vorteile:

  • vollständige Designfreiheit

  • Animationen und responsives Design ohne Code-Kenntnisse

  • sehr sauberer, lesbarer Code wird automatisch im Hintergrund geschrieben

  • sicheres, ISO 27018 zertifiziertes Hosting

  • benutzerfreundliches CMS

  • automatische technische Updates und Sicherheitsupdates

  • Kunden können die Pflege der Seite selbst übernehmen

  • transparente Preisstruktur

Der Punkt, der Webflow aber am meisten von allen anderen Website-Builder-Softwares abhebt, ist die aktive Community und die stetige Weiterentwicklung der Software.

Mit der Webflow University, den Community Foren und dem zuverlässigen Webflow Support lassen sich nahezu alle Fragen und Probleme lösen. 

Webflow nimmt sich das Community Feedback zu Herzen und entwickelt die Software so weiter, dass unsere dringendsten Probleme behoben werden. Die Software wird also stetig immer besser. Aktuelle Limitierungen sind:

  • CMS Kapazitäten: Aktuell ist bei 100 Unterseiten unter einer Domain das Limit von Webflow erreicht. Mit Webflow Enterprise ist etwas mehr möglich, aber sehr große Webseiten kommen hier trotzdem an ihre Grenzen

  • Mehrsprachige Webseiten können nur mithilfe von Integrationen anderer Programme erstellt werden. In Webflow selbst ist das noch nicht möglich.

  • Weitere Limitierungen findet man auf der offiziellen Website von Webflow.

Flo Steinle

Über den Autor

Flo Steinle ist leidenschaftlicher UX & UI Designer, Webdesigner und Webflow Experte aus Düsseldorf. Seit vielen Jahren ist Flo auf die Konzeption und Gestaltung digitaler Produkte spezialisiert und hat schon für namhafte Kunden wie Fressnapf und Finanzfluss arbeiten dürfen. In seinem Blog teilt er persönliche Erfahrungen und Tipps rund um die Themen Design und Webflow.