aktualisiert-am
Aktualisiert am: 23. November 2021
lesezeit
Lesezeit: ca. 40 Minuten

Webflow: Professionelle Website Entwicklung, CMS und Hosting aus einer Hand

armin-ramoser
Verfasst von:
Armin Ramoser
Geschäftsführer von Ramoser Webdesign & zertifizierter Webflow-Experte

Zu Beginn eines Website-Projekts stellen sich immer viele Fragen, besonders wichtig: Mit welcher Software wird die Website erstellt, wo wird sie gehostet und welches CMS wird genutzt, um die Inhalte der Website unkompliziert zu verwalten? Webflow bietet eine Lösung dafür, die wir in den vergangenen zwei Jahren schätzen und lieben gelernt haben, sowohl für uns persönlich, als auch in der Zusammenarbeit mit unseren Kunden. 

In diesem Ratgeber lernen Sie was Webflow ist, für wen es sich wirklich lohnt und warum es unserer Meinung nach in vielen Fällen die aktuell beste Lösung ist, um professionelle und vor allem individuelle Website-Projekte zu realisieren.

webflow

Welche Tools man für die Realisierung einer neuen Website verwenden sollte, hängt natürlich stark von dem gewünschten Endergebnis ab, in einigen Fällen reicht schon ein simpler Baukasten wie Wix oder Jimdo.

Sobald die Website allerdings komplexer wird und z.B. online ein Unternehmen repräsentiert, die Werte der eigenen Marke kommunizieren soll und als erste digitale Anlaufstelle für potentielle Kunden, Geschäftspartner oder Mitarbeiter dient, die es zu überzeugen gilt, muss man auf professionellere Lösungen zurückgreifen, um sich wirklich von der Konkurrenz abzuheben. 

Für die Umsetzung maßgeschneiderter Websites sind oft Programmier- und andere Fachkenntnisse nötig, was schnell sehr teuer werden kann und meist auch lange dauert, wenn man professionelle Webdesigner und Webentwickler mit dem Projekt beauftragt.

Es geht auch ohne Programmieraufwand und mit geringem Budget, dabei ist die erste Wahl meist Wordpress in Kombination mit verschiedenen Plugins von Drittanbietern und externem Hosting - eine relativ simple und günstige Lösung, die sehr beliebt ist, aber an vielen Stellen auch an Ihre Grenzen stößt und frustrieren kann. Auch hier sind dann sehr oft zusätzliche Anpassungen eines Programmierers nötig, um das gewünschte Ergebnis zu erzielen.

In dieser Welt aus simplistischen Website-Baukästen, aufwändigen Eigenentwicklungen und unhandlichen Open Source CMS-Lösungen mit Wordpress bietet Webflow eine großartige Hybrid-Lösung, die das Leben von Webdesignern und deren Kunden deutlich einfacher macht. Genau aus diesem Grund suchen immer mehr Unternehmen im deutschsprachigen Raum nach einer Webflow Agentur für Ihre Website. Damit Sie begreifen, welches Potential in der Nutzung von Webflow eigentlich schlummert (sofern man bereit ist sich intensiver damit zu befassen), haben wir diesen Ratgeber verfasst.

Hören Sie lieber zu, als selbst zu lesen? Dann schauen Sie sich einfach unsere Webflow Präsentation für Einsteiger als Video an (Dauer: 49 Minuten): 

Präsentation aus dem Video herunterladen

Was ist Webflow und wofür ist es geeignet?

Kurz gesagt: Webflow erlaubt es Designern, maßgeschneiderte Websites in sehr kurzer Zeit und ohne fortgeschrittene Programmierkenntnisse (es reichen die Grundlagen von HTML und CSS) professionell zu realisieren - Stichwort: Visuelles Programmieren
webflow-website-screenshot
Webflow Website (Quelle: webflow.com)

Der Code (HTML, CSS und JavaScript) wird vollautomatisch geschrieben, während der Designer die visuelle Oberfläche von Webflow bedient. Ein sehr intuitives CMS und schnelles, sicheres Hosting der Website sind ebenfalls integriert. Damit steht alles bereit, das zum Erstellen, Betreiben und Aktualisieren einer professionellen Website nötig ist, ohne dass weitere Programmierer, Plugins, Hosting-Anbieter oder andere Dienstleister nötig sind.

Die visuelle Entwicklungsoberfläche, das Hosting und das CMS stammen also von ein und demselben Anbieter.

Da Webflow aber kein simpler Website-Baukasten ist, sondern diese visuelle Oberfläche zum Erstellen der Website sehr nah an der Philosophie von HTML, CSS und JavaScript gebaut wurde, ist es alles andere als einsteigerfreundlich. Geeignet ist es deshalb vor allem für Kundenprojekte von Webdesignern und Agenturen mit entsprechender Erfahrung und Grundkenntnissen der Websprachen, oder für Marketing-Teams in größeren Unternehmen, die z.B. individuelle Landingpage-Layouts selbst umsetzen möchten. Ungeeignet ist es vor allem für Laien, die in Eigenregie eine kleine Homepage bauen wollen, wo die Priorität auf "möglichst schnell, unkompliziert und billig" liegt.

Was Design, Layout und Animationen angeht, lässt Webflow fast keine Wünsche offen. Man ist völlig unabhängig von Themes und Vorlagen, wie man sie zum Beispiel von Wordpress kennt und kann seine ganz eigenen optischen Vorstellungen der Website uneingeschränkt und ohne fortgeschrittene Programmierkenntnisse realisieren, auch wenn diese Vorstellungen sehr komplex und einzigartig sind - ideal für die Entwicklung individueller Designs (die z.B. mit Figma oder Sketch erstellt wurden), für die kein Template passt.

Warum sollte man mit Webflow arbeiten?

Liste mit Gründen, die für das Arbeiten mit Webflow sprechen
Infografik mit drei starken Gründen, die für das Arbeiten mit Webflow sprechen

Es spricht sehr vieles für das Arbeiten mit Webflow, die Liste ist lang. Erwähnenswert sind dabei vor allem die Vorteile aus der Sicht des Endkunden und seines Webdesigners bzw. der Agentur, welche die Website erstellt. Auch für Marketing-Teams in größeren Unternehmen bringt Webflow einige attraktive Vorteile mit sich. Nicht zuletzt für Suchmaschinenoptimierung (SEO) ist Webflow durchaus interessant. Was das im Detail bedeutet, erfahren Sie in den folgenden Unterkapiteln.

erleichterung-der-website-erstellung-durch-webflow
Verschlankung des Prozesses eines Website-Projekts durch Webflow (Quelle: medium.com/@JanLosert)

