Was ist Webflow? Eine umfangreiche Übersicht

Was ist Webflow - kurz erklärt

Webflow ist eine Software as a Service - also ein jederzeit erreichbares Online Tool - mit dem man responsive Webseiten direkt im Browser bauen kann. Es richtet sich an Webdesigner, die ihre visuellen Ideen eigenständig in eindrucksvolle Webseiten übersetzen wollen, ohne dafür selbst Code schreiben zu müssen. Das erledigt das Tool nämlich im Hintergrund. Während der User die Website Klick für Klick visuell am Rechner baut, generiert Webflow vollautomatisch den  HTML-, CSS- und  Javascript-Code.

Für wen ist Webflow geeignet?

Grundsätzlich ist Webflow für jeden geeignet, der selbstständig eine eindrucksvolle responsive Webseite bauen möchte, ohne dafür eine Zeile Code schreiben zu müssen. Im Gegensatz zu anderen Website-Buildern lässt Webflow alle Freiheiten in der Gestaltung der Online Präsenz. Du kannst hier wirklich alles individuell anpassen. Starre Templates und vorgegebene Styling Vorgaben findet man hier nicht. Die Design-Welt des WWW steht einem völlig offen. Das ist auch der Grund, warum Webflow vorrangig auch von vielen Designern genutzt wird. Web Designer sind üblicherweise auf einen Programmierer angewiesen, der ihre visuellen Website Ideen realisiert. Mit Webflow ist es den Design-Profis eigenständig möglich, ihre visuellen Ideen in eine Webseite zu übersetzen - ganz ohne dabei Kompromisse eingehen zu müssen. Allerdings haben all diese Vorteile auch ihren Preis: Webflow ist etwas komplizierter zu bedienen als andere Website Builder wie etwa Wix oder Squarespace. Allerdings verläuft die Lernkurve sehr steil. Wer sich also die Zeit nimmt, sich in Webflow reinzufuchsen, kann auf lange Sicht selbst mehr verdienen und wird sich über wunderbare Ergebnisse freuen dürfen.

Ist Webflow einfach zu bedienen?

Wer in der Welt von Adobe, Figma oder Sketch zu Hause ist, wird sich in Webflow schnell sehr wohlfühlen. Web Designer können daher recht intuitiv mit der Arbeit in Webflow starten. Denn: Der Designer von Webflow funktioniert ähnlich wie die gängigen Bildbearbeitungsprogramme. Für alle anderen User sind die ersten Schritte mit Webflow zunächst etwas ungewohnt. Allerdings gibt es zahlreiche Online Tutorials und die Webflow University, um sich die ersten Basics anzueignen. So ist ein schneller Einstieg möglich. Danach gilt: Learning by doing.
Tipp: Wenn du Webflow von der Pike auf lernen möchtest, schau bei meinem chronologisch aufgebauten Webflow Onlinekurs vorbei. Nachdem du die Schulung absolviert hast, bist du sicher in der Anwendung von Webflow.

Designer, CMS, Editor und Hosting

Webflow unterteilt seine Funktionen zum Bearbeiten von Vorlagen und zum Erstellen von Webseiten in vier grundlegende Kategorien: Den Designer, das CMS und den Editor.

Was ist der Webflow Designer?

Der Webflow Designer kann als das Herzstück des Website Builders bezeichnet werden. Hier bekommst du die volle Leistungsfähigkeit von CSS, HTML und JavaScript in einer visuellen Oberfläche.
Innerhalb des Designers klickst du dir deine Website quasi zusammen. Ordne Blöcke an, ergänze deine Webseite um spannende Animationen und passe alles nach deinen Wünschen an. Währenddessen erstellt der Designer hinter den Kulissen sauberen, semantischen Code für eine optimierte Webseite.
Wenn du den Code eigenständig optimieren möchtest, solltest du wissen, dass Webflow alle in CSS3 und HTML5 enthaltenen Funktionen enthält. Dazu gehören das Boxmodell, 3D-CSS-Transformationen, benutzerdefinierte Übergänge und Flexboxen. Auch die Umsetzung  von Animationen - die durch Scrollen, Klicken oder das Ladeverhalten von Webseiten ausgelöst werden - ist möglich. Und das ganz ohne JavaScript-Kenntnisse.

Wie funktioniert das Webflow CMS?

