Webflow ist ein wunderbares Tool, wenn es darum geht, Marketing-Webseiten zu erstellen. Die Designmöglichkeiten sind nahezu unendlich und die Funktionen auf Marketer zugeschnitten. Durch die Möglichkeit einfach kostenlos zu starten ist man dazu geneigt sich einen Account zu erstellen, in den Designer zu hüpfen und loszulegen, Elemente auf die weiße Leinwand zu ziehen.
Aber warte!
Die richtige Vorbereitung wird dir und deinem Unternehmen später unendlich viele Stunden ersparen. Eventuell wird es dir auch ersparen, mir so eine Nachricht zu schreiben:
Leider ist es hier meistens schon zu spät.
Klassen
Erst einmal ist es wichtig zu verstehen, wie Webflow funktioniert. Jedes Element, das man in Webflow sieht, benötigt in der Regel eine Klasse.
Klassen sind etwas Wunderbares – ich gebe z.B. einem Button einen Namen (also eine Klasse) und verwende diesen Namen dann für jeden weiteren Button, der vom Design gleich ist.
Möchte ich nun eine Änderung am Design des Buttons machen, muss ich nicht jeden einzelnen Button auf der Webseite anfassen, sondern ändere dies nur einmal. Jeder Button, der den gleichen Klassennamen hat, übernimmt nämlich diese Änderung.
Das ist der große Vorteil an Klassen.
Das Risiko
Das klingt doch alles ganz gut, oder? Hier gibt es nun folgendes Szenario, dem ich immer wieder begegne:
Entweder wurden keine Klassen für die Elemente vergeben, dies ist nämlich auch möglich. Dann kümmert sich Webflow um die Namensgebung der Klassen. Vergebe ich keine Klasse, um bei diesem Beispiel zu bleiben, einen Button, nennt Webflow den erst einmal „Button“.
Das ist ganz OK – ein sehr treffender Name.
Füge ich jetzt einen weiteren Button ein und möchte jedoch mehr Margin oberhalb des Buttons, nennt Webflow den Button „Button 2“. Du merkst schon, wo das hinführt. Diese Buttons haben also zwei verschiedene Klassen – Änderungen werden untereinander also nicht mehr übernommen.
Ich habe schon Seiten gesehen, die 20 verschiedene Button Klassen haben – sehr kritisch, wenn man mal etwas global bei den Buttons ändern möchte.
Und dies gilt für alle möglichen Elemente in Webflow. Das heißt, wenn man eine Standardwebseite mit 3–4 Unterseiten hat, kommt man in ein unheimliches Klassenchaos. Einen Weg heraus, gibt es dort nicht mehr wirklich – in der Regel steht ein Rebuild der gesamten Webseite an.
Wie vermeide ich das?
Ok, genug mit den Klassen-Gruselgeschichten.
Wie gehts nun richtig?
Das oben beschriebene Problem ist nicht selten – wie gesagt, ich begegne diesen Problem andauernd.
Deswegen wurde es in Webflow zum guten Standard, einen Style Guide zu verwenden.
Style Guide – die Lösung.
Ein Style Guide ist eine Unterseite in Webflow, indem alle möglichen Klassen einmal definiert werden. Das heißt, dort findet man alle Überschriften, Farben, Buttons, Layouts usw.
Sobald die Klassen einmal im Style Guide definiert wurden, kann man diese immer wieder auf der Webseite verwenden. Möchte man etwas ändern, geht man in den Style Guide, macht einmal diese Änderung und die Änderung wird sofort auf der gesamten Webseite übernommen.
Ich persönlich empfehle den Style Guide von Finsweet.
Der Vorteil dabei ist, dass bereits ein sehr großes Klassen-Verzeichnis mitkommt. Das heißt, ihr müsst nicht mehr jede Klasse mühsam erstellen, sondern könnt mit der bereits aufgebauten Bibliothek an Klassen arbeiten.
Zudem arbeiten die meisten Freelancer mit diesem Styleguide – das heißt egal welcher Webflow Experte mit eurer Webseite in Zukunft arbeitet, er findet sich sofort zurecht, da die Webseite auf einem ihn bekannten System aufbaut.
Was ist, wenn jetzt eine Änderung bei nur einem einzelnen Element machen möchte?
Es kommt immer wieder vor, dass man Elemente speziell stylen möchte. Hierzu kommen nun Combo-Klassen ins Spiel.
Das heißt, ich erweitere zum Beispiel die Button-Klasse um eine weitere Klasse, und kann jetzt das Element individuell bearbeiten. Diese Combo-Klasse kann ich anschließend ebenso wieder verwenden, sollte doch noch einmal ein Element die gleiche „spezielle“ Anpassungen benötigen. Und diese Elemente sind dann wieder miteinander verknüpft.
Zudem reagiert die nicht überschriebenen Werte weiterhin auf die ursprüngliche Klasse – somit hängen diese Elemente nach wie vor mit der ursprünglichen Version zusammen.
Die Vorteile
Die konkreten Vorteile eines Style Guides liegen also auf der Hand:
- Man hat ein einheitliches System in Webflow, auf das jeder, der mit eurer Webseite arbeitet, zugreifen kann. Jeder weiß, wo Elemente definiert werden und können ganz einfach globale Änderungen machen.
- Der Style Guide hat bereits vordefinierte Klassen. Du möchtest bei einem Element etwas mehr Padding hinzufügen. Dann verwende eine der Padding-Klassen. Diese reichen von sehr klein zu sehr groß.
- Dadurch, dass man mit Klassen arbeitet, kann es auch nicht passieren, dass Abstände oder Element-Größen unterschiedlich sind. Die Webseite folgt den immer gleichen Richtlinien – ändert man diese Richtlinien, ändern sie sich einheitlich auf der gesamten Webseite.
Wie funktioniert das jetzt?
- Finsweet hat hierzu eine umfangreiche Anleitung, um alle Funktionen des Style Guides zu verstehen. Gehe die Anleitung von vorne bis hinten durch, damit du das System auch verstehst und damit arbeiten kannst. Es empfiehlt sich jeden, der mit eurer Webseite arbeitet, auf dieses System zu schulen. Hier gehts zum offiziellen Guide: https://finsweet.com/client-first
- Wenn du bereit bist, dupliziere den Style Guide in deinen Workspace. Gehe auf die Page “Style Guide” und definiere hier erst einmal alle Schriftarten, Größe, Abstände, Farben, Buttons, usw..
- Anschließend kannst du schon mit der Umsetzung deiner Webseite beginnen. Springe bei Unsicherheiten immer wieder in den Guide von Finsweet zurück, um die Best Practices wirklich zu verstehen und umzusetzen.
Anfangs kann das alles erstmal verwirrend sein und du denkst dir vielleicht “anders bin ich doch viel schneller”. Aber ich verspreche dir, nach ein bisschen Übung hast du das System richtig verstanden und bist deutlich schneller als vorher. Und in Zukunft müssen wir deine Webseite nicht nochmal komplett neu machen, weil man nicht mehr weiß welche Klasse eigentlich was macht.
Solltest du Fragen dazu haben, schreib mir gerne. Gerne unterstütze ich dich beim richtigen Start mit deiner neuen Webseite.
