Webflow Best Practices: So sparst du Zeit mit Defaults & Templates

Ein neues Webflow-Projekt ohne Vorbereitungen zu starten, ist wie das Kochen ohne Rezept - früher oder später kommst du ans Ziel, aber wahrscheinlich unordentlich und gestresst. Stattdessen gibt es bereits zu Beginn jeder Webseite einige Anpassungen, die repetitive Styleänderungen reduzieren, den Entwicklungsprozess strukturierter gestalten und Stunden im Verlauf einsparen.

‍

Da dieser Prozess jedoch oft individuell ist, führe ich dich in diesem Artikel Schritt für Schritt durch meine Go-to-Einstellungen und Styles, die ich vor jeder neuen Webseite anpasse – ganz egal, ob für Kundenprojekte oder für mich selbst.

‍

Dabei verfolgen diese Tipps in erster Linie das Ziel, den weiteren Verlauf eines jeden Projekts einfacher und weniger fehleranfällig durch wiederverwendbare Komponenten und Default-Styles zu gestalten. Nimm dir diese Liste also gerne als Inspiration, um über eigene Ideen nachzudenken und deine Website-Workflows ein wenig effizienter zu gestalten!

Wieso sind Vorbereitungen notwendig?

Noch bevor wir uns mit den Details befassen, werfen wir einen Blick auf das große Ganze.

‍

Die Voreinstellungen einer Webseite funktionieren als Basis für den gesamten Prozess. Wenn sie bewusst umgesetzt werden, eliminieren sie repetitive Anpassungen, minimieren Designfehler und erleichtern das kollaborative Arbeiten an geteilten Projekten.

‍

Im Allgemeinen fallen die meisten Schritte in eine der drei Kategorien:

• Defaults: Ausgewählte HTML-Elemente wie Headings, Links, Rich Text und Inputs können gestylt werden, noch bevor eine Klasse angewendet wird. Diese Styles werden seitenweit auf alle Instanzen dieses Elements übernommen.
• Wiederverwendbarkeit: Sektionen oder Elemente, die vermehrt auf der gesamten Webseite verwendet werden, können mit Komponenten standardisiert werden.
• Einstellungen: Webflow bietet eine breite Auswahl an Einstellungen, um festzulegen, wie Seiten, Schriftarten und CMS-Collections interagieren. Die richtige Verwendung dieser wirkt sich auf alle Faktoren von DSGVO-Konformität bis hin zu SEO-Platzierungen aus.

Diese Stellschrauben bewusst zu wählen, ist bereits die halbe Miete eines jeden Projekts. Im Anschluss liegt der Fokus nämlich vollständig auf der Entwicklung jeder Unterseite, anstatt die fünfte Klasse für eine Überschrift zu erstellen.

Projektweite Einstellungen

Die ersten Anpassungen finden bereits außerhalb des Webflow Designers statt, nämlich in den Seiteneinstellungen des Projekts (nicht zu verwechseln mit den Seiteneinstellungen der Unterseiten im Designer).

‍

Zuerst lade ich alle Schriftarten inklusive Variationen als Dateien unter dem Tab „Fonts“ hoch, anstatt direkt auf die Google Fonts zuzugreifen. Die Vorteile hieraus sind zweierlei:

• Direkte Kontrolle über die Variationen der Schriftart. Die Webseite lädt nur die Versionen, die tatsächlich verwendet werden.
• Einhaltung der DSGVO-Richtlinien. Google lädt automatisch ein Skript mit der Seite, das die Einwilligung des Nutzers per Cookie erfordert.

Dadurch bleibt die Webseite unabhängig von Google-Skripten und schützt die Privatsphäre der Nutzer.

‍

Im selben Zuge lohnt es sich, sofort das Favicon und den Webclip im „General“-Tab einzufügen. Diese kleine Anpassung geht oft im Verlauf eines Projekts unter, ist jedoch essenziell, um jeder Webseite ein professionelles Image zu verleihen.

‍

Best Practice: Alle Seiteneinstellungen sollten vor dem Launch erneut mit einer vorgefertigten Checkliste überprüft werden, um böse Überraschungen zu vermeiden.

Defaults im Webflow-Designer

Mit den Seiteneinstellungen geregelt, betreten wir nun den Webflow Designer. Hier legen wir Default-Styles für alle notwendigen Elemente fest, um Einheit zu bewahren und überflüssige Klassen auf jeder Unterseite zu vermeiden.

‍

Anfangs lohnt es sich, alle Text- und Hintergrundfarben im „Variables“-Tab anzulegen. Dadurch lassen sich im Verlauf des Projekts einfach globale Anpassungen vornehmen, wenn der Kunde schon wieder eine neue Farbe entdeckt hat und sie in sein Branding aufnehmen möchte.

‍

Des Weiteren passe ich die standardmäßigen CSS-Styles der HTML-Elemente an:

