Webflow – Design und Entwicklung in einem Schritt

Was ist Webflow?

Nur ein weiterer WYSIWYG HTML-Editor mit schlechter Usability und unübersichtlichem Code, oder ein Interessantes Programm, das Design und Entwicklung von Websites in einem Arbeitsschritt ermöglicht?

Webflow ähnelt im Prinzip dem Adobe Programm “Muse”, mit dem wir uns im ersten Semester des Onlinemedien-Studiums bereits beschäftigen durften. Mit Muse haben dabei viele von uns eher wenig gute Erfahrungen gemacht. Die Bedienbarkeit wirkt wenig intuitiv und es dauert lange, sich in dem Programm zurecht zu finden. Sind einem die Begrifflichkeiten von HTML und CSS bekannt, findet man sich in Webflow sehr schnell zurecht. Im Gegensatz zu Muse ist Webflow kein Programm, das eine Installation benötigt, sondern wird im Webbrowser ausgeführt. Die einfache und übersichtliche Benutzeroberfläche werde ich euch im Folgenden vorstellen.

Ein weiterer Pluspunkt ist, dass Webflow im Gegensatz zu Muse keinen “Spaghetti-Code” generiert, sondern sauberen, semantisch korrekten Code, mit dem man einfach weiterarbeiten kann. Außerdem bietet Webflow die Möglichkeit, Custom-Code einzubinden. Hiermit kann man beispielsweise verschiedene APIs direkt in den Code integrieren.

 

Der größte Vorteil

Jeder der in einer Werbe- oder Webagentur arbeitet, kennt das Hin und Her zwischen der Design- und Entwicklungsabteilung. In dieser Arbeitsteilung wird das Design strikt in Programmen wie Photoshop oder Sketch erstellt und dann an die Entwickler weitergegeben. Dabei müssen die Designer ständig neue Mockups für Desktop-, Tablet- und Mobile-Auflösungen erstellen, nur, um von den Entwicklern zu hören, dass dies oder das nicht möglich sei. Kommen dann noch ständige Korrekturen von Kunden dazwischen, dauert dieser Prozess ermüdend lange. Oftmals entsteht dadurch Zeitdruck und am Ende sind Designer und Entwickler mit dem Ergebnis unzufrieden.

Dieser komplette Arbeitsschritt entfällt mit Webflow. Hier entsteht eine Kombination aus Designer und Entwickler, denn der Designer muss sich den Grenzen von HTML und CSS bewusst sein, sowie deren Syntax beherrschen. Der exportierte Code kann dann an die Entwickler übergeben werden, um ggf. in einem CMS wie Typo3 umgesetzt zu werden, oder direkt als statische Webseite online gehen.

 

Der “Designer”

Der Designer ist der Teil des Programms, in dem wir die Webseite erstellen. Dieser ist in vier Bereiche aufgeteilt: Navigationsleisten am linken und oberen Bildschirmrand, die sogenannten “Panels” am rechten Bildschirmrand und in der Mitte die Vorschau unserer Webseite, das sogenannte “Display”.

In der Top-Navigation befinden sich allgemeine Einstellungen, hier können z.B. SEO Maßnahmen getroffen werden, Domain-namen vergeben werden oder Schriftarten importiert werden. Außerdem befindet sich dort eine Möglichkeit zum Preview der Seite in verschiedenen Viewports. Mit dem Button “Export” lässt sich der von Webflow erstellte Code herunterladen. Mit dem Publish-Button kann man die Webseite auf einer Webflow-Subdomain hosten, um sie auch in anderen Browsern schnell testen zu können.

In der linken Navigation befindet sich die Funktion “Add Elements”. Hier lassen sich aus einer Liste bekannte HTML Elemente wie Tabellen, Buttons, Div-Blöcke usw. auf der Webseite platzieren. Außerdem sieht man hier alle Seiten bzw. Unterseiten, die man in einem Projekt erstellt hat mit jeweiligen Einstellungen.

Das interessanteste Panel ist wohl das Style-Panel, hier können sämtliche CSS Eigenschaften eines ausgewählten Elements geändert werden. Das heißt die Abstände, Position, Typografie, Effekte und Dimensionen etc. können mit einem Klick verändert werden und die Änderungen werden in Echtzeit im Display dargestellt. Will man zum Beispiel seine komplette Webseite blau färben, würden man das body-Element auswählen, und als Background color “blue” auswählen. Für die Elemente können hier auch Klassennamen vergeben werden, wie man es eben vom klassischen CSS-Coding kennt.

Ich könnte euch jetzt noch weiter die Funktionsweise erklären, allerdings kann ich das unmöglich besser machen, als die zahlreichen Video-Tutorials von Webflow selbst. Diese findet Ihr hier: https://university.webflow.com/

Ihr könnt Webflow kostenlos ausprobieren, das ganze ist dabei begrenzt auf eine Webseite, deren Code ihr nicht exportieren könnt. Ihr könnt die Seite aber veröffentlichen und unter der Webflow subdomain ganz normal aufrufen und euch den Quelltext anzeigen lassen. Auf https://webflow.com/ könnt Ihr euch genauer über die Funktionsweise informieren, sowie über das integrierte Webflow CMS. Unter https://webflow.com/discover/popular findet Ihr einige Showcases, die zeigen, was mit Webflow so möglich ist.

Mir persönlich macht die Arbeit mit Webflow viel Spaß und geht schnell von der Hand. Mit den vielen Tutorials kann man schnell verschiedene Designs nachbauen und lernt dabei auch etwas für die klassische Arbeit mit HTML und CSS. Die klassische Arbeitsweise sollte einem schon einigermaßen vertraut sein, erst dann kann man das volle Potential von Webflow nutzen. Am besten finde ich, dass das ständige Hin- und Her-Switchen zwischen HTML-Editor, Browser und Entwicklerwerkzeugen wegfällt.

Quellen:

https://medium.com/@ryryjmo/why-i-ditched-sketch-for-webflow-45c8531d4b0 (21.09.17)

https://webflow.com/designer (21.09.17)

http://t3n.de/news/responsive-webdesign-intuitives-452281/ (21.09.17)

https://webflow.com/ (21.09.17)

 

Und die eigene Erfahrung mit Webflow 😉