Hva er Webflow Client-First, og hvorfor bør du bruke det?
Navngivinger av styling-klasser er viktig i Webflow av mange årsaker. Hvordan kan Client-First hjelpe deg med dette?
Hva er Client-First?
Client-First er et sett med guider og strategier laget av Finsweet for å hjelpe med å bygge Webflow-nettsider. Client-First handler om å skape et samlet organisasjonssystem som kan brukes i alle Webflow-prosjekter.
Dette gjør at hvem som helst kan hoppe inn i et Webflow-prosjekt og forstå hvordan det er strukturert, og hva de ulike elementene gjør.
Client-First inneholder et sett med bestemte navngivninger av klasser for struktur og styling i Webflow. Målet med disse klassenavngivingene er:
- Gi en ikke-teknisk person muligheten til å drifte nettsiden.
- Være klar, informativ og beskrivende i klassenavngivningen.
- Gi leseren så mye kontekst som mulig om klassens formål.
- Kunne lese et klassenavn og vite hva formålet er.
- Ingen forkortelser og ingen forvirring.
- Gi så mye kontekst som mulig inn i forholdet mellom klassen og nettsiden.
- Skape navn basert på teknikker for organisering med prefiks og nøkkelord.
Div Block 59, nei takk!
Forestill deg at du nettopp har startet et nytt Webflow-prosjekt, og at du vil gi den ene brødteksten litt større skriftstørrelse. Du oppretter et Paragraph-element, og endrer så skriftstørrelsen på dette ene elementet til 26px. Den første gangen du gjør dette vil dette elementet få styling-klassen Paragraph. Dersom du gjør det igjen på et nytt Paragraph-element, vil navnet bli Paragraph 2. Neste gang blir det Paragraph 3, osv. osv.
Problemet med slik navngivning er at de forteller ingenting om hva de gjør eller hvordan de ser ut.
Det er her Client-First kommer inn i bildet.
I Client-First har vi en forhåndsdefinert klasse som heter text-size-large. Navnet på denne klassen forklarer hva den gjør: den gir et tekstelement stor skriftstørrelse. Denne klassen kan du gjenbruke på alle brødtekstene på nettsiden din som du ønsker at skal være litt større enn vanlig. Dersom du øker skriftstørrelsen til klassen text-size-large, vil denne endringen skje på alle elementene på nettsiden som bruker denne klassen. Dette er genialt, fordi det sikrer konsistens for hele nettsiden. Det gjør også at man får langt færre klasser, noe som gir mindre kode, noe som igjen gir raskere nettsider.
Client-First kan være litt omfattende å sette seg inn i fordi det er mange klassenavn å forholde seg til. Mange opplever også at måten Client-First legger opp til at man skal strukturere en nettside på er litt uvanlig. Jo lenger man har brukt Webflow og opparbeidet seg sine egne vaner, jo vanskeligere kan det være å hoppe over til Client-First.
Men det er absolutt verdt å bruke Client-First. Spesielt i det lange løp.
Client-First har ikke predefinerte klasser for alle mulige tilfeller, og du kan selvfølgelig lage dine egne tilpassede elementer akkurat slik du ønsker. Men også her har Client-First anbefalinger for hva du bør døpe disse tilpassede elementene dine, slik at navnene gir mening for deg og andre.
Client-First har heldigvis mange gode guider, samt klonbare maler man kan laste ned og bruke som utgangspunkt. Og det beste av alt er at det ikke koster en eneste krone. Til å begynne med, kan vi varmt anbefale å sjekke ut Finsweet sin egen introduksjon til Client-First.
Hvorfor vi bruker Client-First
Vi bruker Client-First på alt vi lager i Webflow. Dette gjør vi av fire hovedårsaker:
- Hvem som helst i teamet vårt kan hoppe inn og samarbeide på et prosjekt, og forstå prosjekts struktur og styling-klasser.
- Kunden kan gjøre det samme, samt andre eksterne Webflow-utviklere.
- Client-First effektiviserer prosessene våre og lar oss bygge nettsider raskere.
- Client-First gir bedre SEO og styrket universell utforming.
Hvordan lære seg Client-First
Du kommer ikke til å angre! Finsweet, skaperne av Client-First, har flere gode guider på deres egen nettside som vi anbefaler å ta en titt på. De har også en egen "7-day Schedule to learn Client-First".
Etter at du har lest deg litt opp, kan vi sterkt anbefale å bruke Client-First på ditt neste Webflow-prosjekt. Du vil raskt oppleve hvor intuitivt systemet er, og forhåpentligvis angre på at du ikke begynte med Client-First tidligere.
Last ned Client-First-rammeverket
Last ned den offisielle prosjektstarteren som kan klones for Client-First.
Kan man konvertere et tidligere Webflow-prosjekt til Client-First?
Ja, det er mulig å konvertere et tidligere Webflow-prosjekt til Client-First, men det er en stor og tidkrevende oppgave som krever mye manuelt arbeid. Det vil kreve spesielt mye arbeid hvis:
- Nettsiden er stor.
- Navnekonvensjonen i ditt eksisterende prosjekt er veldig forskjellig fra Client-First.
- Prosjektet ble bygget av noen andre enn deg selv.
Det vil uansett kreve mye tid å konvertere et tidligere Webflow-prosjekt til Client-First. Det går sannsynligvis raskere å starte fra scratch.
Dersom du vil konvertere, har du to alternativer:
- Konvertere ditt eksisterende prosjekt til å matche Client-First.
- Starte fra scratch med å bygge et nytt prosjekt med Client-First.
Av erfaring kan vi si at det som oftest går raskere å starte fra scratch enn å forsøke å konvertere det eksisterende prosjektet. Men dersom du likevel foretrekker å behikde ditt eksisterende prosjekt, kan du se nærmere på ClientFirst sin guide i hvordan konvertere tidligere prosjekter.