Webflow Homepage Baukasten
15. Juli 2021
Webflow ist ein einzigartiger Hybrid aus Homepage-Baukasten und CMS. Anders als herkömmliche Homepage-Baukästen reduziert der Dienst das Webdesign nicht auf den kleinsten gemeinsamen Nenner, sondern setzt bei seinen Nutzern ein gewisses Verständnis für Programmiervorgänge voraus. Anwender, für die CSS und HTML keine Fremdsprachen sind (und alle, die es lernen wollen), können mit dem vielseitigen, fortschrittlichen Werkzeugkasten dynamische Seiten ohne Programmierung erstellen, gestalten und verwalten – mit visuellen Werkzeugen.
Pro
- Mischung aus Custom CSS und Website-Builder
- fast unendliche Möglichkeiten
- tolle Lernplattform „Webflow University
- einfache E-Commerce-Integration
- kostenlose Nutzung möglich
- Kombination von Tarifen möglich
- günstiges Preis-/Leistungsverhältnis
- Hosting wird für alle „Website-Tarife“ angeboten
- einfache Registrierung
- geeignet für (fast und jedes) Webprojekt
- spezialisiert auf responsive Websites
- Umfangreiche Benutzerverwaltung möglich
- unkompliziertes Backend dank OnPage-Editor und Drag and Drop
- Große Auswahl an Templates verfügbar
- Äußerst benutzerfreundlich – unkompliziert in der Anwendung.
- SSL-Vernetzung ist standardmäßig verfügbar
- Mehrsprachige Websites möglich
Contra
- Vorkenntnisse in Design und Programmierung notwendig
- steile Lernkurve
- nur in Englisch verfügbar
- Kombination der Angebote kann etwas komplex sein
- im „Team-Tarif“ zahlt man für jeden Benutzer mit
- wenn nur ein „Account-Tarif“ gebucht wird, ist ein Hosting gar nicht möglich
- Benutzerrechte können nur mit definierten Tarifen vergeben werden
- Es gibt keine Erweiterungen im klassischen Sinne
- Einige Templates sind nur innerhalb bestimmter Tarife verfügbar.
Einrichtung
Wenn Sie eine Website beim Provider eröffnen wollen, ist die Einrichtung direkt im Webflow-Portal möglich. Nun hängt die Entscheidung davon ab, ob Sie die kostenlose Version nutzen oder gleich zu Beginn einen passenden Tarif wählen. Im ersten Fall der kostenlosen Lösung können Sie natürlich sofort mit Ihrer neuen Website starten. Wenn Sie hingegen einen solchen Tarif nutzen wollen, dann wählen Sie den passenden aus und geben verschiedene Daten ein – zum Beispiel Ihre Kreditkartennummer. Bei der kostenlosen Version können Sie sofort mit dem Aufbau Ihrer zukünftigen Website beginnen („Hier ist das Angebot von “Webflow“ unter ,,Design. Bauen. View.“ ins Spiel kommt.
Das Design in Webflow unterscheidet sich stark von anderen CMS – nicht in der Optik selbst, sondern in der Art und Weise, wie Sie Ihre Website gestalten können. Sie haben n alle Möglichkeiten, von (!) HTML über CSS bis hin zu Javascript. Aber Sie brauchen dafür keine Befehle. Sie gestalten Ihre Website visuell mit einem sauberen Layout und semantischem Code, der dann direkt umgesetzt werden kann. Damit haben Sie die volle Souveränität über die Struktur Ihrer Website. Sie können nicht nur Interaktionen, sondern auch Animationen hinzufügen und diese sogar erweitern. Auch hier sind keine Clients erforderlich.
Nachdem Sie das Design Ihrer Website angepasst haben, ist es an der Zeit, Inhalte zu integrieren. Dies kann manuell erfolgen, oder Sie können sie direkt aus einer CSV-Datei oder über eine API importieren. Zum Schluss haben sie die Möglichkeit, die Inhalte rein visualisiert darzustellen. Daher ist die Lösung besonders für:
Designer: inhaltsgetriebene Websites mit echten Inhalten.
Content-Manager: individuelle Inhaltsstrukturen, intuitives CSS, direktes Hinzufügen und Ändern von neuen Inhalten.
Entwickler: Inhaltsaktualisierung mit REST-API
Jetzt ist Ihre selbst gestaltete Website mit den ersten Inhalten ausgestattet – perfekt für den Anfang. Aber das ist natürlich noch nicht alles. Jetzt müssen Sie Ihre Website aktuell halten. Das bedeutet, nicht nur bestehende Inhalte zu bearbeiten, sondern auch neue Inhalte hochzuladen.
Mit dem Online-Editor von Webflow ist das ganz einfach. Hier gibt es kein kompliziertes Dashboard oder kompliziertes Backend, sondern laut Wortfluss: „Es geht nur um Sie, Ihre Website und die Inhalte, die Sie ändern möchten“. Sie können also Ihre Inhalte direkt auf Ihrer Website bearbeiten und sind in ein oder zwei Minuten damit fertig.
Wann und warum sollten Sie mit Webflow arbeiten?
Es gibt eine ganze Reihe von Gründen, mit Webflow zu arbeiten, die Liste der Gründe ist sehr lang. Der erwähnenswerteste ist der Vorteil auf der Seite des Kunden und auf der Seite des Webdesigners. Aber auch für das Marketing in Unternehmen ist der Einsatz von (!) einem Webflow von großem Vorteil. Und nicht zuletzt ist der Einsatz von Weflow auch für die Suchmaschinenoptimierung (SEO) sehr attraktiv. Was das alles im Detail bedeutet, erfahren Sie im folgenden Unterkapitel.
Vor- und Nachteile
Im Folgenden werden die Vor- und Nachteile dargestellt.
Aus Sicht des Kunden
Einfaches Editieren von bereits bestehenden Inhalten: Einfaches Editieren wie in einem WinWord-Dokument. Das bedeutet, dass direkt auf den entsprechenden Seiten ohne technische Kenntnisse oder Eingreifen des Webdesigners und komplett visuell, also ohne Backend, Texte oder Bilder ausgetauscht, bearbeitet oder hinzugefügt (!) werden können. Das spart nicht nur Zeit, sondern vor allem Kosten und eine Menge Nerven.
Einfaches Hinzufügen von neuen Texten: Mit einem eigenen dynamischen CMS können Sie ganz einfach neue Inhalte für Ihre Homepage erstellen (z.B. Blogeinträge, Erfahrungsberichte, Stellenausschreibungen, Produktvorstellungen, etc.), die immer gleich strukturiert sind; auch hier wieder ohne Beteiligung eines Webdesigners und komplett visuell.
Schnelles, sicheres und zuverlässiges Hosting: Das bringt schnelle Ladezeiten, sichere Datenübertragung und Pluspunkte bei Suchmaschinen. Der praktisch nicht vorhandene Pflegeaufwand spart zusätzliche monatliche Wartungskosten.
Unabhängigkeit vom Webdesigner: Webflow-Projekte können problemlos auf andere Accounts übertragen werden, sogar ein Datenexport des Codes wäre möglich. So bleibt das Webangebot immer in den eigenen Händen und m an wird völlig unabhängig von der Agentur oder dem Webdesigner.
Aus Sicht des Webdesigners
Unbegrenzte Gestaltungsmöglichkeiten: Keine Beschränkung auf Templates und Standardvorlagen, ganz spezielle und einzigartige Wünsche können realisiert werden, ohne Programmierkenntnisse oder ex terne Plugins oder Dienstleister.
Schnellere Fertigstellung von individuellen Website-Projekten: Wo bisher ein Designer und ein erfahrener Programmierer benötigt wurden, um die Umsetzung einer individuellen Website zu realisieren, macht Webflow nun Schluss damit. Die visuelle Programmierung der Website geht mit Webflow deutlich schneller als bei der klassischen „Programmierung per Mausklick“.
Verwalten Sie alle Kundenprojekte an einem Ort: Im Dashboard können Sie alle Kundenprojekte auf einen Blick sehen, Ordner für Projekte anlegen und alle Kundenaufträge an einem Ort verwalten.
Integrierte Kundenabrechnung: Wenn Sie Ihren Kunden zusätzliche monatliche Leistungen anbieten (SEO, Content-Pflege, etc.), können diese direkt über einen Webflow abgerechnet werden und der Kunde erhält automatisch seine Rechnung dafür, deren Höhe er dabei selbst bestimmen kann.
Webflow-Designer
Der erste Rundgang durch das Testprogramm erinnert an die ersten Versuche mit Photoshop („Photoshop“) oder Christine („Premiere“): Der gesamte Bildraum ist voll mit den unterschiedlichsten Funktionen, deren Eigenschaften wichtige Antworten liefern können. Und zwar auf Fragen, von denen Sie gar nicht wissen, dass Sie sie haben. Mit Webflow können Sie zum Beispiel nicht einfach wahllos und kontextlos Elemente auf eine Fläche werfen, wie Sie es bei anderen Programmen per „Drag and Drop“ können. Auch die Logik der Programmierung kommt beim Builder ins Spiel, wo jedes Element seinen Platz im HTML- oder CSS-Code finden muss.
Auf alle Funktionen des Editors einzugehen, würde ein ganzes Buch füllen. Daher beschränken wir uns im Folgenden auf ein paar Grundlagen. In der Kontrollleiste ganz links können Sie ganz einfach neue Elemente hinzufügen, indem Sie auf das „Plus“ klicken. Natürlich gibt es auch viele vorgefertigte Inhaltsblöcke, Schaltflächen, Formulare usw. in unserem Webflow.
Im Panel „Stil“ ganz hinten können Sie das Layout und Design Ihrer Dokumente bearbeiten. Im Navigator-Panel können Sie Ihre Beschriftungen per Maus und Fuß auf dem Bildschirm platzieren. Am oberen Rand der Oberfläche können Sie auf die Gerätesymbole klicken, um zu prüfen, wie das Design auf verschiedenen Oberflächen aussieht. Durch einen Klick auf das Augensymbol im oberen grünen Bereich gelangen Sie in die Vorschau Ihrer Seite.
Zusammenfassend ist der Browser mit Webflow Manager ein Homepage-Builder für Programmierer und solche, die es werden wollen: Bestimmte Programmierschritte lassen sich mit dem Programm automatisieren, und seine Visualisierungswerkzeuge erleichtern die Entwicklung responsiver Websites in einem sauberen Code. Für Anwender ohne eigene HTML- oder CMS-Kenntnisse sind die vielfältigen Möglichkeiten dieses Editors hingegen nur rudimentär nutzbar oder man ist mit alternativen Lösungen einfach besser bedient.
Content-Management-System
Neben dem Editieren von Inhalten auf der Website, d.h. dem Bearbeiten beliebiger Inhalte und deren Medien direkt auf der gestalteten Website, bietet Webfl ow CMS auch die Möglichkeit, eigene Inhalte der Website (Blogeinträge, ein Team, ein Projekt, etc.) in eigenen, komplett anpassbaren Foren zu speichern, was die Arbeitswelt derjenigen, die sehr große Webprojekte mit komplexeren Strukturen organisieren, massiv erweitern kann.
Dies geschieht in Form von “CMS-Sammlungen“, die Sie über den Reiter mit dem Stapel-Symbol in der Hauptansicht des Editors erreichen … Nachdem Sie eine Sammlung angelegt oder erstellt haben und diese praktisch einen Inhalt darstellt, können Sie dort Bereiche auswählen und neue Elemente einfügen, die dann entweder als Einzelseiten oder in Form von Listen/Rastern in bestehenden, stattlichen Listen dienen können. Zum Beispiel können Sie eine Sammlung „Teammitglieder“ hinzufügen, um eine Webseite zu bilden, die die Namen der Mitglieder in Ihrer Präsentation auflistet, mit deren Bildern, Namen, Profil, Links zu sozialen Ressourcen usw.
Zusätzlich zum CMS-Backend gibt es einen Webflow-Editor, mit dem Sie neue Inhalte eines bestehenden Typs zu einer bereits erstellten Website hinzufügen können. Dies ist für den Website-Ersteller und seine Mitarbeiter, aber auch für seine Kunden nützlich, da Sie eine voll funktionsfähige Website mit modifizierbaren Stammseiten sowie dynamischen Inhaltselementen wie Blogs, Portfolio-Projekten usw. erhalten, ohne dass Plugins installiert werden müssen.
Durch die Vielfalt der möglichen Inhalte, von denen Blog-Posts nur eine Option darstellen, frisst Webflow WordPress und andere Open-Source-Systeme wie Draupal in Bezug auf ihre Flexibilität als CMS auf. Der Nachteil ist, dass es Zeit braucht, bis man den Dreh raus hat. Aber hier kann die Webflow University School, zu der wir später noch kommen werden, dafür bürgen, dass die Lernkurve nicht steil ist.
Man bekommt den Eindruck, dass Webflow zwar möglichst wenige Bereiche für die Inhaltsverwaltung belassen will, um dem Website-Entwickler nicht zu sehr in die Quere zu kommen (was an sich auch nicht schaden sollte, wenn man bedenkt, worum es bei diesem System in erster Linie geht), aber dennoch ist das Webflow-CMS deutlich komplexer als das Basissystem von Wordpres oder anderen, bekannten Website-Buildern wie Wix.