Bij Online Winner maken we gebruik van FinSweet's Client First. Client First is een style systeem dat is ontwikkeld door FinSweet, een bedrijf uit de Verenigde Staten en een van de community leiders binnen Webflow. FinSweet is een echte pioneer voor het gebruik van Webflow en alles wat ze doen stellen ze beschikbaar aan hun community. Door ons toegang te geven tot hun werkwijze, middelen en visie kunnen wij als Webflow developers deze manier van werken toepassen. Dit zorgt ervoor dat iedere Webflow developer die met tools en methodes van FinSweet werkt elkaar begrijpt en projecten eenvoudig over kan nemen of kan bewerken omdat we allemaal dezelfde structuur en stijl hanteren. Dit is niet alleen super handig, maar ook super schaalbaar!
Wat is het Client-First Style System van FinSweet?
Ongeveer één jaar geleden, in de maand augustus van 2021, introduceerde FinSweet hun nieuwe styling systeem met de naam Client-First. Zoals de naam zegt is het ontstaan uit het idee om de klant op de eerste plaats te zetten. De achterkant van Webflow kan voor velen een doolhof zijn als je niet bekend bent met het platform, de oplossing voor dit probleem was het Client-First Style system. Het doel was om ervoor te zorgen dat iedereen met de website zou moeten kunnen werken, ook niet-Webflow developers. Uiteindelijk bouwen we websites voor klanten, het is belangrijk dat onze klanten hun eigen website kunnen begrijpen en kunnen bijhouden/bijwerken als zij dat nodig achten.
Nu zijn we inmiddels een jaar verder en heeft FinSweet een update gegeven aan het Client-First Style System, namelijk versie 2. Deze nieuwe versie biedt nog meer mogelijkheden, werkt nog sneller en is nog gestroomlijnder dan versie 1. En daarbij hebben ze de documentatie flink uitgebreid zodat iedereen die ermee aan slag wilt gaan dat ook kan. Met meer dan 20 hoofdstukken wordt iedere strategie en gedachtegang tot in de puntjes uitgelegd en omschreven. Het kost je wat tijd om dit alles door te nemen, maar als je het eenmaal begrijpt is structureel bouwen in Webflow in ieder van je projecten uniform en easy peazy.
De doelen van Client-First
FinSweet heeft met het systeem een aantal doelen gesteld. Door het systeem toe te passen kun jij ook deze doelen bereiken voor jouw development proces binnen Weblfow. De doelen zijn als volgt:
- Maak een organisatie systeem voor ieder project
- Werk sneller in Webflow met minder inspanning/moeite
- Definieer een class strategie voor ieder project
- Standaardiseer processen over de verschillende pagina's
- Bouw schaalbare, onderhoudbare projecten
- Verenig een bouw strategie als een team
Uit ervaring uit voorgaande jaren, toen we startten met het gebruik van Webflow, hebben we bij Online Winner geleerd dat een systeem zoals Client-First essentieel al dan niet noodzakelijk is als je als bedrijf met meerdere mensen wilt kunnen werken aan meerdere websites. In die voorgaande jaren werkte ik voornamelijk alleen aan projecten maar zelfs dan merk je dat het lastig is om continue dezelfde structuur te hanteren voor ieder project, met een systeem los je dit probleem op en hoef je ook niet meer na te denken over de structuur en de strategie. Het enige waar je over na moet denken is realiseren van een website waar je klant de markt mee gaat veroveren.
Welke voordelen biedt Client-First voor jouw website?
Naast dat het voordelen biedt voor ons als developer biedt het ook voordelen voor jou! Zoals ik aangaf zorgt Client-First voor een goede technische SEO structuur, voor toegankelijkheid en daarnaast ook dat jij eenvoudig en snel content kunt vinden, aan kunt passen maar ook aan kunt vullen op jouw eigen website.
Search Engine Optimization met Client-First
Door de basis structuur die gehanteerd wordt bij de ontwikkeling van een website met dit systeem toe te passen, passen we automatisch een goede structuur voor SEO toe.
De basis structuur van Client-First bestaat uit een page-wrapper met daarin de elementen zoals een navigatiebalk, footer en de hoofdzakelijke inhoud van de pagina. Deze belangrijkste inhoud bevindt zich in de main-wrapper. Alle content in de main-wrapper wordt herkend als de belangrijkste content op de pagina omdat de main-wrapper de html tag <Main> heeft gekregen. Daarnaast zorgt Client-First dat je heel gestructureerd te werk gaat en hierdoor gaat het toepassen van technische SEO in een website moeiteloos.
Toegankelijkheid met Client-First
Bovenstaande structuur heeft ook impact op de toegankelijkheid van een website. Toegankelijkheid (of accessibility) is een steeds belangrijker thema aan het worden in onze samenleving. Daarom houden we rekening met kleur contrast, html structuur en het labelen van links en content met ARIA-labels (Aria staat voor: Accessible Rich Internet Applications). Door rekening te houden met toegankelijkheid help je je medemens door je site te navigeren en jezelf door beter te scoren op het gebied van Search Engine Optimization. Een Win, Win dus!
Eenvoudig je website beheren met Client-First
Daarnaast leert Client-First ons ook om websites logisch op te bouwen door een duidelijke omschrijving te geven aan een class, de naam van de class zie je dan terug in de navigator zoals op de afbeelding hierboven. Als je bijvoorbeeld klikt op section-blog-header wordt je automatisch naar dit element op de pagina gestuurd. Client-First is gemaakt zodat iedereen het kan begrijpen en kan gebruiken. Je hoeft geen developer te zijn, mensen die nog nooit een Webflow website gezien hebben moeten ook kunnen begrijpen wat er op de website gebeurt en waar ze de content die ze aan willen passen kunnen vinden.
Er is nog heel veel te vertellen over het Client-First Style Systeem maar in principe staat alles in de documentatie die FinSweet voor ons gemaakt heeft. Wij zijn er in ieder geval erg enthousiast over en raden iedere Webflow developer aan ook een systeem te gebruiken waarin zij vlug te werk kunnen gaan. Naast dit systeem heeft FinSweet Webflow Developers zoals ons nog meer te bieden die ons leven binnen Webflow een stuk makkelijker maakt. Heb jij je bijvoorbeeld afgevraagd hoe je een filter toe kunt voegen aan je Collection items? Daar hebben zij een oplossing voor en daar vertellen we je in het volgende artikel graag meer over!
Wil jij ook een website die opgebouwd is in Client-First en daardoor SEO technisch goed in elkaar zit, super goed scoort op accessibility en ook makkelijk te bewerken is voor jou en/of jouw team? Neem contact met ons op! Dan helpen we je graag verder met jouw online uitdagingen en zorgen we dat jij ook online kunt scoren.