Ci sono progetti che partono da un documento di 30 pagine con palette colori, moodboard e riferimenti. E poi ci sono progetti che partono da una frase.

Questo era il secondo tipo.

Una casa di produzione cinematografica indipendente mi contatta tramite una landing page. Non avevano un sito internet. Non ne avevano mai avuto uno. Producono e distribuiscono film, documentari e cortometraggi, girano per festival, hanno un catalogo di opere che cresce ogni anno, e online non esistevano.

La richiesta iniziale è stata questa: "Ci serve un sito dove poter mettere il nostro catalogo e aggiornarlo da soli."

Fine. Nessuna indicazione sulla grafica, sui colori, sullo stile, sui riferimenti. Niente di niente.

Tre mesi dopo il sito era online, con un catalogo di circa 40 titoli, 20 campi personalizzati per ogni scheda, un'animazione in home page fatta a mano e un pannello di controllo che il cliente usa senza chiamarmi.

Ti racconto come ci sono arrivato.

Riassunto in 60 secondi

• Punto di partenza: cliente senza sito web, brief praticamente inesistente, un catalogo di opere da portare online e da tenere aggiornato in autonomia
  
• Il problema vero: non era "fare un sito", era costruire uno strumento di gestione che una casa di produzione potesse usare ogni volta che entra un titolo nuovo o cambia lo stato di una lavorazione
  
• La soluzione: Custom Post Type + ACF, una voce di menu dedicata nel pannello WordPress, circa 20 campi personalizzati, tre categorie di catalogo con comportamenti diversi
  
• Il dettaglio che mi piace di più: lo stato di lavorazione dei titoli in arrivo (Sviluppo, Pre-produzione, Riprese, Post-produzione) si cambia da un menu a tendina e si aggiorna nel frontend
  
• L'animazione della home: logo vettorializzato, esportato in SVG, animato con CSS e poche righe di JavaScript. Nessun plugin di animazione
  
• I numeri: 3 mesi dalla prima call al lancio, 4 bozze grafiche, PageSpeed 90 su desktop e 83 su mobile con l'animazione attiva. In più: un video tutorial di 4 minuti per la gestione autonoma del catalogo

Il punto di partenza: nessun sito, nessun brief

Quando un cliente non ha mai avuto un sito, succede una cosa curiosa: non sa cosa chiedere.

Non è colpa sua. Se non hai mai gestito contenuti online, non hai idea di cosa significhi "campo personalizzato", non sai che esiste una differenza tra una categoria e un tag, e soprattutto non sai cosa vorrai poter fare tra sei mesi.

Quindi il primo lavoro non è stato aprire l'editor. È stato fare domande.

Che dati compaiono nella scheda di un film? Chi ha fatto il montaggio, chi la scenografia, chi i costumi, chi le musiche? Un titolo che state ancora girando come lo trattate rispetto a uno che avete già distribuito? Quando entra un film nuovo, chi lo carica?

Da quelle risposte è venuto fuori che non stavo costruendo un sito vetrina. Stavo costruendo un archivio.

E un archivio ha una regola sola: deve poter crescere senza di me.

Perché un catalogo WordPress fatto con un page builder non regge

Il modo veloce di fare questo lavoro esiste. Prendi un tema, crei una pagina "Catalogo", metti dentro delle schede fatte con il page builder, e consegni.

Funziona il primo giorno. Poi succede questo:

Il cliente deve inserire un titolo nuovo. Apre il page builder, duplica una sezione, prova a sostituire i testi, sposta senza volerlo una colonna, il layout si rompe. Chiama te. Tu sistemi. Passa un mese, entra un altro film, si ricomincia.

Alla fine il cliente non aggiorna più niente, perché ha paura di rompere il sito. E un catalogo di una casa di produzione che non viene aggiornato è un catalogo morto: i festival passano, le distribuzioni cambiano, i titoli in lavorazione escono e restano lì in "prossimamente" per due anni.

Il vero obiettivo di questo progetto non era il design. Era togliere al cliente ogni motivo per avere paura di toccare il proprio sito.