Vorteile aus der Kunden-Perspektive

  • Kinderleicht an bestehenden Inhalten arbeiten: So einfach, wie in einem Word Dokument. Das bedeutet, Texte und Bilder können direkt auf der Website getauscht, bearbeitet oder aktualisiert werden, ohne technische Kenntnisse oder Mitwirken des Webdesigners und komplett visuell, ohne Backend. Das spart Zeit, Kosten und Nerven - vor allem für den Endkunden, der die Website in Auftrag gegeben hat.
  • Einfaches Hinzufügen neuer Inhalte: Ein dynamisches CMS ermöglicht es, Website-Inhalte die immer gleich aufgebaut sind (z.B. Blogbeiträge, Referenzen, Stellenausschreibungen, neue Produkte, etc.) selbst unkompliziert zu erstellen, ebenfalls ohne Mitwirken des Webdesigners und komplett visuell. Der Webdesigner kann dabei im Vorfeld genau festlegen, aus welchen Inhalten z.B. ein Blogbeitrag bestehen soll (Titel, Titelbild, Autor, etc.) und bestimmt das Design, wie ein Blogbeitrag optisch auf der Website aussehen soll.
  • Schnelles, sicheres und zuverlässiges Hosting: Das bringt schnelle Ladezeiten, sichere Datenübertragung und Pluspunkte bei Suchmaschinen mit sich. Durch den praktisch nicht vorhandenen Wartungsaufwand bei Webflow durch automatische Updates und Backups spart der Kunde zusätzlich monatliche Wartungskosten der Website, die andernfalls entstehen würden.
  • Unabhängigkeit vom Webdesigner bzw. der Agentur: Webflow Projekte können ganz einfach auf andere Webflow Accounts übertragen werden, auch ein Export des Codes ist möglich. Damit bleibt die Website auf Wunsch immer im Besitz und der vollen Kontrolle des Kunden. Der Kunde ist damit unabhängig von der Agentur bzw. dem Webdesigner und erwirbt ein fertiges Produkt ohne Abhängigkeitsverhältnis (Beispiel: Wenn einmal eine kleine Änderung an der Website fällig ist, muss der Kunde dafür nicht nochmals den Webdesigner kontaktieren und für die Änderung bezahlen, sondern kann das eigenständig, ohne technische Kenntnisse und ohne Kosten durchführen).

Vorteile aus der Agentur- bzw. Webdesigner-Perspektive

  • Uneingeschränkte Design-Möglichkeiten: Keine Einschränkung auf Templates und Standard-Vorlagen, es können sehr spezielle und einzigartige Layouts und Animationen realisiert werden, ohne auf fortgeschrittene Programmierkenntnisse oder externe Plugins bzw. weitere Dienstleister angewiesen zu sein, die man zusätzlich bezahlen muss.
  • Schnellere und günstigere Umsetzung individueller Website-Projekte: Wo vorher ein Designer und ein Programmierer nötig waren um eine maßgeschneiderte Website umzusetzen, reicht heute Webflow und ein Designer mit Grundkenntnissen in HTML und CSS völlig aus. Visuelles Programmieren einer Website mit Webflow ist für Code-Neulinge deutlich schneller und intuitiver als klassisches programmieren "von Hand", wo Zeile für Zeile Code getippt werden muss. 
  • Alle Kundenprojekte an einem Ort verwalten: Im Dashboard von Webflow sieht man alle Kundenprojekte auf einen Blick, kann Ordner für Projekte erstellen und alle Kundenaufträge an einem einzigen Ort verwalten, wenn man das möchte. Auf Wunsch des Kunden kann man ein Projekt auch auf den Webflow Account des Kunden übertragen und vorher eine Sicherungskopie im eigenen Account anlegen.
  • Integrierte Kundenabrechnung: Bietet man monatliche Zusatzbetreuungen für den Kunden an (z.B. SEO, Einpflegen von Inhalten, etc.) können diese direkt über Webflow abgerechnet werden. Der Kunde bekommt automatisiert eine Rechnung dafür, deren Höhe man selbst festlegen kann. Dieser individuelle Aufschlag wird dann zusammen mit den Webflow-Hostingkosten von der Kreditkarte des Kunden abgebucht. Damit entfällt zusätzlicher Buchhaltungs- und administrativer Aufwand für monatliche Retainer.
  • Konzipiert für die Zusammenarbeit von Webdesignern und Agenturen mit Kunden: Neben dem Dashboard und der automatischen Kundenabrechnung bietet Webflow viele weitere Funktionen, die das Zusammenarbeiten mit Kunden stark vereinfachen und dadurch Kosten auf beiden Seiten sparen, da viele Teile der Software speziell für den Zweck dieser Zusammenarbeit entwickelt wurden.

Vorteile aus der Perspektive von Online-Marketing Teams in großen Unternehmen

  • Volle Kontrolle über interne Marketing Webseiten bzw. Landingpages: Marketing Websites und Landingpages können in extrem kurzer Zeit und ohne fortgeschrittene Programmierkenntnisse von Marketing-Mitarbeitern selbst umgesetzt, bearbeitet und veröffentlicht werden, ohne die Limitierungen und zum Teil sehr hohen Kosten, die man von klassischen Landingpage-Tools kennt. Das entlastet die Entwickler-Abteilung im Unternehmen enorm und ermächtigt Online-Marketing Abteilungen, ihre Landingpages eigenständig umzusetzen und laufend zu optimieren.
  • Unabhängigkeit vom Entwickler-Team: Für spezielle Layout und Design-Wünsche einer Website ist es nicht mehr notwendig, interne Entwickler damit zu beauftragen, die meist keine Zeit dafür haben und Ihre Ressourcen für komplexere Probleme einsetzen wollen. Das Marketing Team ist damit bei der Erstellung und Verwaltung von neuen Marketing-Seiten völlig unabhängig von dem internen Entwicklerteam, was viel Zeit und Nerven spart.

Vorteile aus der SEO-Perspektive

  • Einfacher Zugriff auf alle grundlegenden SEO-Einstellungen: Title-Tag, Meta Description, Alt-Tags und alle weiteren wichtigen HTML-Tags, Indexierungs- und Sitemap-Einstellungen, die robots.txt sowie 301 Redirects, etc. sind schnell, unkompliziert und visuell zugänglich und können einfach bearbeitet werden, ohne auf Plugins Dritter angewiesen zu sein oder Code schreiben zu müssen. Sehr praktisch für klassische Maßnahmen der Onpage-Optimierung. 
  • Sauberer, semantischer Code: Da keine Plugins von Dritten nötig sind und die Software nah am Code gebaut wurde, produziert Webflow sehr sauberen, semantischen Code. Das macht sich sehr positiv bemerkbar bei den Ladezeiten sowie der allgemeinen Performance der Website. Natürlich gibt das auch viele Pluspunkte bei Suchmaschinen.
  • Erstklassiges integriertes Hosting: SSL-Verschlüsselung ist bereits kostenlos integriert, CDN und professionelles Hosting über AWS-Server stellen eine ausgezeichnete Performance und Verfügbarkeit der Seite sicher, ganz egal von welchem Standort der Nutzer die Seite aufruft. Über den passenden Hostinganbieter, Wordpress und Plugin-Installationen etc. muss man sich also keine Gedanken machen.
  • Flexibles Content-Design & handliches CMS: SEO lebt von erstklassigem Content und ansprechendem Content-Design sowie optimierter UX und UI. Egal welcher Content-Typ gebraucht wird (Blogartikel, ausführliche Ratgeber, Case-Studies, Produktseiten, umfangreiche Glossare etc.), das flexible CMS von Webflow erlaubt es, ganz ohne Plugins Custom Fields anzulegen und selbst bis ins kleinste Detail zu bestimmen, wie z.B. eine Ratgeber-Seite oder ein Blogartikel aufgebaut ist und welches Design dafür verwendet werden soll. Unkompliziertes Content Management verschiedenster Content-Typen, verpackt in einem sehr nutzerfreundlichen User-Interface, das auch Kunden Spaß macht. Damit wird das Erstellen neuer Inhalte und das Bearbeiten bestehender Inhalte so einfach und effizient wie man es sich wünscht.

Wer sollte mit Webflow arbeiten?

Infografik mit typischen Fällen, wo Webflow lohnenswert ist oder nicht
Infografik mit typischen Fällen, wo Webflow lohnenswert ist oder nicht

Webflow ist mit Sicherheit nicht für jeden geeignet. Vor allem wenn es darum geht, als Laie möglichst schnell, unkompliziert und billig eine kleine Website zu erstellen (am besten noch selbst) ist Webflow ganz sicher nicht das richtige Tool. Hierfür gibt es andere Anbieter, die für diesen Fall deutlich besser geeignet sind (z.B. Wix oder Jimdo).

