Webflow für responsive Webdesign: ein Mix aus Drag & Drop-Tool und CMS

Jeder der ab und zu fern sieht, kennt wohl Jimdo oder Strato aus der Werbung. Die Website-Baukästen sind im deutschsprachigen Raum mitunter die Bekanntesten – aber lange nicht die Einzigen. Eine Alternative zu den beiden Anwendungen ist zum Beispiel Webflow.

Hierbei handelt es sich um einen Online-Design-Tool, der sich auf Websites spezialisiert hat, die auch auf mobilen Endgeräten wie dem Smartphone oder dem Tablet ohne Probleme geöffnet werden können.

Daneben enthält Webflow einige Eigenschaften eines Content Management Systems (CMS). So wird aus zwei Arten der Website-Erstellung eine umfangreiche Software.

Ein paar Fakten zu Webflow

Das Unternehmen Webflow wurde im Jahr 2013 von Vlad Magdalin, dem kreativen Kopf hinter „Intuit Brainstorm“, von Bryant Chou, dem CTO von „Vungle“ und von Sergie Magdalin gegründet. Noch im selben Jahr schloss das Unternehmen den Startup Accelerator – das Coaching einer Institution, das zu einer schnelleren Entwicklung des Startups verhelfen soll – von Y Combinator ab. Darüber hinaus wurde zusätzlich Risikokapital von Investoren aus der Tech-Industrie, so etwa von Khosla Ventures, Tim Draper und Y Combinator gesammelt. Auch heute befindet sich der Hauptstandort des Unternehmens in San Francisco in Kalifornien und agiert von dort aus weltweit als webbasiertes Drag-and-drop Tool für die Erstellung von responsive Websites.

Das besondere daran ist, dass für den Bau der Websites für mobile Endgeräte keine Programmier-Kenntnisse nötig sind, da Webflow ganz automatisch HTML, JavaScript und CSS generiert, Content über API, mit CSV oder einfach manuell hinzugefügt werden kann und einen OnPage-Editor anstelle eines komplizierten Dashboards nutzt – das spiegelt sich auch im Motto des Unternehmens wieder. Es lautet: Design. Build. Launch.

Für wen ist Webflow geeignet?

Der Drag & Drop Online-Tool für responsive Websites eignet sich für so gut wie jeden Anwendungszweck. Das geht vor allem auf die große Auswahl an Tarifen zurück.

In der folgenden Liste erfährst du, welcher Tarif für welches Webprojekt besonders geeignet ist:

Website plans:

• Basic: für Betreiber einfacher Websites, die kein Content Management benötigen
• CMS: für Blogger und für Betreiber von Websites mit viel Content
• Business: für Betreiber großer Blogs oder Websites mit viel Traffic

Ecommerce plans:

• Standard: für Geschäftsleute, die mit ihrem Business in den Startlöchern stehen
• Plus: für Geschäftsleute, die bereits einen gewissen Kundenstamm haben und spezielle Features benötigen
• Advanced: für Geschäftsleute mit laufendem Business, das stetig wächst

Diese Tarife können mit sogenannten „Account plans“ kombiniert werden. Hier ist entscheidend, ob lediglich eine Person am Webprojekt beteiligt ist oder ob es sich um ein Gruppen-Projekt handelt. Zur Auswahl stehen:

• Free: für Einzelpersonen, die das Programm testen möchten
• Lite: für Einzelpersonen, die mehr Projekte einbinden möchten
• Pro: für Einzelpersonen, insbesondere für Freelancer und Designer, die mehr Projekte einbinden und mehr Funktionen nutzen möchten
• Team: für Teams, die aus mehr als zwei Personen bestehen
• Enterprise: für Teams, die aus mehr als 25 Personen bestehen

1. Preise & Kosten