Come gestire il catalogo del sito senza chiamare il webmaster: Custom Post Type + ACF

Il catalogo non è fatto di pagine. È un tipo di contenuto a sé.

Ho registrato un Custom Post Type dedicato e l'ho agganciato a una voce di menu nel pannello di controllo di WordPress, chiamata semplicemente Catalogo. Sta lì, nella colonna di sinistra, insieme ad Articoli, Pagine e Media.

Il cliente entra, clicca su Catalogo, vede l'elenco dei suoi titoli. Clicca "Aggiungi nuovo" e compila una scheda. Non deve capire cosa sia un page builder, non deve aprire nulla di visuale, non deve preoccuparsi del layout: il layout è già deciso, lui compila i dati.

Questa è tutta la differenza tra un sito che il cliente subisce e uno che il cliente usa.

Circa 20 campi personalizzati, decisi dal cliente

I campi non me li sono inventati io. Me li ha passati il cliente, ed è l'unica parte del brief che è arrivata precisa: sono i dati che una casa di produzione mette nella scheda tecnica di un'opera.

Regia, produttore, produzione, montaggio, scenografia, costumi, musiche, e via così, per una ventina di campi complessivi.

Li ho costruiti con ACF, raggruppati in blocchi ordinati sotto l'editor. Quando il cliente apre la scheda di un titolo, vede una serie di campi con etichette che parlano la sua lingua, non la mia. Non c'è un campo chiamato "meta_field_03". C'è scritto Montaggio, e sotto ci scrive il nome del montatore.

Nel frontend ogni campo ha la sua posizione, la sua tipografia e la sua gerarchia. Il risultato è una scheda film completamente personalizzata, che non somiglia a nessun template scaricabile, perché non lo è.

E qui c'è il dettaglio che fa la differenza sul lungo periodo: se un campo resta vuoto, nel frontend non compare uno spazio bianco o un'etichetta orfana. Semplicemente non c'è. Il cliente non deve compilare tutto per forza, e il sito non si rompe se salta una voce.

Tre categorie, tre comportamenti diversi

Il catalogo è diviso in tre categorie, che sono i tre stati in cui vive un'opera per questa azienda:

• Produzioni — quello che producono direttamente
  
• Distribuzioni — quello che distribuiscono
  
• Prossimamente — quello che sta arrivando

Ogni categoria ha la sua pagina, e ogni pagina mostra solo i titoli che le appartengono. Il cliente assegna la categoria con una spunta, esattamente come si fa con le categorie degli articoli. Un titolo può passare da "Prossimamente" a "Produzioni" con due click, il giorno in cui esce.

Sulle griglie ho lavorato sugli effetti in dissolvenza: passando sopra una locandina compaiono alcuni dati del titolo, senza appesantire la griglia con blocchi di testo sempre visibili. La locandina resta protagonista, l'informazione arriva quando la cerchi. È una scelta di design, ma è anche una scelta di leggibilità: 40 titoli con tutte le schede tecniche a vista sarebbero un muro.

Lo stato di lavorazione: il pezzo che il cliente ha apprezzato di più

Questa è la parte del progetto di cui vado più orgoglioso, ed è anche la più semplice.

Per i titoli in "Prossimamente" esiste un campo aggiuntivo che non compare nelle altre categorie. È un elenco di opzioni:

• Sviluppo
• Pre-produzione
• Riprese
• Post-produzione

Il gestore del sito apre la scheda del titolo, sceglie l'opzione dal menu a tendina, salva. Nel frontend lo stato compare aggiornato.

Sembra poco. In realtà è esattamente il tipo di aggiornamento che una casa di produzione fa continuamente e che, senza questo campo, richiederebbe una mail a me ogni volta. Un film sta in lavorazione per mesi e attraversa quattro fasi: sono quattro aggiornamenti per titolo, moltiplicati per tutti i progetti aperti.

Con un menu a tendina diventano trenta secondi di lavoro. Senza, diventano trenta mail all'anno.

L'animazione in home page: SVG, CSS e poche righe di JS

La home si apre con un'animazione del logo.