Webflow ist ein vollständiges Content-Management-System (CMS) à la Drupal, Magento oder WordPress und zugleich ein leistungsstarker Site-Designer und -Builder.
Der Clou: Alle Inhalte, die du erstellst, sind nicht durch Vorlagen, Blog-zentrierte Inhaltsstrukturen oder komplexe Programmiersprachen eingeschränkt. Stattdessen bietet dir Webflow Schemata, die du easy in deine Webseite einbinden kannst. In Sachen Content Creation bist du absolut frei.
Zusammengefasst: Das Webflow CMS bietet dir alle Funktionen, die du dir von solch einem System nur wünschen kannst. Sicherlich kannst du mit Webflow auch Webseiten ohne das CMS bauen - doch wenn du regelmäßig neuen Content auf deiner Onlinepräsenz veröffentlichst, ist das integrierte Content Management System ein echter Segen.

Was ist der Webflow Editor?

Webflow behauptet, dass das Hinzufügen von neuem Content so einfach ist wie das Ausfüllen eines Formulars. Wann immer du bereit bist,  Änderungen an deiner Webseite vorzunehmen, kannst du das mit nur wenigen Klicks tun. Durch die Live-Vorschau erwarten dich nach der Veröffentlichung deiner neuen Inhalte keine bösen Überraschungen.
Da Webflow den Content von den zugrunde liegenden Webseiten-Einstellungen trennt, kannst du jederzeit Änderungen an deiner Webseite vornehmen, ohne dabei Sorge haben zu müssen, dass Teile deiner Webseite beschädigt werden. Außerdem kannst du mit weiteren Usern gemeinsam an einer Webseite arbeiten. Der detaillierte Versionsverlauf zeigt dir genau an, wer was wann geändert hat.

Wie bearbeiten meine Kunden ihre Webseite?

Webflow ist so aufgebaut, dass deine Kunden ihre Webseite jederzeit bearbeiten können, ohne das grundlegende Layout zu zerstören oder unfreiwillige Änderungen vorzunehmen. Erreichbar ist die Kunden-Oberfläche über einen eigenen Login deiner Kunden (sie brauchen dafür nur eine E-Mail Adresse und ein selbst vergebenes  Passwort).
Nach dem Login sehen deine Kunden ihre Webseite so, wie sie auch ihren Besuchern angezeigt wird. Mit einem Unterschied: Alle Textfelder, Buttons, Links, Headlines und Bilder lassen sich bearbeiten. Die getätigten Änderungen sind sofort auf der Seite sichtbar, ohne direkt veröffentlicht zu werden.
Ist dein Kunde eingeloggt, erscheint außerdem am unteren Rand der Webseite eine Leiste. Über den Reiter Pages lassen sich die einzelnen Seiten aufrufen und unter Settings individuelle SEO-Änderungen vornehmen.
Auch das Hinzufügen von Blogbeiträgen ist durch den Kunden möglich. Hierzu wählt er in der unteren Leiste Collections. Dort lassen sich Blogbeiträge hinzufügen, FAQs bearbeiten und vieles mehr.

Muss ich mich bei Webflow um das Hosting kümmern?

Webflow bietet dir zu deiner Webseite das passende Hosting-Paket. Das Coole daran: Egal wie viel Traffic deine Webseite verzeichnet - sie läuft und läuft und läuft. Denn Webflow setzt auf eine Hosting-Technologie, an der mehr als 100 globale Rechenzentren beteiligt sind. Die Rechenzentren werden von Fastly und Amazon CloudFront betrieben - zwei etablierten Cloud-Computing-Diensten.
Die durchdachte Hosting-Strategie sorgt dafür, dass deine Webseite in Millisekunden lädt und in 99,99 Prozent der Fälle erreichbar ist. Zusammengefasst bedeutet das für dich: Du hast eine Webseite, die unabhängig vom Traffic exzellent zu erreichen ist, aufgrund der schnellen Ladezeiten die Voraussetzung für gutes SEO mitbringt und die auch in Sachen Sicherheit überzeugt. SSL-Zertifikate sind ebenfalls enthalten.

Kann ich mit Webflow responsive Webseiten erstellen?