Webflow richtet seine Preise nach den Wünschen seiner Kunden. Jeder potenzielle Nutzer des Webdesign-Tools kann zwischen verschiedenen sogenannten „Account plans“ wählen. Diese richten sich einerseits an Nutzer, die gemeinsam mit einem Team eine Website eröffnen möchten – hier wird von den „Team plans“ gesprochen. Zur Wahl stehen in dieser Kategorie zwei verschiedene Tarife. Der Tarif Team kostet bei jährlicher Zahlung 35 US-Dollar pro Person und Monat – bei monatlicher Zahlung sind es 42 US-Dollar pro Person und Monat. Hier müssen mindestens zwei Admins im Team vorhanden sein. Für noch mehr Leistungen und für noch mehr Administratoren (25 oder mehr), gibt es den Tarif Enterprise. Hier müssen sich die Nutzer direkt an das Unternehmen hinter dem Baukasten wenden und erhalten einen individuellen Preis.

Andererseits sind da die Kunden, die als alleinige Website-Administrator agieren möchten. Sie können auf einen der „Individual plans“ zurückgreifen. Bei jährlicher Zahlung gibt es den Lite-Tarif bereits für 16 US-Dollar pro Monat – bei monatlicher Zahlung sind es 24 US-Dollar. Den Tarif Pro enthält mehr Premium Features und ist bei jährlicher Zahlung für 35 US-Dollar pro Monat zu haben – bei monatlicher Zahlung sind es 42 US-Dollar.

Kombiniert werden die „Account plans“ mit den „Site plans“. Einerseits gibt es hier die Website plans. Einfache Seiten, die kein CMS benötigen, kommen in der Regel mit dem Basic-Tarif aus. Er kostet bei jährlicher Zahlung 12 US-Dollar pro Monat – bei monatlicher Zahlung sind es hingegen 15 US-Dollar. Für Seiten auf der das Web Content Management sehr wohl eine Rolle spielt, sollte allerdings auf den Tarif CMS zurückgegriffen. Er liegt bei jährlicher Zahlung bei einem Monatspreis von 16 US-Dollar – bei monatlicher Zahlung musst du allerdings mit 20 US-Dollar rechnen. Für Blogs und Websites mit hohem Traffic eignet sich hingegen der Business-Tarif. Er kostet 36 US-Dollar pro Monat, wenn eine jährliche Zahlung stattfindet. Bei monatlicher Zahlung musst du 42 US-Dollar leisten.

Nun decken die Tarife mit CMS und Möglichkeit zu hohem Traffic leider noch nicht den Bereich der Onlineshops ab. Deshalb bietet Webflow im Bereich der „Site plans“ auch eCommerce plans an. Zur Auswahl stehen drei Tarife, die bei jährlicher Zahlung folgende Preise kosten:

1. Standard: $36 pro Monat bei jährlicher Zahlung
2. Plus: $72 pro Monat bei jährlicher Zahlung
3. Advances: $212 pro Monat bei jährlicher Zahlung

Bei monatlicher Zahlung erhöhen sich die Preise natürlich ein wenig – ähnlich wie bei den anderen Tarifen.

Wer Webflow nutzen möchte, muss nicht zwingend Geld zahlen. Innerhalb der „Account plans“ gibt es eine kostenlose Version unter der Bezeichnung Free. Hier können zwei Projekte gestartet werden. Darüber hinaus erhältst du mehrere Tutorials und hast volle Kontrolle über das Design. Allerdings kannst du mit der kostenlosen Website noch nicht online gehen. Dafür muss du einen entsprechenden „Site plan“ auswählen. Wenn du später noch mehr Funktionen innerhalb deines Accounts haben möchtest, kannst du auch im Nachhinein den „Account plan“ von Free zu einem anderen passenden Plan wechseln.

2. Hosting

Der Webdesign-Anbieter Webflow übernimmt das Hosting für alle Websites, die über einen „Site plan“ verfügen. So ist es quasi kostenlos in den folgenden Tarifen enthalten:

• Basic
• CMS
• Business

In der kostenlosen Version von Webflow ist ebenfalls das Hosting enthalten. Allerdings erhältst du hier lediglich eine Subdomain, die auf „.webflow.io“ endet.

