Das Fundament

Ein gut funktionierendes Fundament ist essentiell wichtig für skalierbare Websites, deswegen sollten Aufbau und Struktur gut durchdacht sein.

Webflow-Elements den Rücken kehren

Custom Elements sind für mich nicht mehr wegzudenken. Ich nutze mittlerweile kaum noch Webflow-Elements wie Formulare, Inputs oder Buttons, um Interaktionen oder Funktionalität zu schaffen. Stattdessen setze ich beispielsweise auf ein Custom Element als Formular mit Custom Inputs, welche mir mehr Freiheit geben. Ich kann so ein Input-Component erstellen und Properties wie Label, Placeholder, Inputmode und vieles mehr vergeben. Dadurch sind Kunden in der Lage, komplexe Formulare aus einzelnen Bestandteilen zusammenzusetzen - besser als in manchen CRM-Tools.

Da es Buttons nativ gar nicht gibt, nutze ich auch hier das Custom Element, denn der Webflow-Button ist eigentlich ein Link-Element und hat damit eine andere Funktionalität, als bei interaktiven Elementen wie Menüs oder Tabs benötigt wird. In Kombination mit JavaScript können dann Attribute wie “disabled” gesetzt werden, was wichtig für Semantik und Barrierefreiheit ist.

Components & Properties

Eine Strategie, die Lumos sehr stark aufgreift, sind Open Components. Hier ist die Idee, dass man nicht jede Sektion geschlossen erstellt, sondern globale Components (z.B. Text, Heading, Buttons mit Properties) und diese dann beliebig im Build-Modus platziert. Dazu nutzt man Slots in anderen Components und verschachtelt die Elemente.  Das hat den Vorteil, dass Seiten um ein Vielfaches schneller erstellt werden können und Kunden frei bei der Pflege von Seiten sind.

Zusätzlich erstelle ich gerne Component-Varianten, um weniger Components mit mehr Möglichkeiten zu schaffen. Beispielsweise habe ich nur ein Button-Element, welches jedoch durch verschiedene Varianten als Secondary Button oder Link dargestellt werden kann. Hier ist wichtig zu beachten, dass die Funktionalität oder der Inhalt gleich sein sollten. Sonst macht es mehr Sinn, ein neues Component anzulegen. 

Vor kurzem hat Webflow ein Update zu Conditional Visibility gebracht, welches die Möglichkeiten von Components erweitert hat. Jetzt kann die Sichtbarkeit an verschiedene Properties verknüpft werden, beispielsweise bei Text-Elementen, die nicht angezeigt werden sollen, wenn der Text leer ist oder Buttons, wenn kein Link hinterlegt ist.

Variablen mit calc() und Themes

Variablen haben für mich vieles in der Entwicklung mit Webflow vereinfacht - weit über Farben hinaus. So nutze ich oft CSS Funktionen, um komplexe Strukturen zu erstellen. Ein Beispiel dafür ist der horizontale Abstand in Modals und Pop-Ups. Wenn das Design ein Element innerhalb des Modals vorgibt, das einen farblichen Hintergrund über die gesamte Breite haben soll, kann ich mit calc(var(--padding) * -1) einen negativen Abstand erstellen, um so den Hintergrund über die gesamte Breite zu färben. Dann nutze ich innerhalb des Modals und der gefärbten Div wiederum var(--padding), um die inneren Abstände einheitlich zu halten. Ändert der Kunde in Zukunft die Abstände, wird nur eine Variable angepasst und die anderen ändern sich darauf aufbauend automatisch.

Natürlich nutze ich Variablen auch für Farben, die in Lumos vor allem in Themes genutzt werden. Das bedeutet, es wird eine eigene Variablen-Kollektion erstellt, um Themes mit Farben zu verknüpfen. Dadurch kann man im Designer mit einem Klick das komplette Theme (z.B. Dark Mode) anpassen, während alle darin befindlichen Elemente weiterhin gut sichtbar sind. Das wird auf Text, Hintergründe, Fokus und mehr angewendet.

Webflow-Hacks

Eine Kleinigkeit vorab, die viele Webflow-Nutzer sicherlich nicht kennen: Wenn man CMS-Listen einer anderen Kollektion zuweisen möchte, hat man in der Regel mit Tools wie F’insweet oder von Hand die Inhalte entknüpft und die Kollektion geändert. Das geht jedoch zum Glück viel einfacher. Man muss nur auf das Schloss klicken und anschließend mit den Pfeiltasten die Kollektion ändern. Webflow versucht dann sogar, die neuen Felder mit den Inhalten in der Liste zu verknüpfen, was meist ganz gut funktioniert. 

