Test Center – Webflow

Website-Editor, CMS und Hosting unter einem Dach

Website-Editor, CMS und Hosting unter einem Dach

Die an Adobe-Apps angelehnte Oberfläche von Webflow stellt alle Tools übersichtlich zur Verfügung. (Quelle: Webflow)
(Quelle: Webflow)
30. April 2022 - Mit Webflow hat ein interessanter Anbieter den Markt der Browser-basierten Web-Editoren betreten. Die Plattform gibt ohne Codieren volle HTML- und CSS-Kontrolle und konkurriert mit dem integrierten, flexiblen CMS stark mit Wordpress & Co.
Artikel erschienen in IT Magazine 2022/05
Websites unterschiedlicher Arten lassen sich entweder von Hand codieren, mithilfe von Editor-Applikationen wie Dreamweaver bauen oder auf Basis einer Online-CMS- oder Website-Baukasten-Plattform wie Wordpress, Wix, Jimdo, Squarespace oder auch der von «Swiss IT Magazine» im Frühling 2020 getesteten Schweizer Plattform Doitclever erstellen. Der manuelle Website-Bau und die Arbeit mit Code-nahen Editoren im Stil von Dreamweaver gestatten maximale Flexibilität hinsichtlich Gestaltung und Funktionen, aber es braucht dazu tiefgehende Kenntnisse und Erfahrung mit HTML, CSS, Javascript und weiteren Markup- und Programmiersprachen.

Im Fall des auch bei vielen Agenturen beliebten CMS Wordpress lässt sich zwar fast alles, was mit HTML, CSS & Co. möglich ist, umsetzen – aber der Aufwand, aus einer Wordpress-Website mehr zu machen als ein Blog, ist erheblich und erfordert teils seinerseits manuelles Codieren. Einfache Plattformen wie Wix oder Jimdo ermöglichen zwar die visuelle Zusammenstellung einer Website aus einfachen Bausteinen, bieten dagegen schlicht nicht die Flexibilität und die Möglichkeiten, die modernes Webdesign heute erfordert.

Visuelles Site Building mit Webflow

Webflow, die Online-Plattform des gleichnamigen Unternehmens aus San Francisco, kombiniert einen Browser-basierten visuellen Designer für Websites mit einem CMS und einem Hosting-Angebot. Der Designer setzt ganz auf das No-Code-Prinzip, bleibt dabei aber strikt bei den nativen Möglichkeiten und Regeln von HTML und CSS. Eine Webseite wird aus einzelnen Elementen wie Sections, Container, Grid, Heading, Text und Image zusammengestellt, die jeweils mit CSS-Attributen oder CSS-Klassen angereichert sind. Der Designer generiert dabei laufend den entsprechenden HTML- und CSS-Code, der jedoch stets im Hintergrund bleibt und in Webflow selbst weder angesehen (mit Ausnahme der CSS-Statements einzelner Klassen und Tags) noch editiert werden kann. Der Code lässt sich allerdings exportieren, was in der Gratisversion jedoch nicht möglich ist.

Der Webflow Designer ist in drei Bereiche eingeteilt. Ganz links im Browserfenster befindet sich eine Toolbar mit Buttons, die verschiedene Panels erscheinen lassen – Hinzufügen von Elementen, Symbolen, HTML-Navigator, Seiten, CMS Collections, E-Commerce und Asset Manager. Dazu kommen weitere Schaltflächen zum Aufruf der Hilfefunktion und von Video-Lektionen.

Den grössten Teil in der Mitte nimmt das Canvas ein, auf dem die Elemente platziert und verschoben sowie Inhalte editiert werden. Darüber stehen Buttons zum Wechsel zwischen verschiedenen Breakpoints, zum Exportieren des generierten HTML/CSS-Codes und zum Publizieren der Website bereit.

In der Sidebar am rechten Fensterrand lässt sich über den Reiter Style mit dem Pinsel-Icon das Style Panel anzeigen, in dem man die CSS-Eigenschaften des jeweils auf dem Canvas selektierten Elements im Detail einsehen und editieren kann, und zwar ohne jede Code-Eingabe und stattdessen über Buttons, Eingabefelder, Schieberegler und andere intuitiv verständliche Elemente. Das Panel exponiert nahezu alle aktuell gängigen Properties, auch Fortgeschrittenes wie 2D- und 3D-Transformationen, Transitionen und Filter. Zusätzlich ordnet man dem Element hier CSS-Klassen zu, die je nachdem in der gewählten Vorlage vordefiniert sind oder zuvor aus den Eigenschaften eines existierenden Elements erzeugt wurden.

Ein weiterer Reiter nennt sich Style Manager (Tropfen-Icon): Hier präsentiert Webflow Designer die Hierarchie der CSS-Klassen und die CSS-Eigenschaften der einzelnen Klassen und Tags. Die CSS-Statements einer Klasse erscheinen jeweils bei Mausberührung der Klasse, können aber im Style Manager nicht editiert werden – getreu dem No-Code-Prinzip, denn dafür ist allein das Style Panel zuständig.

Ein weiterer Reiter, markiert mit einem Blitz-Icon, gibt Zugriff auf das Interactions Panel, wo sich für das selektierte Element oder die ganze Seite Trigger wie Mausklick, Mouseover, Scroll into View oder Page Load sowie die durch den Trigger auszulösenden Aktionen definieren lassen, namentlich das Abspielen einer Animation.
Das CMS von Webflow arbeitet mit sogenannten Collections, also Sammlungen von Items, die aus frei definier­baren Feldern bestehen, und ist somit viel flexibler als eine Bloggin-fokussierte CMS Engine. (Quelle: Webflow)
Im Style Manager werden die definierten CSS-Klassen hierarchisch präsentiert. Der Code lässt sich einsehen, aber nicht direkt editieren. (Quelle: Webflow)
In der Gratis-Testversion kann man eine Website nur als Subdomain von webflow.io publizieren. (Quelle: Webflow)
Webflow bietet die Wahl zwischen rund 30 kostenlosen und über 100 zahlungspflichtigen Website-­Vorlagen. (Quelle: Webflow)

 
Seite 1 von 4

Neuen Kommentar erfassen

Anti-Spam-Frage Wieviele Zwerge traf Schneewittchen im Wald?
Antwort
Name
E-Mail
GOLD SPONSOREN
SPONSOREN & PARTNER