Sehr gut geeignet ist Webflow für Menschen, die sich in einem der folgenden Punkte wiedererkennen:

  • Reine Webdesigner (also keine Entwickler) mit Grundkenntnissen in HTML und CSS (idealerweise auch Javascript), die Ihre Layouts eigenständig entwickeln wollen, ohne sich fortgeschrittene Porgrammierkenntnisse anzueignen oder abhängig von Entwicklern zu sein
  • Agenturen, welche die vollständige Erstellung von Websites anbieten oder nur die Entwicklung auf Basis eines fertigen Designs und bei gleicher Qualität schneller und effizienter arbeiten möchten
  • Online Marketing Teams in großen Unternehmen, die eigenständig und unabhängig an der Website des Unternehmens arbeiten möchten bzw. selbst Landingpages erstellen möchten
  • Alle Unternehmen bzw. Selbstständige, die Ihre Website professionell von einer Agentur oder einem Freelancer erstellen lassen möchten, aber unabhängig bleiben möchten und später möglichst einfach selbst an Ihrer Website arbeiten wollen

Was bietet die Plattform Webflow im Detail?

Webflow ermöglicht das professionelle Erstellen von einzigartigen Webseiten samt CMS und Hosting und ohne selbst im klassischen Sinne programmieren zu müssen. Was das im Detail bedeutet und welche Funktionen und Tools Webflow in seinem neuen Software-Ökosystem bereitstellt, erfahren Sie in diesem Kapitel.

Infografik mit einem Überblick aller wichtigen Funktionen, die Webflow bietet

Designer

Auf den ersten Blick erinnert der Designer an die Oberfläche von klassischen Grafik- und Fotobearbeitungsprogrammen wie Photoshop, so ähnlich funktioniert er auch. Der Designer ist nichts anderes als eine Frontend-Leinwand für die visuelle Nutzung von HTML5, CSS3 und JavaScript. Man startet auf einer weißen Oberfläche und kann seine Website wie ein Programmierer völlig frei gestalten, allerdings ohne selbst im klassischen Sinne programmieren zu müssen. Auch Unterseiten, Verzeichnisse, das CMS, die Website Assets (z.B. Bilder) uvm. lassen sich hier und bearbeiten und verwalten.

Screenshot der Oberfläche im Webflow Designer von Ramoser Webdesign
Screenshot der Oberfläche im Webflow Designer

Klassische HTML-Elemente (z.B. Div-Blöcke, Link-Blöcke oder Text-Blöcke) und einige bereits vorgefertigte Layouts können per Drag & Drop (oder noch schneller mit Tastatur-Shortcuts) auf der visuellen Oberfläche eingefügt werden, mit dem CSS Editor (rechts im Bild) gestaltet und per JavaScript Editor animiert werden, auch komplexere Designs lassen sich beispielsweise mit Webflow Grid einfach und schnell umsetzen. Die getätigten Einstellungen verwandelt Webflow im Hintergrund automatisch in sauberen Code, der bereit für die Veröffentlichung oder die Übergabe an einen Entwickler ist. Der Code ist dabei nicht abstrakt und aufgebläht wie bei Websites von Baukästen wie Wix oder Jimdo, sondern sauber und semantisch, genau so wie ihn ein Programmierer schreiben würde (vorausgesetzt der Webflow-Entwickler beherrscht die Grundlagen von HTML und CSS und hält sich an gängige Best-Practices bei der HTML-Struktur und der CSS-Nomenklatur des Projekts).

Die HTML-Struktur ist völlig transparent sichtbar und wird mit einem Strukturbaum visuell dargestellt (links im Bild). Selbes gilt für die CSS Einstellungen: Man kann eigene Klassen erstellen und hat Zugriff auf alle wichtigen CSS Einstellungen. Auch für JavaScript gibt es einen visuelle Oberfläche, mit der man jedes Element auf der Seite nach belieben animieren kann.

Wichtig: Es handelt sich hier nicht um einen klassischen Website Baukasten. Webflow ist wesentlich komplexer und näher an der Philosophie des Frontend-Programmierens im klassischen Sinne gebaut. Für effektives und effizientes Arbeiten mit dem Designer ist ein Grundverständnis von HTML, CSS und Javascript extrem hilfreich und grundsätzlich sogar notwendig, um das Potential von Webflow in vollem Umfang zu erkennen und nutzen zu können. Dieses Wissen kann man sich aber relativ schnell mit der von Webflow bereitgestellten Trainingsplattform (Webflow University) kostenlos aneignen, ohne jemals selbst eine Zeile Code schreiben zu müssen.

Zudem lässt sich die Website im Designer mit verschiedenen Breakpoints (oben im Bild) auch für kleinere Bildschirmgrößen wie Tablets und Smartphones anpassen - Stichwort Responsive Design. Damit hat man volle Kontrolle darüber, wie die Website auf verschiedenen Bildschirmgrößen aussieht.

Editor

Einem Kunden der keine Ahnung von Webflow, HTML oder CSS hat, kann man kaum zumuten, mit dem Designer zu arbeiten, dafür ist dieser schlichtweg viel zu komplex und setzt einige Grundkenntnisse in Programmiersprachen voraus, die der Endkunde nicht hat. Wie macht man es als Webdesign Agentur oder Freelancer dem Kunden der die Website erwirbt also möglich, bestehende Inhalte der Website einfach und ohne Hilfe anzupassen? Hierfür wurde der Editor entwickelt.

Der Kunde kann sich mittels Email und Passwort auf seiner Website einloggen und die Inhalte direkt auf der Seite und völlig visuell anpassen, genauso einfach wie in einem Word Dokument. Es gibt also kein unübersichtliches Backend mit überflüssigen Funktionen oder andere Hürden. Es gibt nur den Kunden, seine Website und den Inhalt, an dem er arbeiten möchte. "Draufklicken und ändern", das ist alles was der Kunde machen muss, um an seiner Website zu arbeiten. Es können auch mehrere Editor-Zugänge erstellt werden (z.B. für Mitarbeiter des Kunden, die an der Website arbeiten sollen).

Man kann ebenfalls einstellen, an welchen Inhalten der Kunde arbeiten kann und an welchen nicht, falls das notwendig ist. Damit sind versehentliche Änderungen und Fehler durch den Kunden, die nicht erwünscht sind, quasi unmöglich und man kann das Bearbeiten der Website durch den Kunden je nach Bedarf noch weiter simplifizieren.

Selbes Prinzip gilt für neue Inhalte, die der Kunde hinzufügen möchte, z.B. Blogbeiträge. Auch das macht er über den Editor. Er muss lediglich einige Felder ausfüllen, aus welchen der Blogbeitrag besteht (z.B. Titel, Titelbild, Name des Autors und Text des Blogartikels) und mit wenigen Klicks ist der neue Blogbeitrag dann bereits online. Aus welchen und wievielen Feldern ein Blogbeitrag besteht ist dabei völlig frei vom Webdesigner wählbar. Ebenso das Design eines Blogbeitrags ist nicht an eine Vorlage gebunden oder anderweitig eingeschränkt. Webflow nennt dieses CMS-Prinzip "Collections". Eine Collection kann dabei nicht nur aus Blogbeiträgen bestehen, sondern z.B. auch aus Offenen Stellen in einem Karriereportal, Mitarbeitern auf einer Team-Seite oder Veranstaltungen in einem Online-Buchungssystem auf der Website. Eigentlich alles, was auf der Website regelmäßig aktualisiert wird und dabei immer im gleichen Design erscheinen soll.