• Body: Der Body erhält eine Schriftgröße von 1 rem, einen Zeilenabstand von 1.3 sowie die Schriftart des Projekts in der Variation „normal“. Mehr Informationen über den Hintergrund findest du in meinem Guide zu Pixel, REM und EM.
• Link Block / Text Link: Unterstrich entfernen, Schriftfarbe per Custom Property auf „inherit“ setzen und Animationen für den „Hover“- und „Pressed“-Zustand einfügen, um dem Nutzer interaktives Feedback zu geben.
• Überschriften H1–H5: Top- und Bottom-Margin entfernen sowie Zeilenabstand und Schriftgröße je nach Hierarchie für Desktop, Tablet und Mobile festlegen.
• Paragraph: Bottom-Margin entfernen.

Weitere Elemente mit Default-Styles wie Listen, Rich Text, Bilder oder Formulare passe ich nur bei Bedarf an, sobald die entsprechende Instanz auf einer Unterseite vorkommt. Falls du jedoch bereits weißt, dass du viele Komponenten mit z. B. Inputs bauen wirst, lohnt es sich definitiv, diesen Schritt zuvor abzuhaken.

Wiederverwendbare Komponenten

Mit Default-Styles müssen wir nicht jedes Element einzeln stylen. Analog müssen wir mit Komponenten ganze Sektionen nicht einzeln bauen, wobei seitenweite Anpassungen aller Instanzen weiterhin möglich sind.

‍

Ich verwende Komponenten nicht nur für Sektionen, sondern auch für alle Elemente, die häufig in Kombination vorkommen:

Struktur-Templates

Der Aufbau jeder Sektion meiner Webseiten ist gleich: Section > Padding > Container > leerer Div. Das Gleiche gilt auch für alle Unterseiten: Page Wrapper > Global Styles, Navigation, Main Wrapper, Footer.

‍

Anstatt diese Elemente jedes Mal bei einer neuen Sektion oder Unterseite einzeln einzufügen, erstelle ich eine Komponente dafür. Sobald ich z. B. eine Sektion beginne, ziehe ich die Komponente aus dem Menü, entkopple sie, damit nur diese Instanz bearbeitet wird, und habe den gesamten Aufbau mit einem Klick.

Button-Element

Nicht alle UI-Elemente sollten per Link oder mit dem nativen Button-Element in Webflow abgebildet werden. Daher lohnt es sich, einen eigenen Button mithilfe des „Custom Element“ anzulegen und als Komponente zur Verwendung in FAQs und Slidern bereitzuhalten.

‍

Somit erhältst du als Entwickler genauere Kontrolle über die Barrierefreiheit und Funktion des Buttons, ohne jedes Mal alle Einstellungen von Grund auf vornehmen zu müssen.

Normale Komponenten

Natürlich bleibt dann noch die ganz normale Art, wiederkehrende Sektionen per Komponente in einem Projekt zu verwalten. Speziell die Navigation und der Footer sind Bestandteil jeder Unterseite und sollten stets zentral bearbeitet werden können, ohne durch alle Seiten klicken zu müssen.

‍

Hinweis: Webflow erlaubt Komponenten als Teil von anderen Komponenten zu speichern. Das bedeutet, du kannst die Navigation und den Footer als Teil deines Struktur-Templates einfügen.

‍

Zusammenfassend lassen sich Komponenten besonders gut einsetzen, um den Workflow zu beschleunigen und mehrere Instanzen derselben Sektion über die ganze Webseite hinweg zu bearbeiten.

Unterseiten & CMS Kollektionen

Auch das Erstellen von Unterseiten und CMS-Kollektionen kann den Flow beim späteren Entwickeln unterbrechen. Deswegen solltest du auch diesen Schritt an den Beginn deines Projekts ziehen.

• Erstelle alle Unterseiten zu Projektstart. Somit kannst du bereits während des Bauens alle Verlinkungen richtig setzen und Broken Links vorbeugen.
• Definiere alle CMS-Listen und korrespondierenden Felder im Voraus. Füge Beschreibungen zu Feldern mit besonderem Format hinzu, um Klienten und Teammitgliedern zu helfen.
• Formuliere mehrere Beispiel-Items in deinen CMS-Kollektionen, um Layouts und Integrationen während der Entwicklung besser nachverfolgen zu können.
• Deaktiviere die Veröffentlichung aller CMS-Unterseiten, die keinen Inhalt haben. Dadurch bleibt deine Sitemap übersichtlich für Crawler und KI-Modelle.

‍

Best Practice: Der Name einer CMS-Kollektion kann Emojis beinhalten. Somit kannst du durch Symbole wie „🔒“ visuelle Hinweise geben, welche Listen bearbeitet werden dürfen.

Fazit

Fassen wir die Key-Takeaways zusammen: Diverse Vorbereitungen – von den Seiteneinstellungen bis zu eigenen Komponenten – machen den Entwicklungsprozess nicht nur schneller, sondern ebenfalls weniger anfällig für Fehler. Vor allem bei großen Projekten zeigt sich der Vorteil eines durchdachten und zentral verwalteten Systems schon von Beginn an.

‍

Daher ermutige ich dich, vertieft über deine aktuellen Workflows in Webflow nachzudenken und Möglichkeiten zu finden, diese mit Defaults und Komponenten effizienter zu gestalten. Falls du dich alternativ weiter zum Thema Klassenbenennung informieren möchtest, habe ich einen umfassenden Guide mit Beispielen verfasst!