Während herkömmliche Hosting-Anbieter lediglich über einen Server verfügen, hat Webflow seine Hosting-Server auf der ganzen Welt verteilt. So finden sich nicht nur Server in den USA, sondern auch in Mittel-, West- und Süd-Europa, in Asien, in Südafrika, in Südamerika und in Australien sowie Neuseeland. Insgesamt sind es mehr als 100 Server, die allesamt auf Fastly und die amazon cloudfront zurückgreifen und so für sehr kurze Ladezeiten bei den Besuchern deiner Website sorgen. Darüber hinaus ermöglicht die Anzahl der Server auch die Handhabung von Websites mit hohe Traffic-Aufkommen.

3. Installation & Einrichtung

Eine Installation im herkömmlichen Sinne ist bei Webflow nicht nötig. Möchtest du eine Website über den Anbieter eröffnen, kannst du dich direkt auf der Website von Webflow registrieren. Hierfür gibst du folgende Daten an:

• Vorname
• Nachname
• E-Mail-Adresse
• Selbst gewähltes Passwort

Nun musst du nur noch auf den Button „Create Account“ klicken und schon kann es los gehen. Alternativ kannst du dich aber auch mit deinem Google-Account registrieren.

Nun hängt es davon ab, ob du die kostenlose Version testen oder gleich von Anfang an einen entsprechenden Tarif nutzen möchtest. Im Fall der Free-Version, kannst du nun direkt mit der Einrichtung deiner neuen Website beginnen. Möchtest du jedoch einen Tarif nutzen, musst du den entsprechenden auswählen und diverse Daten angeben – etwa deine Kreditkartennummer. Im Fall der Free-Version, kannst du nun direkt mit der Einrichtung deiner neuen Website beginnen – hier kommt das Motto von Webflow „Design. Build. Launch.“ ins Spiel.

Design.

Das Design in Webflow unterscheidet sich stark von dem anderer CMS – nicht etwa in der Optik selbst, sondern in der Art und Weise, wie du deine Website designen kannst. So hast du alle Möglichkeiten, von HTML über CSS bis hin zu JavaScript. Dafür benötigst du jedoch keinerlei Codes. Du gestaltest deine Website visuell mit einem sauberem Designer und semantischen Codes, die direkt veröffentlicht werden können. So hast du die volle Kontrolle über das Layout deiner Website. Dieses kannst du nicht nur mit Interaktionen, sondern auch mit verschiedenen Animationen ergänzen und erweitern. Auch dafür sind keinerlei Codes nötig.

Build.

Nachdem du deine Website nach deinen eigenen Wünschen im Design individualisiert hast, geht es an die Einbindung des Contents. Das kannst du einerseits manuell erledigen, andererseits als Import aus einer CSV oder über die API. Im Anschluss kannst du den Content visuell gestalten. So eignet sich das System besonders für:

• Designer: inhaltsgesteuerte Websites mit echtem Content
• Content Manager: benutzerdefinierte Inhaltsstrukturen, intuitives CMS, direktes Hinzufügen und Aktualisieren von Inhalten
• Entwickler: Aktualisierung der Inhalte mit REST-API

Launch.

Jetzt ist deine selbst gestaltete Website mit den ersten Inhalten ausgestattet – optimal für den Anfang. Das war es natürlich noch nicht. Jetzt musst du deine Website aktuell halten. Das heißt nicht nur, dass du vorhandene Inhalte bearbeitest, sondern auch neuen Content hochlädst. Mit dem Webflow Editor ist das ganz einfach. Hier gibt es nämlich kein kompliziertes Dashboard oder komplexes Backend, sondern laut Wordflow: „just you, your website, and the content you want to change„. Das heißt, dass du die Inhalte direkt auf deiner Homepage bearbeiten kannst und in wenigen Minuten damit fertig bist.

Gibt es einen Webflow Gutschein oder Gutscheincode?

Bisher lassen sich keine Gutscheine oder Gutscheincodes für Webflow finden. Vielleicht ändert sich das in nächster Zeit – was allerdings sehr spekulativ ist.