Beispiel: Es kommt ein neuer Mitarbeiter ins Unternehmen, ein weiterer verlässt das Unternehmen und bei einem dritten soll das Foto auf der Website aktualisiert werden. Hierfür wählt der Kunde im Webflow Editor einfach die Collection "Mitarbeiter" aus (diese wurde bei der Erstellung der Website vom Webdesigner erstellt und konfiguriert) und kann einen neuen Mitarbeiter anlegen, bestehende Mitarbeiterprofile auf der Website bearbeiten oder Mitarbeiterprofile vollständig löschen - Ohne technische Kenntnisse oder die Hilfe des Webdesigners. Alle Änderungen sind dann auch direkt auf der Website online im passenden Design. Für den Kunden entstehen dadurch außerdem keinerlei Kosten. Praktisch, oder?

CMS

Webflow liefert ein Content Management System, das für Designer, Kunden und Entwickler gleichermaßen funktioniert, ohne Plugins, PHP oder Datenbanken.

Designer können, wie im vorherigen Kapitel bereits erwähnt, eigene Content-Typen erstellen (sogenannte Collections), völlig frei gestalten und selbst festlegen, aus welchen Inhalten bzw. Feldern dieser Content-Typ bestehen soll. Der Designer kann also selbst festlegen, aus welchen Bausteinen z.b. ein Blog-Beitrag, eine Case-Study, ein Referenzprojekt, eine Stellenausschreibung usw. besteht und das Layout dieser dynamischen Inhalte selbst gestalten.

Der Kunde kann später dann zum Beispiel einen neuen Blog Beitrag erstellen, indem er die vom Designer vorgefertigten Felder mit dem Editor ausfüllt und auf “Veröffentlichen” klickt. Der Kunde kann neue Inhalte auf der Website, die regelmäßig dazukommen, also einfach eigentständig erstellen, bearbeiten oder löschen.

Außerdem sehr interessant: Möglich ist auch das Verknüpfen des Webflow CMS und den individuell erstellten Collection-Feldern mit externen Datenquellen oder einer Smartphone-App beispielsweise. Den Möglichkeiten sind hier also kaum Grenzen gesetzt, es können zum Teil auch sehr komplexe Schnittstellen umgesetzt werden, ganz ohne selbst Code schreiben zu müssen. 

Animationen

Webflow erlaubt es, maßgeschneiderte Animationen für jedes Element der Website zu realisieren. Möglich wird das mit einem visuellen Editor für Javascript, ähnlich zu dem CSS-Editor im Webflow-Designer.

Auf Basis von Aktionen des Website-Besuchers (z.B. Mausklick, Mausbewegungen oder Scrollen) lassen sich individuelle Animationen abspielen. Dadurch kann man z.B. sehr eindrucksvolle "Scrollytelling" - Animationen umsetzen, bei denen sich Website Inhalte wie Bilder, Texte oder animierte Illustrationen basierend auf dem Scrollverhalten des Besuchers verändern. Diese Art der Website Animationen wird immer beliebter und ist perfekt dafür geeignet, komplizierte Produkte, Dienstleistungen oder Prozesse leicht verständlich und visuell zu erklären. Eine Website wo Scrollytelling eindrucksvoll zum Einsatz kommt, finden Sie hier.
Ein sehr simples Beispiel: Die Animation welche Sie hier unten sehen reagiert auf Ihr Scrollverhalten.

Neben einigen bereits vorgefertigten Animationen kann man selbst völlig frei und visuell Animationen designen, ohne eine Zeile Code zu schreiben. Den Vorstellungen sind damit quasi keine Grenzen gesetzt. Großartig für alle, denen User Experience und visuelle Kommunikation auf einer Website am Herzen liegt, die aber keine Zeit und Lust dafür haben, selbst komplizierte Animationen mit JavaScript zu programmieren oder nur auf Stock-Animationen zurückzugreifen.

Was unter anderem mit dem integrierten Animationseditor von Webflow alles möglich ist, können Sie sich hier genauer durchlesen bzw. in diesen Beispielen selbst begutachten:

E-Commerce

Im Unterschied zu gängigen E-Commerce Plattformen wie Shopify oder WooCommerce, ermöglicht Webflow völlige Designfreiheit aller Komponenten, die einen typischen Online Store ausmachen: Produktseiten, Checkout und der Warenkorb können völlig frei gestaltet werden, man ist nicht limitiert auf Templates oder eine bestimmte Strukturvorgabe.

Damit ist es deutlich einfacher, sich mit einem Shop von der Konkurrenz abzuheben. Indem man einen Online Store gestaltet, der einzigartig ist und perfekt zur eigenen Marke passt, anstatt einen weiteren immer gleich aussehenden Shopify- oder Woocommerce-Store basierend auf einem Template zu erstellen, fällt man bei Shop-Besuchern garantiert sehr positiv auf. 

Leider gibt es trotz einiger Vorteile sehr viele Funktionen, die Webflow E-Commerce noch nicht bietet, gängige Shop-Plattformen wie Shopify aber schon. Aus diesem Grund sollte man Webflow E-Commerce zum aktuellen Zeitpunkt nur für kleine, exklusive Shops nutzen, wo individuelles Design im Vordergrund steht.

Hosting

Das Webflow-Hosting wird von der Amazon Web Services (AWS) Cloud Computing-Plattform bereitgestellt und durch ein globales Content Distribution Network (CDN) unterstützt, das von Fastly und Amazon Cloudfront betrieben wird. Das Ergebnis sind sehr schnelle Seitenladezeiten und die Gewissheit, sich nie um Serverwartung, PHP-Updates oder Backups der Website kümmern zu müssen.

webflow-hosting-im-vergleich-zu-aehnlichen-anbietern
Webflow Hosting im Vergleich zu anderen Hostinganbietern (Quelle: webflow.com)

Äußerst nützliche Funktionen wie eine kostenlose SSL-Verschlüsselung für jede Website, automatische Backups, Passwort-Schutz für bestimmte Seiten, benutzerdefinierte Formulare, Funktionen für einfache SEO-Einstellungen, Integrationen für Google Analytics und andere gängige Marketing-Tools, eine Suchfunktion für die eigene Website und buchstäblich kein Wartungsaufwand machen das Webflow Hosting besonders.

Sollte man sich dennoch dafür entscheiden, das integrierte Hosting von Webflow nicht zu nutzen, gilt: Da Webflow sauberen Code produziert, sind Sie nicht an eine bestimmte Plattform gebunden. Sie können den Code der Website mit Webflow einfach exportieren und dort hosten, wo Sie möchten. Aber Achtung: Wichtige Funktionen wie das Webflow CMS oder integrierte Kontaktformulare sind dann nicht mehr ohne weiteres funktionsfähig.

Dashboard & Backend

Das Dashboard in Ihrem Webflow-Account dient als Übersicht aller Website-Projekte, die Sie erstellt haben. Hier besteht auch die Möglichkeit, Ordner für bestimmte Projekte zu erstellen, Projekte zu löschen oder neue zu erstellen. Nützlich ist das Dashboard deshalb vor allem für Webdesigner und Agenturen, die viele Kundenprojekte gleichzeitig betreuen und verwalten. Man sieht alle Kundenprojekte auf einen Blick und kann diese sortieren und z.B. nach Projektfortschritt kategorisieren.

screenshot-webflow-einstellungen
Screenshot von den Projekteinstellungen einer Webflow-Website

Zudem gibt es abseits vom Designer und dem Editor ein Backend für jedes Projekt, das man mit Webflow anlegt. Hier kann man Einstellungen zu Hosting, Editor-Zugängen, Zahlungsabrechnung, SEO, Formularen auf der Website, Schriftarten, Backups, Integrationen und benutzerdefiniertem Code tätigen. Außerdem ist es hier auch möglich, ein Projekt zu duplizieren, öffentlich zu teilen oder auf einen anderen Webflow-Account zu übertragen.