Nun zu den Assets, bei denen sich neben dem Komprimieren von Bildern viel getan hat. Das automatische Setzen von Alt-Texten, die zutreffend und in der richtigen Sprache sind, spart viel Zeit und vermeidet menschliche Fehler. Auch das “Replace-Image”-Feature kommt bei Kunden gut an, da man so mit einem Klick das Bild auf der ganzen Seite tauschen kann. Ein weiteres AI-Feature ist der Schema-Generator, der sicherlich noch nicht perfekt ist, aber schon gute Schemas erstellt, welche die Sichtbarkeit der Seite um ein Vielfaches verbessern können. Alt-Texte sollten natürlich immer gegengelesen und generiertes Schema mit dem Test für Rich-Suchergebnisse oder Validator von schema.org kontrolliert werden.

Externe Tools

Webflow kann schon wirklich viel, aber es hat Grenzen - vor allem, wenn es um Interaktion geht. Deswegen möchte ich hier noch ein paar externe Tools vorstellen, die ich gerne in meinem Arbeitsalltag nutze:

F’insweet

Die meisten werden F’insweet sicherlich schon kennen, aber durch das Update auf Attributes V2 hat sich vieles verbessert. Mit F’insweet kann man JavaScript-Interaktivität auf Seiten bringen, zum Beispiel durch das Filtern, Laden und Sortieren von CMS-Kollektionen oder kleinen hilfreichen Tools wie zur Erstellung eines Inhaltsverzeichnisses für Artikel. Ich nutze F’insweet in fast jedem Projekt und bin sehr dankbar, dass sie die Tools kostenfrei für alle zur Verfügung stellen. Der häufigste Anwendungsfall bei mir sind Filter für CMS-Kollektionen, die man sonst nur mit viel Aufwand selbst in JavaScript schreiben muss.

Swiper JS

Webflow stellt in seinen nativen Elementen einen Slider zur Verfügung, jedoch ist dieser sehr stark in seiner Funktionalität eingeschränkt. Deshalb nutze ich auch hier ein externes Tool in jedem Projekt - Swiper JS. Mit Swiper JS kann man komplexe Slider bauen, die in ihrem Aufbau sehr unterschiedlich sein können. Die zahlreichen Eigenschaften, Methoden und Events ermöglichen es, mit externen Tools oder selbstgeschriebenen JavaScript zu kommunizieren, um die native Funktionalität zu erweitern. Man kann Slides gruppieren, automatisch sliden lassen, Pfeile und Bullets dynamisch erstellen und stylen, Timings und Delays einstellen und vieles mehr. 

Alpine JS

Alpine JS ist ein JavaScript Framework, welches reaktiv das HTML verändert und das Schweizer Taschenmesser unter den Tools ist, die Webflow erweitern. Mit Alpine JS kann man vieles umsetzen, aber ich nutze es häufig für Tabs, Menüs, Formulare und andere interaktive Elemente, die man sonst mit JavaScript erstellen würde. Der Vorteil an Alpine ist, dass man in den meisten Fällen keine Zeile Code schreiben muss, um diese interaktiven Elemente zu erstellen, denn man setzt HTML-Attribute auf die entsprechenden Elemente und lässt sie anhand von Variablen reagieren. 

So setzt man zum Beispiel x-show=”tab === 1” (“x-show” zeigt ein Element an, wenn die Bedingung wahr ist) und auf dem darüberliegenden Element x-data=”{ tab: 1 }”. Wenn jetzt die Variable “tab” auf eine andere Zahl als 1 gesetzt wird, ist das Tab-Element nicht mehr sichtbar. Dieses Prinzip kann man beliebig erweitern - auch mit eigenem JavaScript.

Liquiflow

Liquiflow geht in eine andere Richtung als die bisher genannten externen Tools, da es nicht die Funktionalität von HTML und CSS erweitert, sondern die Seite in die Template-Sprache “Liquid” konvertiert. Es schafft also die Brücke zwischen der Designfreiheit aus Webflow und dem mächtigen E-Commerce-Backend von Shopify. Liquid baut auf Ruby on Rails auf und wird in jedem Shopify-Shop für Themes genutzt. Dort hat man die Möglichkeit, auf viele verschiedene Variablen zuzugreifen, die im Backend gerendert und fertig an die Besucher gesendet werden. Um das in Webflow zu ermöglichen, setzt man Attribute auf Elemente und konvertiert dann das gesamte Projekt zu einem fertigen Theme. Ein Beispiel ist li-settings:text=”Text”, welches nach der Konvertierung im Shopify-Customizer ein Feld erstellt, mit dem man den Textinhalt beliebig ändern kann. Das gleiche Konzept gibt es mit Bildern, Links, Kollektionen und anderen Elementen.

Webflow ist erst der Anfang

Die Lernkurve von Tools wie Alpine oder Liquiflow mag sicherlich recht steil sein, da sie das HTML und CSS von Webflow um JS und Liquid erweitern, jedoch öffnen sich zahlreiche neue Türen für dich, da du deine Arbeit nun noch professioneller anbieten kannst.

Webflow ist schon lange kein “Drag-and-Drop”-Builder mehr, sondern bietet ein gutes Fundament für Enterprise-Sites, die mit den richtigen Tools überzeugen. Also schau dir gerne Lumos, Alpine, F’insweet, Swiper und Liquiflow an.

‍