Responsive Webseiten sind heutzutage ein Muss. Schließlich kommt der meiste Traffic mittlerweile von mobilen Endgeräten wie Tablets oder Smartphones. Für solche Geräte sollten Webseiten in der Ansicht optimiert sein. Webflow verfügt über allen Funktionen, um die harte Arbeit rund um die responsive Gestaltung so einfach wie möglich zu gestalten.
Im Webflow Designer findest du am oberen Bildschirmrand eine Leiste, die dir ermöglicht, deine Webseite aus Desktop-, Smartphone- und Tablet-Sicht anzusehen. Webflow hat bereits viele Elemente responsiv gestaltet. Dennoch kann es sein, dass einzelne Elemente noch verschoben oder angepasst werden müssen, damit das finale Ergebnis auf den mobilen Endgeräten noch schöner aussieht. Passe Bilder an, ändere Schriftgrößen und vieles mehr. Alles individuell für den ausgewählten Breakpoint.

Wie sauber ist der Code, der von Webflow im Hintergrund geschrieben wird?

Webflow schreibt sauberen, semantischen Code, der von allen Browsern verstanden und auch gemocht wird. Wer mit Webflow arbeitet, arbeitet sehr nah am Web und viele Programmierer sagen, dass es wirklich beeindruckend ist, wie sauber der Code im Hintergrund aufgebaut ist.

‍

Was fortgeschrittene Webdesigner lieben: mit Webflow kannst du zu jederzeit eigenen Code hinzufügen. So lassen sich einfach externe Erweiterungen oder JavaScript Plugins hinzufügen um die Website noch mächtiger zu machen. Auch eigener CSS Code ist zu jederzeit möglich.

Die Webflow API ermöglicht dir, das Webflow CMS via Notion zu bearbeiten und zu managen oder Webflow mit Integromat, Zapier oder Airtable zu verknüpfen.

Wie schnell ist eine Webflow Website?

Im Vergleich zu anderen Content Management System ist eine Webflow Website sehr performant. Eine in Webflow gebaut Seite liefert schon von Haus aus sehr gute Google Page Speed Ergebnisse (über 80 auf Mobile und Desktop). Mit ein paar Tipps, worauf man achten muss, kannst du die Score schnell auf über 90 bringen. Schau es dir in folgendem Video selbst an:

‍

Ist Webflow SEO freundlich?

Webflow ist von Haus aus sehr SEO freundlich aufgebaut. Auch die schnellen Ladezeiten und der sauber geschriebene Code wird von allen Suchmaschinen gemocht. Es gibt zusätzlich einige Möglichkeiten, deine Website noch weiter für Suchmaschinen zu optimieren. Ich habe dir hier 11 SEO Tipps zusammengefasst. Somit kannst du Meta Title und Meta Description ändern, eine logische Navigationsstruktur anlegen, Code minifizieren, die Website mit der Google Search Console verknüpfen, logische Alt-Texte vergeben, 301 Redirects anlegen usw.

Ist Webflow weit verbreitet?

Keine Frage: WordPress ist und bleibt unangefochtener Marktführer unter den CMS. Mit mehr als 65 Prozent Marktanteil ist WordPress mit Abstand die meistgenutzte Lösung unter den Content Management Systemen. Doch Webflow holt auf. Seit seiner Gründung verzeichnet das Unternehmen steil ansteigende User-Zahlen. Auf der NoCode Konferenz 2021 gab Webflow außerdem bekannt, das seit der letzten Konferenz in 2020 die Webflow Community über eine Millionen Websites veröffentlicht hat. Zudem sind 2021  rund 1 Millionen User zur Webflow Community hinzugekommen. Ingesamt kann Webflow nun auf mehr als 3,5 Millionen User blicken (Stand 2021).

Was kostet Webflow?

Du kannst jederzeit kostenfrei deine Arbeit mit Webflow beginnen. So lange bleibt dein Webflow-Konto im Teststatus. Dennoch hast du die volle Kontrolle über deine Designs und kannst nach Herzenslaune Webflow und den Designer kennenlernen. Es ist dir sogar möglich, deine Webflow Webseite zu veröffentlichen - allerdings dann auf einer Webflow-Subdomain.

Möchtest du die Website dagegen unter deiner eigenen Domain veröffentlichen und wirkliche ALLE Funktionen nutzen, die Webflow bietet (etwa die Möglichkeit, die Website als HTML Code zu exportieren), benötigst du einen kostenpflichtigen Plan. Diesen Plan kannst du monatlich oder im Voraus für ein komplettes Jahr bezahlen. Wenn du dich für letztere Option entscheidest, bekommst du einen Rabatt.