Support

Aufgrund der umfangreichen Funktionen und der Nähe zum Code ist Webflow nicht sehr einsteigerfreundlich, versucht diesen Nachteil aber mit umfangreichen Supportoptionen und kostenlosen Lernressourcen zu kompensieren. 

In der hauseigenen Webflow University warten hunderte Erklärvideos und Tutorials, die sinnvoll aufeinander aufbauen und dem Zuschauer nicht nur Webflow Schritt für Schritt näher bringen, sondern auch diverse Grundlagen und Prinzipien des Webdesigns sowie der Programmiersprachen HTML, CSS und Javascript.

Es gibt auch ein eigenes Forum, wo man sich mit anderen Webflow Designern und Experten austauschen und Fragen stellen kann. In den meisten Fällen gibt es aber bereits einen Thread im Forum, der das eigene Problem löst. Einmal kurz googeln oder die Suchfunktion im Forum nutzen reicht in der Regel schon aus, um die passende Antwort auf seine Frage zu bekommen.

Darüber hinaus kann man ein Support-Ticket eröffnen, und erhält meist schon innerhalb weniger Stunden eine ausführliche und personalisierte Antwort auf seine Frage von Webflow selbst.

Accessibility (Barrierefreiheit)

Die Erstellung von Websites und Software sollte für jeden zugänglich sein, im besten Fall auch für Menschen mit Sehbehinderung oder ähnlichen Einschränkungen. Webflow bietet hierfür eine Auswahl an integrierten Accessibility Tools, die es möglich machen, eine exzellente Barrierefreiheit bei Webflow Website Projekten zu ermöglichen. Zu den Tools zählen beispielsweise Alt Text Attribute, HTML5 Tags, relative Einheiten oder Kontrast-Hilfstools bei Farben.

Webflow Accessibility Controls Übersicht
Webflow Accessibility Controls (Quelle: webflow.com)

Webflow Enterprise

Webflow Enterprise wurde für große Unternehmen geschaffen, deren Websites oft außergewöhnlich komplex und umfangreich sind, mit vielen Millionen Besuchern Monat für Monat. Für derartige Webprojekte reichen Standard-Tools und Features nicht mehr aus, vor allem bei den Themen Sicherheit, Traffic-Skalierung und Erreichbarkeit der Website gibt es hier ganz andere Anforderungen, die gemeistert werden müssen. Dafür ist Webflow Enterprise da.

Namhafte Kunden wie Zendesk, Rakuten, Dell oder Upwork vertrauen bereits auf Webflow Enterprise für Ihre Website Projekte. Falls Sie sich näher damit außeinandersetzen möchten, können Sie hier mehr darüber erfahren.

Templates

Ein großer Vorteil von Webflow ist, dass man unabhängig von Templates oder anderen Vorlagen völlig frei Websites entwickeln kann, egal welches Design einem dabei vorschwebt. Dennoch gibt es inzwischen eine große Auswahl an Webflow Templates, wo Webflow Designer Ihre Arbeit mit anderen teilen in Form eines kostenlosen oder kostenpflichtigen Templates. Die Templates erstrecken sich dabei von einfachen Onepagern bis hin zu Websites mit Blogintegration oder Online Shops. Die komplette Auswahl finden Sie hier.

Neue Funktionen geplant für 2022

Webflow Updates 2022
Webflow hat große Pläne für die Zukunft. Bereits 2022 kommen zwei Updates, die Webflow grundlegend verändern werden.

2022 sollen gleich zwei neue Funktionen von Webflow veröffentlicht werden, welche Webflow grundlegend verändern werden. Der Funktionsumfang von Webflow wird - neben dem bisherigen Fokus auf das Front-End - 2022 durch mehrere komplexe Backend Funktionalitäten erweitert.

Zum einen kommt die neue "Memberships"-Funktion für monetarisierbare User Accounts hinzu, die bald fertiggestellt wird.

Zudem kommt “Logic” neu zum Webflow Ökosystem dazu. Damit wird es möglich, auch typische Backend Funktionen nativ innerhalb Webflow zu realisieren. Mit Logic können komplizierte Workflows basierend auf bestimmten Ereignissen (z.B. das Absenden von Kundendaten über ein Kontaktformular) im Backend erstellt werden, ohne Code schreiben zu müssen.

Mit “Logic” und “Memberships” wird es in naher Zukunft möglich sein, z.B. eine einfache Version von Airbnb.com oder Kursplattformen wie Masterclass.com nativ innerhalb Webflow zu entwickeln, ohne Code schreiben zu müssen oder andere Tools bzw. Plugins dafür nutzen zu müssen. Das ermöglicht Unternehmen, welche diese Funktionen zu nutzen wissen, massive Kosteneinsparungen für Entwickler und gleichzeitig wird es möglich, komplexe Funktionen einer Website deutlich schneller und effizienter zu entwickeln.

Beide Updates wurden im Rahmen der No-Code Conf von Webflow am 17. und 18. November 2021 näher vorgestellt. In unserem Blogartikel zur No-Code Conf 2021 erfahren Sie mehr darüber.

Preise im Überblick

Die Preisstruktur von Webflow wirkt auf den ersten Blick etwas verwirrend, vor allem wenn man noch nie damit gearbeitet hat. Grundsätzlich ist Webflow kostenlos, jeder kann zwei Projekte mit einigen Unterseiten erstellen und die wichtigsten Funktionen kostenfrei testen, ohne etwas dafür zu bezahlen. Sobald man die Website aber auf einer eigenen Domain veröffentlichen oder bestimmte Funktionen nutzen möchte, muss man dafür bezahlen.

Webflow stellt hier verschiedene Tarife (Plans) für unterschiedliche Anforderungen bereit. Wichtig ist dabei die Unterscheidung zwischen “Account Plans” (Die Nutzung eines kostenpflichtigen Webflow-Accounts zur Erstellung von Website-Projekten) und “Site Plans” (Die Nutzung des Webflow-Hostingdienstes für die jeweilige Webseite, die man auf einer eigenen Domain veröffentlichen möchte)

Man bezahlt also den Webflow Account an sich für die Erstellung der Websites mit allen Funktionen plus das Hosting pro Website, die man erstellt. Sowohl für die Account Plans als auch für die Site Plans gibt es  unterschiedliche Staffelungen und weitere Untergliederungen für E-Commerce und große Unternehmen. Mehr dazu hier. Accounts Plans sind für den Endkunden aber meist überflüssig, dieser bezahlt in der Regel nur für einen Site Plan seiner Website (also den Webflow-Hosting Dienst inklusive aller dazugehörigen Funktionen).

Kurz gefasst: Es ist für jeden Anwendungszweck ein leistbarer Zahlungsplan mit sehr gutem Preis-Leistungs-Verhältnis vorhanden und bereits ab insgesamt ca. 13 Euro monatlich bzw. 156 Euro pro Jahr kann man eine Webflow-Website mit den wichtigsten Funktionen inklusive CMS und professionellem Hosting verknüpft mit der gewünschten Domain betreiben. Ohne CMS-Funktionen wird es noch etwas günstiger.

Account Plans

Hier bezahlt man für die Nutzung des Webflow Accounts. Es gibt einen kostenlosen Tarif, bei dem man allerdings nur zwei Projekte erstellen kann und einige Funktionen wie der Export des Codes nicht verfügbar sind.

account-plan-features
Standard-Features aller Account Pläne bei Webflow (Quelle: webflow.com)

Die kostenpflichtigen Account Plans starten bei 16 Dollar monatlich und reichen bis 35 Euro monatlich (pro Nutzer) und mehr. Die teureren Pläne sind allerdings nur für große Agenturen bzw. Unternehmen sinnvoll, wo mehrere Personen gleichzeitig in Teams an einer Website arbeiten.