4. Technik & Konzept

Im Großen und Ganzen ist Webflow ein Homepage-Baukasten, der innerhalb einiger Tarife mit umfassenden CMS Funktionen ausgestattet ist. So beschränkt sich die Software nicht nur rein auf die Erstellung von einer Art von Websites, sondern umfasst die gesamte Bandbreite, bei Blogs angefangen über das Web Content Management bis hin zu komplexen eCommerce-Anwendungen. So kann es durchaus mit den großen CMS wie WordPress mithalten – ist durch sein OnPage-Editor aber deutlich leichter zu handhaben. D

as Konzept ist insbesondere auf die sogenannten responsive Websites ausgelegt. So wird jede erstellte Website automatisch auch für die Verwendung auf mobilen Geräten wie dem Smartphone oder dem Tablet konfiguriert.

Um seinen Kunden das optimale Umfeld für die individuellen Webprojekte zu bieten, gibt es eine Vielzahl von Tarifen, die miteinander kombiniert werden können. Bis dato ist die Software allerdings hauptsächlich im englischsprachigen Raum etabliert. Das bedeutet aber nicht, dass deutschsprachige Nutzer mit dem CMS Probleme haben werden. Ganz im Gegenteil: wer die englische Sprache zumindest in Ansätzen beherrscht und sich mit dem Editor vertraut macht, wird mit der Erstellung einer professionellen Webflow Website gut Zurecht kommen.

5. Nutzermanagement

Das Nutzermanagement ist stark vom gewählten Tarif abhängig. Grundsätzlich enthält natürlich jeder „Site plan“ einen Passwortschutz. Abhängig vom gewählten „Site plan“ ist allerdings, an wie viele Nutzer du einen speziellen Login vergeben kannst. Während dies im Basic-Tarif nicht möglich ist, werden beim CMS-Tarif drei und beim Business-Tarif zehn Logins erlaubt. Kombinierst du einen dieser „Site plans“ mit einem „Individual plan“, wird es aber immer nur einen Admin geben, der die Website in vollem Umfang verwalten kann. Besonders auf Firmenwebsites und auf Blogs mit mehreren Autoren kann das natürlich zu Problemen führen. Deshalb lassen sich die „Site plans“ ohne weiteres auch mit einem „Team plan“ kombinieren. Hier können dann – je nach Tarif – über 25 Personen als Admin agieren.

6. Erweiterungen / Extensions

Extensions im herkömmlichen Sinne wirst du bei Webflow vergeblich suchen. Die Software beinhaltet bereits eine Vielzahl an Funktionen und erlaubt die Einbindung von Integrationen. Hier steht etwa die Integration von Google Analytics oder von MailChimp zur Wahl. Auch Zapier kann ganz einfach in die eigene Website eingebaut werden. Darüber hinaus kannst du Google Domains direkt im Interface des Baukastens kaufen.

7. Design: Backend

Webflow basiert auf der Drag-and-drop Funktion. Das bedeutet, dass es für die Verwaltung der Website kein komplexes Backend benötigt. Möchtest du Inhalte bearbeiten, hochladen oder löschen, befindest du dich daher weiterhin in deinem Frontend – mit entsprechendem Template, Schriftart und -farbe und allen weiteren optischen Merkmalen, die du in der Präsentation deiner Website nutzt.

Um Inhalte bearbeiten zu können musst du dich lediglich einloggen. Schon kannst du per Drag-and-drop deine Website verändern. Bist du mit den Änderungen zufrieden, kannst du sie veröffentlichen, indem du einfach auf den entsprechenden Button klickst.

8. Design: Frontend

Das Design im Frontend wird von dem Theme geprägt, das du einst ausgewählt hast. Webflow organisiert seine Templates – es sind übrigens über 100 Stück an der Zahl – nach dem geeigneten Anwendungsbereich. So kannst du dein Theme nach folgenden Bereichen auswählen:

• Personal
• Blog
• Business
• Non-Profit
• Entertainment
• Event
• Portfolio