Deinen Hosting-Plan kannst du jederzeit kündigen. Webflow bietet allerdings keine Rückerstattungen an - dein Plan bleibt bis zum Ende deines aktuellen Abrechnungszeitraums aktiv. Solltest du eine Webflow Webseite haben und deinen Plan kündigen, hast du natürlich weiterhin Zugriff auf die Webseite - allerdings im Rahmen des kostenfreien Testplan.
Bei der Auswahl eines kostenpflichtigen Abonnements hast du verschiedene Optionen. Es gibt Angebote für Einzelpersonen oder auch Teams. Wenn du eine Einzelperson bist, die nur eine Webseite benötigt, musst du alleine für das Hosting bezahlen. Es gibt drei verschiedene Pläne, aus denen du dann wählen kannst. Sie unterscheiden sich in der Anzahl der pro Monat erlaubten Besucher und der Anzahl der Formulareinreichungen, die du erhalten kannst. Wichtig: Der Basic Plan enthält keine CMS-Funktionen.
Bist du Designer oder Freiberufler, kannst du mit dem Lite- oder Pro-Account Plan alle Webflow-Tools zum Erstellen von Webseiten verwenden. Du hast außerdem die Möglichkeit, den Webseiten-Code zur Verwendung in anderen Umgebungen zu exportieren. Außerdem kannst du mit der Pro-Variante unbegrenzt viele Projekte in Webflow umzusetzen.

Da das Thema Webflow und Preise für viele etwas kompliziert erscheint, habe ich extra dafür ein kompletten Beitrag verfasst: Webflow Preise einfach erklärt.

Gibt es bei Webflow Templates mit denen man einfach starten kann?

Wie bei den meisten Website-Buildern kannst du auch in Webflow mit einem Template starten. Du hast die Wahl zwischen hunderten professionell gestalteten Templates.

Jedes dieser Templates kannst du so anpassen, dass es perfekt zu deiner Marke und deinen Zielen passt (du kannst das komplette Design anpassen!). Webflow selbst bietet mehr als 25 kostenlose Templates an. Egal ob E-Commerce-Site, Blog oder Portfolio-Webseite - dir stehen zahlreiche Vorlagen zur Verfügung.

Lassen sich mit Webflow leicht Animationen in meine Webseite integrieren?

Wenn du dir einige Webflow Webseiten ansiehst (hier habe ich dir einige meine Favoriten als Inspiration vorgestellt), wirst du schnell feststellen, dass auf Webflow Webseiten häufig richtig coole und ansprechende Animationen zu finden sind. Das liegt auch nahe, denn mit Webflow lassen sich super einfach Animationen und Interaktionen in Webseiten integrieren. Einen Überblick zu gängigen Webflow Animationen bekommst du im Video:

Ich selbst bin der Überzeugung, dass die Zukunft des Web-Designs Storytelling ist. Und das ist nur mit schicken Animationen möglich. Webflow stellt alle Funktionen zur Verfügung, damit du visuell Animationen realisieren kannst - ganz ohne Code. Dabei handelt es sich super häufig um Scrolly-Telling - also Animationen, die sich aufgrund des Scroll-Verhaltens auf einer Webseite aufbauen. Beispiele sind Bilder die während demScrollen wachsen, schrumpfen oder aufklappen. Aber auch Schriften die langsam ein- und ausfaden. Hovereffekte lassen sich ebenso einfach realisieren.
Übrigens: Einige coole Webseiten-Projekte mit eindrucksvollen Animationen kannst du einfach klonen und für deinen eigenen Webflow Projekte verwenden.

Wie ist Webflow im Vergleich zu WordPress oder Squarespace?

Webflow schlägt eine Brücke zwischen den leicht zu bedienenden aber funktionell eingeschränkten Website Buildern und komplexen CMS, bei denen man zum Teil coden muss.