Site Plans

Hier bezahlt man für das Betreiben der jeweiligen Website auf einer eigenen Domain unter Nutzung des Webflow Hostings mit diversen Funktionen, die Kosten fallen also pro erstellter Website an.

site-plan-features
Standard-Features aller Site Pläne bei Webflow (Quelle: webflow.com)

Der günstigste Plan startet bei 12 Dollar monatlich für die Nutzung ohne CMS, mit dem CMS Plan (16 Dollar monatlich) hat man aber bereits alle Funktionen, die man für die meisten Website-Projekte benötigt. Teurere Pläne sind hauptsächlich für E-Commerce Seiten relevant, oder für Seiten mit sehr viel Traffic.

Webflow und Datenschutz

Das Thema Datenschutz im Internet ist sehr komplex und unabhängig von der Nutzung von Webflow sollte man sehr viele Dinge beachten, die den Rahmen dieses Kapitels sprengen würden. Hierzu ist es immer empfehlenswert, sich direkt von einem qualifizierten Anwalt beraten zu lassen, was in der eigenen Situation am besten ist.

Webflow nimmt Datenschutz sehr ernst und man kann die Software DSGVO-konform nutzen wenn man bestimmte Dinge beachtet. Welche Dinge das sind, ist von Fall zu Fall unterschiedlich. Das kommt vor allem darauf an, ob und wie auf der Webflow Website persönliche Daten erhoben werden.

Webflow bietet eine sehr sichere integrierte Hostinginfrastruktur, die auch von großen Unternehmen wie Amazon genutzt wird. Europäische Cookie Opt-In Dienstleister wie Cookiebot lassen sich problemlos auf jeder Webflow Website integrieren, ohne dass man dafür ein Plugin installieren muss. Damit ist auch der Widerruf der Cookie-Einwilligung des Website-Besuchers und andere Vorgaben nach DSGVO problemlos möglich.

Zudem gibt es im Webflow Forum und in der deutschen Webflow Facebook Gruppe immer wieder neue Tools und Anregungen, wie man Daten von Webflow Websites speziell in der EU noch besser schützen kann.

Unsere Erfahrungen mit Webflow

In unserer Anfangszeit vor einigen Jahren haben wir für Website-Projekte immer ausschließlich mit Wordpress gearbeitet, inzwischen arbeiten wir aber seit ca. zwei Jahren ausschließlich mit Webflow, sowohl für unsere eigenen Websites als auch für alle unsere Kundenprojekte.

Das heißt, wir haben schon dutzende Projekte mit Webflow erstellt und die Plattform sehr intensiv genutzt. Die Erfahrungen daraus möchten wir Ihnen nicht vorenthalten. Unsere persönliche Meinung zu Webflow lässt sich mit diesen Erkenntnissen gut zusammenfassen:

  • Das Erstellen von Websites mit Webflow macht sehr viel Spaß und geht leicht und schnell von der Hand sobald man etwas Erfahrung mit der Plattform gesammelt hat und die Basics beherrscht
  • Die Zusammenarbeit mit Kunden ist äußert angenehm dank der vielen integrierten Tools, die speziell für die Zusammenarbeit von Webdesigner und Kunde entworfen wurden (z.B. die integrierte Abrechnung für monatliche Hosting- und Betreuungsleistungen)
  • Kunden sind sehr glücklich mit dem Webflow Editor, der ein spielerisch einfaches Arbeiten an der eigenen Website ermöglicht, ganz ohne technische Kenntnisse oder umfangreiche Backend-Einschulungen und angepasst auf die Bedürfnisse des Kunden, ohne überflüssige Zusatzfunktionen, die den Kunden verwirren oder frustrieren
  • Man kann alle Kundenprojekte an einem Ort verwalten und sortieren, was unglaublich praktisch bei dutzenden Projekten ist
  • Es gibt praktisch keinen Wartungsaufwand, keine Plugins müssen installiert und aktualisiert werden und das Arbeiten mit Webflow ist allgemein sehr effizient und nutzerfreundlich
  • Im direkten Vergleich zu Wordpress würden wir uns in jedem Fall für Webflow entscheiden, zumindest für die Website-Projekte, die wir für unsere Kunden umsetzen. In manchen Fällen ist vielleicht Wordpress die bessere Wahl, so einen Fall hatten wir bisher bei dutzenden Kunden allerdings nie
  • Jedes Projekt kann man kostenfrei auf einer Webflow Subdomain veröffentlichen, was äußerst praktisch ist, um das Design der Website live im Browser mit dem Kunden abzustimmen, ohne eigens eine Domain dafür einrichten zu müssen
  • Anfangs dauert es, bis man die Plattform wirklich beherrscht und effizient damit arbeiten kann. Man kann also nicht direkt loslegen, sondern muss sich erst einmal einlesen, verschiedene Dinge ausprobieren und die Webflow University intensiv nutzen. Erst dann macht es Sinn, ein reales Kundenprojekt mit Webflow umzusetzen
  • Den Möglichkeiten sind keine Grenzen gesetzt. Wir staunen immer wieder, was mit der Plattform alles möglich ist. So individuell die Anforderungen auch sind, mit Webflow lässt sich fast jeder Wunsch und jedes Layout ohne Kompromisse realisieren, ganz egal wie "verrückt" es sein mag
  • Was Webflow definitiv von anderen Tools zur Erstellung von Websites unterscheidet sind die umfangreichen Möglichkeiten, um Animationen zu erstellen. Man kann sehr eindrucksvolle Scrollytelling-Websites und andere besondere Animationen umsetzen, ohne Code schreiben zu müssen
Zusammenfassend können wir nach ca. 2 Jahren Erfahrung mit der Plattform und dutzenden Webflow Kundenprojekten sagen: Genau wie unsere Kunden auch, lieben wir diese Software und möchten nichts anderes mehr für unsere Website-Projekte verwenden. Wir haben Webflow täglich mehrere Stunden im Einsatz und haben noch nie auch nur kurz darüber nachgedacht, wieder zurück zu Wordpress zu wechseln.

Vorteile und Nachteile im Überblick

Vorteile

  • Beinahe unbegrenzte Möglichkeiten bei Design, Layout und Animationen von professionellen Webseiten
  • Flexibles CMS, anpassbar auf die Bedürfnisse des Kunden
  • Exzellentes Hosting, schnell und zuverlässig mit kostenlosem SSL
  • Sehr geeignet für die Zusammenarbeit zwischen Webdesigner und Kunde
  • Der Editor macht Anpassungen der Website-Inhalte für den Kunden kinderleicht
  • Sehr umfangreiche Lernplattform und große Community
  • Produziert sauberen, semantischen Code
  • Sehr gut für responsive Webdesign geeignet
  • Kein Wartungsaufwand
  • Zahlreiche Integrationen verfügbar
  • Sehr gut für SEO geeignet
  • Große Auswahl an Tarifen mit gutem Preis-Leistungs-Verhältnis
  • Zahlreiche Templates und bereits fertige Layouts (vollständig anpassbar) kostenlos verfügbar
  • Wird laufend weiterentwickelt

Nachteile

  • Nicht einsteigerfreundlich
  • Sehr steile Lernkurve
  • CMS und viele weitere Funktionen nur mit Webflow-Hosting uneingeschränkt nutzbar
  • Nur auf Englisch verfügbar
  • Unübersichtliche Preisstruktur, die man als Neuling nicht direkt versteht
  • Viele Limitierungen, die teilweise nur umständlich oder garnicht umgangen werden können. Eine ausführliche Liste aller Limitierungen gibt es hier.

Wie lernt man mit Webflow umzugehen?