Wie viele Templates dir letztendlich zur Verfügung stehen, hängt allerdings auch von deinem „Site“-Tarif ab. So hast du im eCommerce-Tarif natürlich mehr Möglichkeiten, als in der kostenlosen Version. Nachdem du das passende Template gewählt hast, kannst du es – ganz ohne Codes natürlich – an deine individuellen Ansprüche anpassen.

9. Usability

Dank Drag-and-drop ist die Usability bei Webflow sehr gut. Auch Einsteiger sollten in den meisten Fällen keine Probleme beim Bau ihrer ersten eigenen Website haben. Hinzu kommen eine Vielzahl an Tutorials, die direkt von dem Unternehmen angeboten werden.

10. Sicherheit

Die Sicherheit der Websites von Webflow wird von dem Unternehmen sehr ernst genommen. So ist jede Website – auch jede Free-Version – SSL-verschlüsselt. Das ist insbesondere in Deutschland und in der EU sehr wichtig, da hier eine SSL-Verschlüsselung für jeden kommerziellen Shop-Betreiber Pflicht ist. Darüber hinaus können alle Seiten und Statistiken einer Website mit Passwörtern geschützt werden. Außerdem nimmt Webflow ständige Software- und Website-Updates vor, sodass keine Sicherheitslücken entstehen.

Den Datenschutz betreffend – der in Deutschland aufgrund der DSGVO besonders wichtig ist – kann Webflow womöglich nicht ganz mit der deutschen Konkurrenz mithalten. Zwar entspricht der Website-Baukasten der ISO 27018, dennoch befinden sich Hosting-Server auf dem ganzen Planeten verteilt. So ist zwar ein gewisser Datenschutz gegeben, allerdings kann nicht immer klar gesagt werden, was mit den Daten passiert, die sich auf Servern außerhalb der EU befinden.

11. Support & Community

Der Website-Baukasten ist derzeit vor allem im englischsprachigen Raum beliebt. Daher gibt es derzeit noch keinen deutschsprachigen Support. Wer der englischen Sprache allerdings mächtig ist, kann sich bei allgemeinen Fragen im Webflow Help Center informieren. Für spezielle Fragen gibt es einen E-Mail Support unter „support@webflow.com“. Einen rund-um-die-Uhr Support erhalten übrigens alle Nutzer, die einen der folgenden Tarife ausgewählt hat:

• Pro
• Team
• Enterprise

Darüber hinaus gibt es ein Webflow Community Forum. Hier kannst du Fragen stellen und von anderen Nutzern hilfreiche Antworten erhalten.

12. Wichtige Funktionen

Für den Bau von Websites sind einige Funktionen Pflicht. Wir haben uns deshalb bei Webflow einmal nach den wichtigsten Features umgesehen und erläutern dir im Folgenden, was du von Webflow im Bezug auf die Funktionen erwarten kannst.

Alternativen zu Webflow

Webflow ist natürlich nicht das einzige Tool für die Erstellung von Websites auf dem Markt. Neben der Software gibt es einige weitere bekannte Website-Baukästen. So etwa WIX, Squarespace, Weebly und natürlich Jimdo. Allerdings ist keiner dieser Baukästen so ideal für responsive Websites geeignet, wie es bei Webflow der Fall ist. Neben den Baukästen eignet sich für die Erstellung einer eigenen Website natürlich auch ein entsprechendes Content Management System. Hier sind – in Anbetracht der Funktionen – besonders WordPress und Drupal interessant.

Webflow vs. WordPress

WordPress ist eines der bekanntesten CMS und sollte daher unbedingt mit Webflow verglichen werden. Preislich scheint WordPress im ersten Moment deutlich günstiger als Webflow. Schließlich ist WordPress eine Open-Source Software und kostet in der Anschaffung keinen Cent. Allerdings solltest du im Vergleich darauf achten, dass die Templates für WordPress sowie der professionelle Support und diverse Plug-ins meist Geld kosten. Das ist bei Webflow nicht der Fall. Darüber hinaus lässt sich Webflow deutlich unkomplizierter bedienen – ein Vorteil, den besonders Einsteiger zu schätzen wissen. Was SEO anbelangt, so sind WordPress und Webflow gleichauf. In beiden Fällen musst du natürlich wissen, was du tust.