Il modo pigro di farla è installare un plugin di animazioni, sceglierne una dalla libreria e andare avanti. Il modo pigro carica sul sito un pacchetto di JavaScript e CSS pensato per fare centinaia di effetti diversi, di cui tu ne usi uno. Paghi il peso di tutta la libreria per usarne l'1%.

Ho fatto l'opposto:

• Ho preso il logo, che era un'immagine, e l'ho trasformato in vettoriale
• L'ho esportato in SVG, quindi come codice, non come file grafico
• Ho animato i tracciati dell'SVG con CSS, aggiungendo poche righe di JavaScript per gestire la sequenza

L'ho scritta con l'aiuto di Claude, e lo dico volentieri: l'AI qui non ha fatto il lavoro al posto mio, mi ha fatto risparmiare le ore che avrei passato a sistemare a mano i tempi delle transizioni sui tracciati. La decisione di non usare un plugin, quella è mia, ed è quella che conta.

Il risultato: l'animazione è nel documento, è vettoriale quindi resta nitida su qualunque schermo, non richiede nessuna libreria esterna e non aggiunge richieste al caricamento della pagina.

PageSpeed con l'animazione attiva: 90 su desktop, 83 su mobile.

Un'animazione di apertura che non costa nulla in velocità è una delle poche cose in cui puoi avere la botte piena e la moglie ubriaca. Bisogna solo accettare di scriverla invece di installarla.

Divi 5, senza child theme (e perché in questo caso ha senso)

Il sito è costruito su Divi 5, senza child theme. So che a qualcuno si sono già rizzati i capelli, quindi spiego il ragionamento.

Il child theme serve quando modifichi i file del tema, perché altrimenti il primo aggiornamento ti cancella tutto. Qui non ho modificato i file del tema: la logica del catalogo vive fuori dal tema, nel Custom Post Type e nei campi ACF. Divi si occupa della presentazione, il catalogo si occupa dei dati, e i due piani restano separati.

Il vantaggio pratico è che il cliente può aggiornare tema e plugin senza il terrore che il catalogo sparisca. Il catalogo non dipende da Divi. Se un domani si cambia tema, i 40 titoli e i loro 20 campi restano dove sono.

Sito web per una casa di produzione: multilingua e sezione Film Festival

Due pezzi che completano il lavoro e che vale la pena citare, perché fanno parte dello stesso ragionamento.

Il sito è multilingua (italiano, inglese e giapponese), perché una casa di produzione indipendente che gira per festival internazionali parla a compratori e programmatori che l'italiano non lo leggono.

E c'è una sezione dedicata ai Film Festival, separata dal catalogo, perché la partecipazione a un festival è un contenuto diverso da un'opera: ha una sua vita, una sua cronologia e un suo valore commerciale nel racconto dell'azienda.

Le quattro bozze: lavorare con un brief che non c'è

Torniamo alla parte scomoda.

Il cliente non mi aveva dato indicazioni sulla grafica. Non un colore, non un font, non un sito di riferimento. E allo stesso tempo era esigente: sapeva riconoscere quello che non gli piaceva, semplicemente non sapeva dirmi prima cosa gli sarebbe piaciuto.

È un tipo di cliente con cui capita di lavorare più spesso di quanto si creda, e ho imparato che l'errore è chiedere "dammi dei riferimenti" e aspettare. Non arrivano.

Quello che funziona è proporre. Alla quarta bozza avevamo definito tutto.

Non lo racconto per lamentarmi. Lo racconto perché è una parte reale del lavoro e nei case study non la scrive mai nessuno. Quattro bozze significa tempo che non era preventivato da nessuna parte, e significa che il preventivo di un sito con brief inesistente non può essere lo stesso di un sito con brief chiaro. È una cosa che ho imparato a spiegare prima di iniziare, non dopo.

Il video tutorial: la parte che quasi nessuno consegna

Alla consegna ho registrato un video tutorial di circa 4 minuti in cui mostro al cliente come si gestisce il catalogo: dove sta la voce di menu, come si inserisce un titolo, come si compilano i campi, come si assegna la categoria, come si cambia lo stato di lavorazione.