Besonders häufig muss sich Webflow dem Vergleich mit WordPress stellen. WordPress ist das weltweit am häufigsten genutzte CMS, was unter anderem in seiner Kostenfreiheit begründet liegt. Im Gegensatz zu Webflow bist du in WordPress in Sachen Designfreiheit aber etwas eingeschränkter. Zudem ist der Webflow Code, der beim Bauen der Webseite im Hintergrund geschrieben wird, deutlich cleaner als der von WordPress. Dieser ist aufgrund der zahlreichen verfügbaren Plugins häufig aufgebläht, was zu Lasten von Webseiten-Ladezeiten und SEO geht. Ein weiterer großer Unterschied zwischen Webflow und WordPress: Webflow Webseiten lassen sich Klick für Klick visuell am Bildschirm bauen. Das ist bei WordPress nur möglich, wenn man ein Baukasten-Tool im Einsatz hat. Zu den Preisen: WordPress ist grundsätzlich kostenfrei. Webflow ist dagegen kostenpflichtig, sobald du die Veröffentlichung deiner Webseite angehen möchtest.

Ein entscheidender Unterschied zwischen WordPress und Webflow ist die Sicherheit. Ein Beitrag dazu von mir: Webflow oder Wordpress – Welches System ist sicherer? Als Open Source-Software ist WordPress beliebtes Angriffsziel für Hacker. Hier musst du dich dringend um die entsprechenden Sicherheitseinstellungen bemühen. Webflow kommt dagegen standardmäßig mit zahlreichen Sicherheits-Features wie einem kostenfreien SSL Zertifikat und einem internen Team, das schnell auftretende Sicherheitslücken schließt.

Webflow und Squarespace sind beides Website Builder, mit denen sich tolle Ergebnisse ohne Coding erzielen lassen. Beide lassen das visuelle Zusammenbauen deiner Webseite zu. Allerdings gibt es auch deutliche Unterschiede zwischen Squarespace und Webflow. Webflow watet mit deutlich mehr Individualisierungsmöglichkeiten für deine Webseite auf, ist dafür aber auch komplexer in der Bedienung. Squarespace ist daher erste Wahl für Einsteiger und Personen, die sich nicht lange mit der Gestaltung ihrer Webseite aufhalten wollen und das auch in Zukunft nicht möchten. Für professionelle Web-Designer und Agenturen ist dagegen Webflow erstes Mittel der Wahl.

Inspiration: Welche Webseiten wurden schon mit Webflow umgesetzt?

Wenn du dir die Zeit nimmst und ein wenig durch die Webseiten stöberst, die bereits mit Webflow umgesetzt wurden, wirst du auf einige grandiose Ergebnisse stoßen. Besonders eindrucksvoll sind die Website Animationen, die mit Webflow möglich sind. Hier habe ich dir 11 kreative Agenturseiten zusammengestellt. Mit dabei sind kleine und mittelständische Unternehmen.

Außerdem gibt es richtig schicke Webflow Portfolio Webseiten von Fotografen, Website Designern und einigen anderen Kreativen. Aber nicht nur EinzelkämpferInnen, sondern auch Agenturen vertrauen auf die Power von Webflow, um richtig coole Webseiten zu bauen.

Gibt es bei Webflow schnell Hilfe und Support?

Da es sich bei Webflow um eine kostenpflichtige Lösung handelt, bieten die Webseiten-Experten einen professionellen Support durch das fest angestellte Webflow Team an. Anfragen kannst du direkt über die Webflow Webseite versenden. Meist bekommst du innerhalb weniger Stunden einen Antwort.
Zugleich profitieren Webflow User von der stetig wachsenden Community, die sich gerne gegenseitig unterstützt und inspiriert. Wirf außerdem einen Blick in das Webflow Forum. Es ist riesig und bietet Antworten auf nahezu alle Fragen, die im Zusammenspiel mit Webflow auftreten können.

Wo kann ich Webflow lernen?

Wenn du jetzt richtig heiß darauf bist, mit Webflow zu starten, wirst du schnell zahlreiche Tutorials auf YouTube und auf der Webflow Webseite finden. Auch ich habe schon etliche kostenlose Tutorials zu Webflow veröffentlicht. Sie helfen dir bei deinen ersten Schritten mit dem Website Tool und bieten dir auch eine konkrete Anleitung für spezielle Funktionen des Website Builders.

Ansonsten kann ich dir meinen Webflow Onlinekurs ans Herz legen. Hier lernst du den Umgang mit Webflow Schritt für Schritt. Angefangen bei einer leeren weißen Seite bis hin zu imposanten Ergebnissen mit richtig schönen Animationen.

Alternativ findest du in der Webflow University ebenfalls eine umfangreiche Online-Schulung zu Webflow - allerdings auf englischer Sprache.