Come utilizzare Client First per sviluppare con Webflow?

In questa guida scoprirai come installare la style guide chiamata Client First creata da Finsweet.

Perché è importante sviluppare siti web con Client First? 

Client First è una metodologia che ti aiuta a strutturare e a disegnare in modo pulito e professionale siti web sviluppati con Webflow.

‍

Se vuoi migliorare la modalità con la quale approcci lo sviluppo no-code su Webflow, Client First fa al caso tuo.

Iniziamo parlando di Naming Convention. Il sistema di Naming Convention è una convenzione condivisa che aiuta la singola persona o il team ad avere delle regole precise per rinominare elementi.

Gli elementi possono essere i più disparati. 

Facciamo un esempio pratico.
Pensiamo ad un’azienda grande che deve gestire le informazioni di molti clienti e che quest’ultimi abbiamo sempre (più o meno) le stesse informazioni da gestire.

L’azienda "ultimo trago”, deve organizzare il proprio Drive dove inserisce le cartelle nella quale inserire le informazioni dei clienti.

L’azienda è produttrice di bottiglie per cantine di vini, ha molti clienti e richieste da gestire.
Le informazioni che deve acquisire sono diverse per poter produrre l’etichetta e la bottiglia.

Ma le informazioni saranno sempre quelle e ripetute nel tempo. Per sviluppare il servizio avrà bisogno di: grafica, informazioni generali della cantina, tempi di consegna, etc.

Pensate se ogni risorsa all’interno dell’azienda “ultimo trago” dovesse rinominare le cartelle a suo piacere.

Sarebbe il caos totale.

L’anno successivo il nuovo collega non avrebbe una procedura con la quale recuperare le informazioni. Prova a chiedere informazioni al collega che ha creato le cartelle, ma quel collega ha cambiato azienda quindi deve andare ad aprire tutte le cartelle una per una, cercando le informazioni e perdendo una grande quantità di tempo.

‍

L’addetto che deve gestire il cliente come può organizzare tutte queste informazioni in modo chiaro per tutta l’azienda?

Attraverso un sistema di Naming Convention.

‍

Con l’utilizzo di una naming convention, tutte le risorse che lavorano nell’azienda “Ultimo Trago” dovranno seguire una procedura ben precisa condivisa e utilizzata tra tutti i colleghi.

In questo modo le informazioni saranno organizzate e strutturate per tutti i clienti gestiti.

Dopo questo esempio torniamo nel mondo di Webflow.

‍

La Naming Convention, nel contesto di Webflow, è una struttura chiara e precisa data alle classi, che permette di avere delle regole nell'implementazione del nostro sito web.

Alcuni potrebbero pensare che l'inserimento di "regole" può aumentare la complessità e rendere lo sviluppo più rigido.

Niente di più sbagliato.

‍Una volta imparato il flusso e le regole del gioco avremo un sistema modulabile che permetterà di sviluppare e modificare i nostri siti web in maniera più rapida.

Ci sono diversi sistemi di naming conventions. Webflow, ad esempio, nel suo blog parla del BEM (Block - Element - Modifiers) adatto per chi vuole sviluppare Webflow siti web in maniera professionale e tecnica.

Nikolai Bain, nel suo sito web parla di un altra modalità citando i Design System (qui trovate l’articolo)

‍

Noi utilizzeremo una naming convention diversa: il sistema pensato e realizzato da Finsweet chiamato Client First.

‍

Ma quali sono i principali vantaggi nell'utilizzo di Client First?

Navigando nel sito di Finsweet troviamo una sezione apposita che li spiega (qui il link) meglio di chiunque altro, essendo proprio loro gli ideatori del sistema. Per comodità ve li riportiamo di seguito:

a. Progetti più organizzati

b. Maggiore velocità e flessibilità nell'utilizzo del Designer di Webflow

c. Definisce una strategia nell'utilizzo delle Classi

d. Uniforma la struttura principale in tutte le pagine del sito web

e. Crea una struttura scalabile e facilmente gestibile

f. Aiuta tutte le persone coinvolte nel progetto ad una maggiore comprensione

g. E tanti ancora.

‍

INDICE DI QUESTA GUIDA

1. Definizione di Client First
2. Benefici nell’utilizzo di una Naming Convention
3. Struttura principale (o Core Structure Strategy)
4. La strategia delle Classi in Client First
5. Caso pratico: come iniziare a utilizzare Client First

‍

1. Definizione e benefici del sistema Client-First

Client First è un sistema per organizzare e sviluppare i siti Webflow. 

‍

‍

2. Benefici nell’utilizzo di una naming convention

Ordine

É il primo beneficio che abbiamo inserito (e non è messo qui a caso).

‍

Se decidiamo di utilizzare il sistema Client-First dovremo seguire determinate regole per far sì che il sistema funzioni.