Sobald man mit Webflow arbeiten möchte bzw. es wenigstens einmal testen will, stellt sich natürlich die Frage: Wo fange ich an? Kennt man schon zu Beginn die die richtigen Lernressourcen, kann man das Arbeiten mit Webflow sehr zügig und vor allem effizient erlernen und spart sich eine Menge Frustration und Verwirrung.

Seit wir mit Webflow arbeiten, sind wir immer wieder auf neue Lernmöglichkeiten (kostenlose und kostenpflichtige) wie Online Kurse, Youtube-Kanäle, Blogartikel usw. gestoßen, die wir Ihnen natürlich nicht vorenthalten wollen. In diesem Kapitel lernen Sie deshalb, wer sich überhaupt die Mühe machen sollte, Webflow zu erlernen, wie schwierig das wird, wie lange es dauert und wo man die besten Lernressourcen dafür findet, um den Prozess zu beschleunigen und möglichst schnell zu einem wahren Webflow-Profi zu werden.

Wer sollte Webflow lernen und wer nicht?

Kurz gesagt: Jeder der diesen Beitrag gelesen hat und denkt “Klingt genau nach dem richtigen Tool für meine Website Projekte, das sollte ich unbedingt mal testen” sollte sich die Plattform genauer ansehen. Unserer Meinung nach sollten sich vor allem folgende Menschen Webflow unbedingt ansehen und testen:

  • Webdesigner und Agenturen, die viele Website-Projekte für Kunden entwickeln
  • SEOs, die nach einer professionellen und nutzerfreundlicheren Alternative zu Wordpress suchen, die Sie Ihren Kunden empfehlen können
  • Marketing Teams in großen Unternehmen, die regelmäßig Landingpages für Marketing-Kampagnen erstellen oder an der Website des Unternehmens arbeiten
  • Alle Wordpress-Begeisterten die offen dafür sind, mal auszuprobieren was es außer Wordpress noch auf dem Markt gibt
  • Menschen die ein einzigartiges Website-Projekt planen, für das es kein passendes Template oder Theme gibt oder die das Gefühl haben, mit keinem gängigen Page-Builder oder Baukasten lässt sich ihr geplantes Projekt ohne Kompromisse umsetzen und man muss einen Programmierer damit beauftragen

Erkennt man sich hingegen in einem der folgenden Punkte wieder, kann man sich den Aufwand sparen und sollte Webflow besser gar nicht erst lernen oder testen:

  • Laien, die möglichst schnell, billig und unkompliziert eine kleine Homepage erstellen möchten, am besten schon mit einer fertigen Vorlage
  • Leute die kein Englisch beherrschen
  • Leute die eine Website mit CMS benötigen und es kommt nur ein ganz bestimmtes Hosting in Frage
  • Programmierer die nicht offen dafür sind, sich vom Programmieren im klassischen Sinne abzuwenden und ein visuelles Tool dafür zu nutzen

Schwierigkeit und Lerndauer

Wer erwartet, innerhalb weniger Stunden perfekt mit der Plattform vertraut zu sein und alles darüber zu wissen, wird schwer enttäuscht werden. Webflow ist extrem umfangreich, vor allem die dynamischen Content Typen (Collections), die E-Commerce Funktionen, das Animieren von Elementen und das effiziente Arbeiten mit dem Designer verlangen dem Nutzer anfangs viel Know-How ab, was man sich erst einmal aneignen muss. 

Auch gewisse Grundkenntnisse im Bereich CSS, HTML und idealerweise auch JavaScript sind sehr empfehlenswert, besser gesagt sogar notwendig, um das Potential von Webflow wirklich sinnvoll auszuschöpfen. Zwar muss man nicht perfekt programmieren können und auch keine einzige Zeile Code selbst schreiben wenn man das nicht möchte, ein Grundverständnis davon, wie Webseiten aufgebaut sind und wie der Code dahinter funktioniert, sollte aber gegeben sein. Wenn CSS Klassen und HTML Fremdwörter für Sie sind, sollten Sie sich auf eine sehr lange Einlernzeit einstellen, bis Sie Webflow wirklich gut beherrschen.

Auch hier gilt: Übung macht den Meister. Die vielen Stunden, die man für das Erlernen von Webflow investiert, lohnen sich aber definitiv. Sobald man mit allen Funktionen der Plattform vertraut ist und mehrere Projekte damit realisiert hat, macht das Arbeiten damit extrem viel Spaß, man spart sehr viel Zeit und ist völlig uneingeschränkt in seiner Kreativität - genau das, was sich jeder Webdesigner eigentlich wünscht.

Lernportale und Ressourcen

Grundsätzlich findet man das komplette Wissen über Webflow bereits kostenlos in der Webflow University - gut strukturiert, wunderbar aufbereitet, verständlich erklärt und stets mit einer Prise Humor (Sehen Sie sich einmal ein paar Videos an, dann verstehen Sie, was ich damit meine).

webflow-university-kurse
Einige Kurse aus dem kostenlosen Lernportal von Webflow (Quelle: webflow.com)

Trotzdem arbeiten verschiedene Menschen auf verschiedene Art und Weise mit Webflow und man kann oft mit unterschiedlichen Herangehensweisen zum selben Ergebnis kommen. Um die “Best practices” kennenzulernen, die oft Stunden einsparen und für echte “AHA-Momente” sorgen, empfiehlt es sich sehr, auch andere Medien für das Lernen von Webflow heranzuziehen, nicht nur solche, die Webflow selbst bereitstellt. Dazu zählen vor allem Kurse, Blog-Beiträge und Youtube Videos von Webflow-Designern, die schon viele Jahre mit der Plattform arbeiten.

In der folgenden Tabelle finden Sie die unserer Meinung nach aktuell besten Lernressourcen, die man sich auf jeden Fall ansehen sollte, wenn man alles über Webflow lernen möchte und keine der Best-Practices verpassen will. Es gibt natürlich noch viele weitere Quellen, wo man mehr zu Webflow erfahren kann.

Webflow University

Eine Sammlung von kostenlosen Erklärvideos zu allen Themen rund um Webflow, die man sich nur vorstellen kann. Geeignet für Einsteiger und Fortgeschrittene.

Zur Website

Ran Segall / Flux Academy

Erfahrener Webdesigner aus Israel, der kostenfreie und kostenpflichtige Webflow Kurse und Videos im Rahmen seiner Flux Academy anbietet. Sehr empfehlenswert und nützlich ist die Webflow Masterclass. Geeignet für Einsteiger und Fortgeschrittene.

Zum Youtube KanalZur Website

Jonas Arleth

Webdesigner aus Hamburg und einer der wenigen deutschsprachigen Anbieter von Webflow Schulungen in Form von verschiedenen kostenlosen und kostenpflichtigen Inhalten. Geeignet für Einsteiger und Fortgeschrittene.

Zum Youtube KanalZur Website

Timothy Ricks

Erfahrener Webflow Experte aus den USA, der ungewöhnliche Tutorials für sehr spezielle Layouts und Custom Code bietet (vorwiegend kostenlos). Geeignet für Fortgeschrittene. Mit Wizardry hat Timothy Ricks ein System geschaffen, um Webflow Websites sehr einfach und effizient responsive zu machen.

Zum Youtube Kanal

Webflow Showcase

Eine Sammlung verschiedener Projekte von Webflow Designern, von denen viele kostenlos kopiert werden können. Großartig um neue Inspiration zu finden und zu verstehen, wie einzigartige Layouts aufgebaut wurden. Geeignet für Einsteiger und Fortgeschrittene.

Zur Website

Finsweet

