Wir Webflow Entwickler versuchen so sauber und übersichtlich wie möglich zu arbeiten, um eine klare Struktur im Projekt zu gewährleisten. So haben wir in der Regel weniger Arbeit und die Website ist weniger fehleranfällig. Um eine einheitliche Entwicklung zu gewährleisten, hat das Unternehmen das Style System Client-First ins Leben gerufen. Dieser Ansatz zielt darauf ab, Webflow Websites so zu strukturieren und zu entwickeln, dass sie nicht nur den Anforderungen des Kunden gerecht werden, sondern auch effizient, skalierbar und leicht zu warten sind. Client-First arbeitet mit einem optimierten und verständlichem Klassensystem, darüber hinaus lassen sich Stile, Farben und Elemente direkt in einem Style Guide global anpassen. In diesem Blogbeitrag möchte ich das Client-First Style System erklären und die besten Arbeitsweisen vorstellen.
Um einen optimalen Start in Webflow-Projekte zu gewährleisten, empfiehlt es sich, das Client-First-Template von Finsweet zu nutzen. Dieses Template dient als exzellente Basis und erleichtert die Entwicklung, indem es klare Strukturen und Richtlinien vorgibt.
Hier gibts das Clonable: https://webflow.partnerlinks.io/client-first-template-finsweet*
Konzept, Struktur und Aufbau
Mit Client-First erstelle Seiten folgen einem bestimmten Schema:
page-wrapper: Dieses Element umschließt sämtliche Inhalte der Website ohne Ausnahme. Es dient als übergeordneter Container, der hilft, den gesamten Seiteninhalt strukturiert zu halten.
Global Styles: Dies bezieht sich auf ein Custom Code Component, welches CSS-Stile enthält, die universell auf die gesamte Website angewendet werden. Hier werden allgemeingültige Designregeln definiert, wie Schriftarten, Farbschemata und andere Basisstile.
nav_fixed / Navbar: Die Navigationselemente der Website, die als Component implementiert sind. Wird diese innerhalb eines div mit der Klasse nav_fixed platziert, bleibt die Navigationsleiste am oberen Bildschirmrand fixiert, auch beim Scrollen.
main-wrapper: Ein Container, der alle Hauptsektionen der Website umfasst, typischerweise ausgenommen der Navigation und des Footers. Dies ermöglicht eine klare Trennung zwischen den Hauptinhalten und den wiederkehrenden Elementen wie Kopf- und Fußzeile.
section_name: Ein Bereich, der die Elemente einer spezifischen Sektion umfasst. Wichtig ist hier, das HTML-<section> Tag zu nutzen, um den Inhalt für Suchmaschinen entsprechend zu markieren und die Struktur der Seite zu verbessern.
padding-global: Ein Stilattribut, das den allgemeinen Innenabstand der Inhalte zu den Rändern des Containers definiert. Dies sorgt für ein konsistentes Layout und ausreichend Weißraum, der die Lesbarkeit und Ästhetik der Seite verbessert.
container-large: Eine Klasse, die eine maximale Breite für Inhalte festlegt, um eine angemessene Darstellung auch auf größeren Bildschirmen zu gewährleisten. Dies verhindert, dass Inhalte zu breit und damit schwer lesbar werden.
Klassennamen
Einige Klassennamen werden direkt von Finsweet im Style Guide vorgegeben z. B. padding-global oder text-size-large.
Verwendest Du individuelle Elemente mit eigenen Stilen und möchtest dafür eine eigene Klasse erstellen gehst Du wie folgt vor:
Seite_Sektion_Element
Typische Beispiele wären: home_hero_image, about_benefits_component, webdesign_hero_image-wrapper
Style Guide
Die meisten Elemente, die Du zum Start für die Entwicklung in Webflow benötigst, sind direkt in dem Style Guide des Templates verpackt.
Headlines: Differenziere zwischen Element- und Klassenebene für H1, H2 usw., um die richtige Hierarchie zu erzielen, etwa indem Du einer H2 die Stile von H1 durch die Klasse ‘heading-style-h1’ zuweist.
Textgrößen: Definiere unterschiedliche Textgrößen wie ‘text-size-large’ und ‘text-size-medium’ entsprechend Deines Designs.
Container: Pass die Standardbreite der Container an, um sie Deinen Designanforderungen anzupassen.
Paddings: Nutze ‘padding-sections’ für vertikale Abstände, angebracht als Komboklasse auf das ‘padding-global’ Element.
Buttons: Gestalte Buttons ganz nach Deinen Vorstellungen.
Achte bei allen Elementen darauf, die mobilen Version ebenfalls anzupassen.
Farben
In den neuen Variablen von Webflow passt Du die Farbcodes ganz einfach an und kannst diese dann auf Elemente setzen. Um Texten und Hintergründen einen neuen Look zu geben, wechselst Du einfach die Farben auf den Klassen ‘text-color-…’ und ‘background-color-…’ im Style Guide – so verpasst Du den Elementen Deiner Website im Handumdrehen eine frische Ausstrahlung.
Tipps und Tricks für die Entwicklung
Orientiere Dich an bestehenden Projekten und dem Client First Template: Ein Blick auf erfolgreiche Beispiele, wie das ältere Projekt fs-template-11 auf Webflow, kann Dir wertvolle Einblicke und Inspiration bieten. Auch wenn es sich um eine ältere Version des Client-First Templates handelt, sind die Grundprinzipien immer noch relevant und hilfreich für Dein eigenes Design.
Nutze die Finsweet Chrome Extension: Diese Erweiterung ist ein unverzichtbares Werkzeug, das Deinen Workflow in Webflow durch zusätzliche Funktionen und Hilfsmittel verbessert. Es erleichtert das Einhalten des Client-First Ansatzes und sorgt für eine effizientere Gestaltung.
Arbeite mit Grids: Ein Grid-System für die Platzierung Deiner Inhalte zu verwenden, insbesondere das Festlegen von Gaps für vertikale Abstände, ermöglicht eine konsistente und harmonische Anordnung der Elemente auf Deiner Seite. Dies trägt zu einem ausgewogenen und ästhetisch ansprechenden Layout bei.
Bleibe flexibel: Sei offen dafür, Dein Design zu ändern oder neue Ansätze auszuprobieren, um die beste Lösung für jedes Projekt zu finden.
Vorteile von Client First
Der Client-First-Ansatz in Webflow fördert durch seine einheitliche Struktur die Konsistenz und Erleichterung der Arbeit, indem jedes Projekt denselben Aufbau verfolgt und somit weniger Raum für Verwirrung oder zusätzlichen Aufwand lässt. Dies ermöglicht nicht nur eine einfache Erweiterbarkeit und Anpassung von Projekten, sondern sorgt auch für breite Akzeptanz in der Branche, wie die Nutzung durch die Relume Library zeigt. Mit Client First wird das Design- und Entwicklungsverfahren vereinfacht, da vorgegebene Strukturen das Nachdenken über den Aufbau minimieren und somit einen effizienteren Workflow ermöglichen. Darüber hinaus lassen sich Webflow Projekte durch Client First besser skalieren, da mehrere Entwickler am Projekt mit einem konsistenten Workflow arbeiten können.
Client First 2.1
Die Version 2.1 des Client-First-Frameworks für Webflow, entwickelt in Kooperation zwischen Finsweet, Relume und der Client-First Community, bringt bedeutende Verbesserungen und Neuerungen. Zu den wichtigsten Aktualisierungen gehören die Einführung von Farbvariablen für eine konsistente Gestaltung über das gesamte Projekt, die Reduktion von Div-Elementen und Verschachtelungen durch die Zusammenführung von "padding-section-size" in "padding-global", sowie die Empfehlung zur Nutzung von Grids und Flexbox für das Spacing zur weiteren Reduktion von Divs. Des Weiteren wurden Utility-Klassen für Pointer Events auf Webflows native Stile umgestellt und neue Gruppen von Aspect Ratio Utility-Klassen hinzugefügt. Eine neue Lösung erlaubt es nun, Farben vom übergeordneten Element zu erben, indem die Klasse "inherit-color" verwendet wird. Zusätzlich wurden die Dokumentation und der Style Guide komplett überarbeitet.
Fazit
Meiner Meinung nach sollte aktuell jedes neue Projekt mit dem Client-First Ansatz entwickelt werden, um Kunden die Möglichkeit zu geben die Website unabhängig vom Entwickler zu skalieren. Das System wird stetig weiterentwickelt und an neue Funktionalitäten von Webflow angepasst, was ebenso für die Verwendung spricht.
Mit Sternchen * markierte Links sind Affiliate-Links.