Una regola molto importante è la struttura (o Core Structure Strategy) che vedremo tra poco.

Avendo una struttura chiara e uniforme su tutti i nostri siti web alla quale lavoriamo sarà più facile e immediato individuare l’elemento alla quale dobbiamo lavorare.

‍

Un caso molto pratico è quello delle sezioni.

‍

Per esigenze diverse, durante la vita di un sito web, si può decidere di dover spostare una sezione o anche eliminarla.

‍

Nel caso avessimo un sito web non organizzato, lo spostamento o eliminazione di un solo elemento potrebbe, per effetto domino, modificare altri elementi.

‍

Con l’utilizzo, invece di un sistema, pensato e organizzato con una determinata logica potremo muoverci senza la paura di rompere gli elementi del sito web.

‍

L’ordine quindi è il primo beneficio che possiamo sfruttare con il sistema Client-First.

‍

Consistenza

Se avete iniziato da poco a sviluppare siti web e magari state mettendo le mani a siti web che presentano poche pagine non avete ancora incontrato l’esigenza di avere un sistema per organizzare lo sviluppo web nella sua interezza.

‍

Abbiamo evidenziato interezza perché avendo un sistema organizzativo come può essere Client-First, possiamo uniformare il sito web in tutte le sue pagine.

‍

Un altro termine importante che prendiamo in prestito per un attimo dal design è la consistenza.

‍

Quando si parla di consistenza facciamo riferimento al fatto di utilizzare gli elementi che formano l’immagine del brand su tutti i canali e formati in egual maniera.

‍

Coca-Cola utilizzare il colore rosso sia nella lattina che nello spot televisivo.

‍

Tornando ai siti web, proviamo a immaginare di dover inserire una card nella nostra homepage (quindi un rettangolo con all’interno informazioni), e voler inserire un’ombra per abbellirla.

‍

Per dare consistenza sarà buona pratica inserire la grandezza di tutti i titoli (h1) con la stessa grandezza di pixel, ad esempio 72px.

‍

Grazie al sistema di Client-First basterà modificare un solo elemento per vedere applicata la modifica su tutti gli h1 presenti nelle pagine del nostro sito web.

‍

Dopo aver parlato dell’ordine e della consistenza che può dare Client-First, vediamo il 3º beneficio.

‍

Velocità

Il terzo ed ultimo beneficio di cui vi vogliamo parlare è la velocità.

‍

Torniamo all’esempio del paragrafo precedente. Dopo aver inserito 72px per tutti i nostri titoli h1, dopo pochi mesi decidiamo di fare un cambio nel nostro sito web.

‍

Decidiamo di voler inserire i nostri titoli h1 a 80px di dimensione.

‍

Senza una logica ben precisa dovremo cambiare tutti i nostri titoli h1 uno alla volta.

Questo comporterebbe:

• Errori: magari ci dimentichiamo di modificare una determinata pagina.
• Perdita di tempo: modificare ogni titolo richiede tempo all’aumentare della grandezza del sito web

Grazie a Client-First, come già visto nel paragrafo precedente, basterà aggiornare i pixel del nostro titolo una sola volta per vedere la modifica estesa su tutto il resto dei titoli presenti nel sito web.

‍

Dopo questa introduzione rispetto ai benefici di questo sistema, continua a leggere se vuoi capire come funziona Client-First nello specifico.

‍

2. Struttura principale (o Core Structure Strategy)

Una volta atterrati nel sito web dedicato di Client-First, possiamo accedere al documento ufficiale dello strumento.

‍

Qui trovate il link per accedervi.

‍

Il nostro consiglio è quella di inserire questa pagina tra i preferiti e di iniziare a studiarla come una bibbia.

‍

Com’è strutturata?

‍

Guardando lo screenshot qui sopra, potete vedere che la pagina è divisa in 3 colonne:

1. Nel lato sx, tutte le pagine che compongono la documentazione
2. Nella parte centrale, troviamo l’indice della pagina che avete selezionato (a sx)
3. Nel lato dx, invece, abbiamo accesso alla spiegazione dettagliata dell’argomento selezionato.

‍

Nello screenshot sopra, abbiamo voluto riportarvi la pagina dedicata alla strategia di struttura.

‍

Questa è veramente il cuore di tutto il sistema Client-First.

‍

Perchè?

‍

Perchè in questa pagina troviamo la struttura che dobbiamo utilizzare quando sviluppiamo le pagine all’interno di Webflow.

‍

La struttura di Client-First si compone di 6 elementi:

‍

Analizziamo, uno ad uno, tutti gli elementi:

a. page-wrapper

è il parente con più alto grado tra tutti gli elementi che troviamo nella pagina. Detto in italiano, al suo interno troveremo tutti gli altri elementi.