Webflow vs. Shopify

Shopify ist – genau wie Webflow – ein beliebter Website-Baukasten. Wenn du allerdings die Webflow-Websites mit den Shopify-Websites vergleichst, wirst du feststellen, dass die Designs und insbesondere die Templates bei Shopify in der Regel einander sehr ähneln. Bei Webflow hingegen hat jede Website eine ganz individuelle Optik und passt daher besonders gut zur jeweiligen Website. Darüber hinaus kannst du Webflow zu jedem Zeitpunkt kostenlos nutzen. Shopify hingegen bietet dir lediglich einen kostenlosen Testzeitraum von 14 Tagen. Was ebenfalls auffällt ist, dass das Dashboard bei Shopify sehr dem von WordPress ähnelt. Das heißt, dass du, während du deine Website bearbeitest, nicht direkt siehst, wie die eingefügten Inhalte im Endergebnis auf deiner Website im Frontend erscheinen. Durch den InPage-Editor von Webflow ist das hingegen möglich.

Zusammenfassung

Der Homepage-Baukasten hebt sich von anderen Angeboten ab. Das liegt vor allem daran, dass jede Website ganz automatisch auch für mobile Engeräte geeignet ist. Das hat natürlich einen sehr positiven Einfluss auf die SEO. Gleichzeitig kann die Software auch von Einsteigern genutzt werden, die bisher kaum mit der Erstellung von Websites, Blogs oder Onlineshops zu tun hatten. Der Funktionsumfang von Webflow hat natürlich auch seinen Preis, der in einigen Fällen deutlich über dem konkurrierender Systeme liegt. Wer allerdings Einfachheit bei der Erstellung komplexer Websites wünscht, der wird die Preise für durchaus angemessen halten – was sie unseres Erachtens auch wirklich sind.

FAQ – Häufig gestellte Fragen zu Webflow

1. Was ist Webflow?

Webflow ist ein Website-Baukasten für responsive Websites – also für Websites, die sich auf mobilen Endgeräten anzeigen lassen. Darüber hinaus verfügt es über integrierte CMS-Funktionen.

2. Wie funktioniert Webflow?

Webflow funktioniert mit Drag-and-drop Funktion. So haben die Nutzer immer einen klaren Überblick über die Änderungen, die sie gerade tätigen und müssen nicht ständig zwischen Back- und Frontend hin und her wechseln.

3. Wie gut ist Webflow?

Für die Erstellung von responsive Websites eignet sich Webflow ganz besonders. Wie gut die Software tatsächlich ist, muss allerdings jeder für sich herausfinden. Am einfachsten geht das natürlich mit einem Test in der kostenlosen Version.

4. Was kostet Webflow?

Die Preise variieren sehr stark. Neben der kostenlosen Version gibt es verschiedene Tarife mit unterschiedlichen Preisen. Angefangen bei 12 US-Dollar, kann die Anwendung im teuersten Tarif durchaus über 200 US-Dollar kosten.

5. Welche Daten speichert Webflow?

Webflow verwendet auf seiner eigenen Website session und persistent Cookies sowie pecan Sandies. Auf den Websites seiner Kunden hingegen baut Webflow selbst keine Cookies ein. Hierfür sind die Nutzer selbst zuständig und müssen dann entsprechende Hinweise aufsetzen.

6. Wo steht der Server bei Webflow?

Die Server sind auf der ganzen Welt verteilt. So findet sich auf jedem Kontinent mindestens ein Server.

7. Wie kann ich Webflow kündigen?

Um eine über Webflow erstellte Website zu löschen, findest du in den Seiten Einstellungen „Site Settings“ der entsprechenden Website den Button „Delete“. Um deinen gesamten Account zu löschen ist es meist sinnvoll, den Support – support@webflow.com – zu kontaktieren.