È la cosa che costa meno in assoluto e che vale di più.

Un cliente formato è un cliente che aggiorna il sito. Un cliente che aggiorna il sito ha un sito vivo. E un sito vivo continua a funzionare anche quando io non ci sono più sopra.

Chi ti dice che è un modo per "perdere assistenza", non ha capito che l'assistenza vera non è ricaricare un film in un catalogo. È tutto il resto.

I numeri del progetto

• 3 mesi dalla prima call alla messa online
• circa 40 titoli caricati a catalogo
• circa 20 campi personalizzati per scheda
• 3 categorie con comportamenti differenziati
• 4 stati di lavorazione gestibili dal cliente
• 3 lingue
• 4 bozze grafiche
• PageSpeed 90 desktop / 83 mobile con animazione attiva
• 1 video tutorial da 4 minuti
• 0 plugin a pagamento per l'animazione

Il cliente è rimasto soddisfatto del risultato.

Cosa mi porto da questo progetto

Tre cose, e valgono per qualunque azienda che debba mettere online un catalogo, che siano film, macchinari, immobili o prodotti.

Uno. La domanda giusta non è "che sito vuoi", è "cosa dovrai aggiornare, e quanto spesso". La risposta a questa seconda domanda ti dice come va costruito il pannello di controllo, e il pannello di controllo è il progetto.

Due. I campi personalizzati non sono un vezzo tecnico. Sono il motivo per cui una scheda prodotto sembra fatta apposta per quell'azienda invece che scaricata da un marketplace di temi.

Tre. Le performance si difendono nelle decisioni piccole. Un plugin in meno vale più di dieci ottimizzazioni fatte dopo, quando il sito è già pesante.

Domande frequenti

Posso aggiornare da solo il catalogo del mio sito senza chiamare il webmaster? Sì, ma dipende da come è stato costruito. Se le schede sono state fatte con un page builder, ogni modifica è un rischio per il layout. Se invece i contenuti stanno in un tipo di contenuto dedicato con campi personalizzati, aggiornare un titolo significa compilare un modulo: il layout non lo tocchi, quindi non lo puoi rompere.

Quanto costa in più un catalogo su misura rispetto a un plugin? Costa di più all'inizio e molto meno dopo. Un plugin di catalogo lo installi in un pomeriggio, ma ti porta i campi che ha deciso il suo sviluppatore, non i tuoi, e ogni personalizzazione diventa una forzatura. Un catalogo costruito su Custom Post Type e campi ACF si modella sui dati che usi davvero e non ti lega a un plugin di terze parti che domani può smettere di essere aggiornato.

Cosa serve nel sito di una casa di produzione cinematografica? Tre cose che un sito vetrina normalmente non ha: un catalogo diviso per stato dell'opera (produzione, distribuzione, in arrivo), una scheda tecnica con i ruoli della troupe come campi strutturati e non come testo libero, e il multilingua, perché i compratori e i programmatori dei festival internazionali non leggono l'italiano.

Un'animazione in home page rallenta il sito? Dipende da come è fatta. Un plugin di animazioni carica una libreria intera per farti usare un effetto solo, e quel peso lo paghi a ogni visita. Un SVG animato con CSS e poche righe di JavaScript sta dentro la pagina e non aggiunge richieste. In questo progetto l'animazione è attiva e il sito sta a 90 su desktop e 83 su mobile su PageSpeed.

Quanto tempo serve per un sito con catalogo gestibile in autonomia? Su questo progetto tre mesi dalla prima call alla messa online, con quattro bozze grafiche perché il brief iniziale era inesistente. Con indicazioni chiare sulla direzione visiva si accorcia parecchio: la parte tecnica del catalogo è la più prevedibile, è la definizione grafica che dilata i tempi.

Hai un catalogo da mettere online e da gestire da solo?

Se hai prodotti, opere, servizi o progetti che cambiano nel tempo e ogni volta devi chiedere a qualcuno di aggiornarli, il problema non è il tuo sito. È come è stato costruito.

Parliamone. Raccontami cosa devi gestire e ti dico come lo imposterei.