Se hai dubbi rispetto ai gradi di parentela ne abbiamo parlato qui.

‍

In questo elemento non è consigliato secondo le linee guida di Client-First inserire degli stili. Possiamo dire che è un elemento che serve a dare un preciso ordine alla nostra struttura.

‍

A cosa serve?

• Copiare e incollare l’intera pagina in altre pagine all’interno dello stesso progetto;
• elementi che eccedono in orizzontale. Quando si sviluppa un sito web, può capitare che alcuni elementi “sporgano” nella parte dx della pagina.

Questo può far rompere lo scroll verticale della nostra pagina perchè avremmo anche uno scroll orizzontale

Per evitare tutto ciò possiamo applicare lo stile overflow:hidden direttamente a questo elemento.

‍

b. main-wrapper

Si trova all’interno di page-wrapper.

Viene utilizzato principalmente per attribuire il tag HTML <main>.

‍

‍

A cosa serve?

• Lettura e accessibilità. Aiuta i crawler utilizzati da Search Engine a identificare il contenuto principale. Inoltre i dispositivi di Screen Readers ad accedere al contenuto più facilità.

‍

c. section_[section-identifier]

Questo elemento corrisponde alla sezione inserita nel nostro sito web. se abbiamo 3 sezioni avremo 3 di questi elementi.

‍

L'utilizzo principale è quello di organizzare e dare pulizia al nostro Navigator.

come nel caso del main-wrapper anche in questo caso Finwsweet consiglia di applicare ad ogni elemento il tag HTML <section>.

‍

d. padding-global

La funzione di questo elemento è quella di gestire il padding sx e dx del contenuto che troviamo al suo interno.

‍

Nello screenshot in basso, riportiamo il sito di Webflow Facile. In questo caso, noi  abbiamo applicato 2,5 REM per ogni lato di padding.

‍

‍

A cosa serve?

• Pulizia del layout. Aiuta ad avere un corretto sistema di gestione di spazi orizzontali in ogni sezione.

‍

e. container-[size]

In questo elemento iniziamo a capire il funzionamento di Client-First.

Torniamo al nome dell'elemento container-[size].

La parte in grassetto [size] la possiamo scegliere seguendo la logica di Client-First.

‍

Cosa vuol dire?

‍

Client-First mette a disposizione un file in cui sono “pre-inseriti” alcuni elementi uno di questi è proprio la grandezza dell'elemento container (che altro non è un Div Block).

Le grandezze disponibili sono 3:

• large
• medium
• small

‍

In questo caso quindi applicheremo:

• container-large
• container-medium
• container-small

‍

Questa tecnica è molto comoda e racchiude in sè i benefici di cui abbiamo parlato all’inizio: Ordine → perchè non dovremo creare più classi per la stessa modifica di stile

Consistenza → perché applicando la stessa classe, di conseguenza applicheremo la modifica di stile presente al suo interno

Velocità → perchè la modifica di stile è già applicata alla classe e non dovremo fare altre modifiche

‍

f. padding-section-[size]

La funzione di questo elemento è quella di gestire il padding in alto e in basso del contenuto che troviamo al suo interno.

‍

Nello screenshot in basso, riportiamo il sito di Webflow Facile. In questo caso, noi  abbiamo applicato padding-section-small, ovvero 3 REM per ogni lato di padding.

‍

‍

A cosa serve?

• Pulizia del layout. Come nel caso del padding-global aiuta ad avere un corretto sistema di gestione di spazi ma in questo caso in alto e in basso (verticale).

‍

La strategia delle Classi in Client-First

‍

Caso pratico: come iniziare a utilizzare Client-First

Una volta deciso di utilizzare Client First, dovremo installare la Style Guide fornita da Finsweet all’interno del nostro progetto. Qui trovate il link per scaricarla. 

‍

Una volta clonato la vostra Style Guide verrà inserita automaticamente nella vostra dashboard. A questo punto, dovrete copiarla ed inserirla nel vostro progetto.

Come?

1. Creare una nuova pagina nel progetto in cui vogliamo inserire Client First e salvarla in Draft (bozza)
2. Rinominare la nuova pagina “Style Guide” (o come vi pare)
3. Aprire la Style Guide di Finsweet appena scaricata
4. Copiare il Div → page-wrapper (dalla Style Guide di Finsweet appena scaricata)
5. Incollare il Div → page-wrapper (nella nuova pagina che abbiamo creato nel nostro progetto)

‍Una volta salvato la nostra nuova Style Guide nel nostro progetto/sito web, potremo usufruire di tutte le classi disponibili nella nostra nuova Style Guide.

‍

TEMPO LETTURA

Inserire il tempo di lettura che comparirà nel post.

(es. “12 minuti di lettura”)

‍