Webflow Experte und Enterprise Partner mit namhaften Kunden wie Dropbox. Bietet hauptsächlich kostenlose Inhalte zu fortgeschrittenen Themen und Custom Code Anwendungen für Webflow. Geeignet für Fortgeschrittene. Das Client First System von Finsweet bietet eine Reihe von Richtlinien und Strategien, die Ihnen helfen, Webflow-Websites auf eine klare und skalierbare Weise zu erstellen, die jeder verstehen kann.

Zum Youtube KanalZur Website

Webflow Blog

Dutzende kostenlose Artikel zu verschiedenen Themen rund um Webflow und Webdesign. Hier findet man immer wieder sehr spannende Tipps, die sonst nirgendwo zu finden sind. Geeignet für Einsteiger und Fortgeschrittene.

Zur Website

Flowbase

Eine Sammlung von kostenlosen und kostenpflichtigen Templates, Komponenten, und Bausteinen für Webflow (Buttons, Navigationen, etc.) inklusive Videos und Tutorials zur richtigen Implementierung. Ideal um aufwendige Teile einer Website nicht selbst bauen zu müssen und um zu verstehen, wie bestimmte Komponenten am besten gebaut werden. Geeignet für Einsteiger und Fortgeschrittene

Zur Website

Webflow Facebook-Gruppen

Kostenlose Gruppen (Deutsch und Englisch) auf Facebook für Webflow Designer. Geeignet für Einsteiger und Fortgeschrittene und ideal um verschiedenste Fragen zu klären und sich mit Gleichgesinnten auszutauschen.

Zur deutschen GruppeZur englischen Gruppe

Webflow Forum

Hier kann man sich kostenlos anmelden und Fragen zu Webflow posten. Oft genügt es bereits, die Suchfunktion im Forum zu nutzen, um die perfekte Antwort auf sein Problem zu finden. Geeignet für Einsteiger und Fortgeschrittene.

Zur Website

Payton Clark Smith

Webflow Designer aus den USA, der kostenfreie und kostenpflichtige Inhalte anbietet. Geeignet für Einsteiger und Fortgeschrittene.

Zum Youtube Kanal

Pixelgeek

Webdesigner aus den USA und Customer Support Mitarbeiter bei Webflow mit zahlreichen kostenlosen Youtube-Tutorials, geeignet für Einsteiger und Fortgeschrittene.

Zum Youtube Kanal

Blutige Anfänger fangen am besten hier an und arbeiten sich später tiefer in bestimmte Gebiete ein: 

Bevorzugen Sie eine persönliche Beratung und Schulung zum Thema Webflow für Sie oder Ihre Mitarbeiter auf Deutsch? Wir bieten personalisierte Schulungen zum richtigen Umgang mit Webflow an, sowohl persönlich als auch digital in Form von Online-Sitzungen per Videogespräch (z.B. mit Zoom). Senden Sie uns einfach hier eine Anfrage, wir antworten zeitnah!

Kurze Antworten auf häufige Fragen

Was ist Webflow?

Webflow ist ein visuelles Tool zur Website Entwicklung, CMS und Hosting-Infrastruktur in einem. Die Software erlaubt es Designern, maßgeschneiderte Websites in sehr kurzer Zeit und ohne fortgeschrittene Programmierkenntnisse (es reichen die Grundlagen von HTML und CSS) professionell zu realisieren - Stichwort: Visuelles Programmieren.

Was kann Webflow?

Webflow bietet viele Funktionen zur visuellen Entwicklung einer Website, ein flexibles CMS und eine Hosting Infrastruktur, mit der die Website direkt auf der gewünschten Domain mit wenigen Klicks veröffentlicht werden kann. Die Software wurde für die Zusammenarbeit mit Webdesignern/Agenturen und deren Kunden entwickelt.

Was kostet Webflow?

Es ist für jeden Anwendungszweck ein leistbarer Zahlungsplan mit sehr gutem Preis-Leistungs-Verhältnis vorhanden und bereits ab insgesamt ca. 13 Euro monatlich bzw. 156 Euro pro Jahr kann man eine Webflow-Website mit den wichtigsten Funktionen inklusive CMS und professionellem Hosting verknüpft mit der gewünschten Domain betreiben. Ohne CMS-Funktionen wird es noch etwas günstiger.

Wer sollte damit arbeiten?

Webdesigner mit Grundkenntnissen in HTML und CSS, Agenturen und Online Marketing Teams in großen Unternehmen. Wenn der Fokus auf einzigartigen Website Layouts und Frontend-Entwicklung mit flexiblem CMS und individuellen Animationen liegt, ist Webflow sehr empfehlenswert.

Ist Webflow DSGVO-konform?

Webflow nimmt Datenschutz sehr ernst und man kann die Software DSGVO-konform nutzen wenn man bestimmte Dinge beachtet. Welche Dinge das sind, ist von Fall zu Fall unterschiedlich. Das kommt vor allem darauf an, ob und wie auf der Webflow Website persönliche Daten erhoben werden.

Fazit und Zukunftsaussichten

Webflow hebt sich von der Masse an primitiven Website-Baukästen ab und bietet eine leistungsstarke Lösung, die für die meisten professionellen Webdesign- und Entwicklungsanforderungen im Frontend geeignet ist. 

Designer können auf einfache Weise voll funktionsfähige und performante Websites mit intuitivem CMS und einfachen E-Commerce Funktionen erstellen - ohne selbst programmieren zu müssen oder externe Entwickler mit der technischen Umsetzung eines Layouts zu beauftragen. Das spart Kosten und Zeit und erleichtert die Arbeit von Designern enorm.

Webflow ist zwar mit Sicherheit nicht perfekt, wurde aber erst 2013 gegründet und ist damit noch relativ jung. Die Plattform wird permanent weiterentwickelt und mit neuen Funktionen bestückt. Welche das sind, wird unter anderem von einer Wishlist beeinflusst, wo Webflow Nutzer selbst mitbestimmen können, welche Funktionen gebraucht und entwickelt werden sollten und welche nicht. Wie sich Webflow in den nächsten Jahren entwickeln wird ist offen, fest steht: Es bleibt spannend und Webflow erlebt momentan einen weltweiten Aufschwung.
webflow-vision
Vision des Unternehmens Webflow (Quelle: webflow.com)

Erst kürzlich konnte Webflow in einer weiteren Finanzierungsrunde 140 Millionen Dollar an Investorengeldern einsammeln und ist damit bei einer Gesamtfinanzierung von rund 215 Millionen Dollar und einer Unternehmensbewertung von 2.1 Milliarden Dollar angelangt. Es bleibt also spannend, wie sich die Plattform in den nächsten Jahren weiterentwickeln wird und wir können uns auf großartige neue Funktionen freuen, beispielsweise "Webflow Memberships" oder "Webflow Logic", welche vor kurzem im Rahmen der jährlichen No-Code Conf angekündigt wurden. Damit können mithilfe von Webflow auch Mitgliederportale für Websites erstellt werden, wo Nutzer z.B. gegen einen monatlichen Betrag Zugang für bestimmte Bereiche oder Inhalte einer Website erhalten. Webflow Logic ermöglicht das visuelle entwickeln von Backend-Workflows, was bisher nur klassischen Programmieren möglich war.

Was Webflow in vielen weiteren Bereichen im vergangenen Jahr 2020 erreicht hat, sehen Sie hier.

Unserer Meinung nach hat Webflow weit mehr Aufmerksamkeit verdient, als es aktuell bekommt - vor allem im deutschsprachigen Raum. Wir können nur jedem raten es einmal auszuprobieren, der sich dafür interessiert. Webflow kann man völlig kostenfrei testen.

Haben wir Ihr Interesse geweckt? Sichern Sie sich jetzt einen Design Entwurf Ihrer neuen Website inklusive persönlicher Beratung von uns - kostenfrei und unverbindlich.
ablauf-bild