La differenza media di conversione tra una pagina con design corretto e una con design approssimativo è del 25-35%. Il design non è ‘abbellimento’, è uno strumento di comunicazione che amplifica o smonta il copy. Una pagina costruita con il metodo OVT perfetto ma con design da web agency provinciale converte meno di una pagina con copy mediocre e design curato.

Video di presentazione, regole base

Le 6 domande di questa sezione coprono le regole base del video di presentazione: durata ottimale, posizionamento nella pagina, struttura narrativa, video con o senza volto del professionista, video con o senza audio, formati tecnici. Il video di presentazione è uno degli asset più potenti della fase 3 (Interesse), ma è anche quello che più frequentemente viene fatto male, rendendo la pagina più debole di quella senza video.

Quanto deve durare il video di presentazione?

Tra 60 e 120 secondi.

Il video deve essere così sintetico che chi non lo guarda non perde nulla di essenziale (l’informazione è nel testo). E così buono che chi lo guarda non lo abbandona a metà.

Struttura operativa che funziona:

Primi 15 secondi: il problema. Apri con il problema più sentito dal target, espresso nelle sue parole. Nessuna introduzione, nessun “ciao a tutti”.

Secondi 15-45: la soluzione. Cosa proponi, in modo semplice. Niente jargon, niente caratteristiche tecniche elaborate.

Secondi 45-75: la credibilità. Chi sei, perché dovrebbero ascoltarti. Massimo 3 elementi (libro, anni di esperienza, clienti illustri).

Secondi 75-105: il beneficio finale. Cosa cambia per il visitatore se ti contatta.

Ultimi 15 secondi: la call to action. Dove cliccare, cosa scaricare, come prenotare.

Sopra i 120 secondi il tasso di completamento crolla. Sotto i 60 secondi spesso non hai costruito abbastanza valore.

Dove posizionare il video nella struttura della pagina?

Subito sotto l’above the fold, nell’area della fase 3 (Interesse).

Mai nell’above the fold (vedi domanda 1.3). Mai in fondo (lì cerca il form, non guarda video).

Schema operativo:

Sezione 1, attrazione (above the fold): hook, immagine, USP, headline. No video.

Sezione 2, interesse: introduzione del problema con copy + video di presentazione. Il video è subito sotto l’above the fold, con thumbnail accattivante e play button visibile.

Sezione 3, fiducia: testimonianze + video testimonial eventuali.

Sezione 4, desiderio: leve di scarsità + prezzo.

Sezione 5, azione: form + call to action.

Il video può essere ripetuto in basso (eventualmente in versione più breve) se la pagina è lunga, ma il posizionamento principale è in fase 3.

Perché il video nell’above the fold quasi mai funziona?

Cinque motivi.

Motivo 1, tempi di caricamento. Il video pesa di più di un’immagine. Quando l’utente arriva sulla pagina, prima vede lo spazio vuoto mentre il video carica. In quei secondi può chiudere.

Motivo 2, attivazione dell’audio. I browser bloccano l’autoplay con audio. L’utente vede un video silenzioso che parte automaticamente: spesso non capisce di cosa si tratta e chiude.

Motivo 3, scansionabilità. Il testo dell’above the fold si legge in 2 secondi. Il video richiede 15-30 secondi minimo. Chi non ha pazienza chiude prima.

Motivo 4, contesto di lettura. La maggior parte delle landing viene letta in ufficio, sui mezzi, in pause brevi. Il video richiede attenzione che spesso non c’è.

Motivo 5, mobile. Su mobile il video occupa moltissimo spazio verticale e il caricamento è ancora più critico.

Eccezione: video brevissimi (5-10 secondi) come loop visivo decorativo sopra il copy. Funzionano se sono molto leggeri e non chiedono attenzione attiva.

Il video deve mostrare il volto del professionista?

Dipende dal tipo di servizio.

Per servizi di consulenza personale (avvocati, medici, formatori, coach): sì, il volto è quasi obbligatorio. Le persone vogliono vedere chi gestirà il loro problema. Una voce fuori campo è meno efficace.

Per servizi di team o agenzia: il volto del founder o del responsabile principale è preferibile, ma può essere mescolato con immagini del team.

Per prodotti SaaS o software: meno importante. Il video può mostrare il prodotto in azione, con voce fuori campo. Eventualmente il volto del founder per il pitch finale.

Per servizi di nicchia con target esperto: il volto del professionista può anche essere assente. Il video può mostrare il prodotto, l’ufficio, esempi di lavori passati.

Caso pratico: per il mio servizio principale ho il volto in primo piano nel video di apertura. Il target (imprenditore PMI) vuole vedere con chi avrà a che fare prima di prenotare la chiamata.

Servono sottotitoli sui video di presentazione?

Sì, sempre. Per tre motivi.

Motivo 1, contesto di lettura senza audio. Molte landing vengono lette in ufficio, sui mezzi, in pause brevi, con l’audio disattivato. Senza sottotitoli, il video non comunica.

Motivo 2, accessibilità. Persone con problemi di udito o non madrelingua usano i sottotitoli.

Motivo 3, SEO. Per i video pubblicati su YouTube (e linkati alla landing), i sottotitoli aiutano l’indicizzazione delle parole chiave.

I sottotitoli devono essere ben fatti: font leggibile, dimensione adeguata, sincronizzazione con il parlato. I sottotitoli “automatici” di YouTube spesso sono pieni di errori e vanno corretti manualmente.

Per i video hosted su YouTube o Vimeo, i sottotitoli si aggiungono come file SRT. Per i video embedded direttamente nella landing, conviene “bruciarli” nel video stesso (sottotitoli sempre visibili, senza opzione di disattivazione).

Meglio video professionale o video “casalingo” autentico?

Dipende dal posizionamento e dal target.

Video professionale (luci, audio dedicato, montaggio curato): funziona meglio per servizi premium con target B2M o B2F alto-spendente. Trasmette autorevolezza, professionalità, investimento sulla qualità.

Video casalingo “autentico” (girato con smartphone, in ufficio o in casa, senza montaggio elaborato): funziona meglio per servizi più personali, coach, freelance, consulenti che lavorano sull’umanità del rapporto. Trasmette accessibilità, trasparenza, “uno di noi”.

Caso intermedio: video girato con cellulare ma con cura per le luci, l’audio e l’inquadratura. Costa poco ma sembra “buono”. Funziona per la maggior parte dei servizi B2F.

Quello che NON funziona è il video “casalingo” mal fatto: audio sporco, inquadratura storta, illuminazione scadente. Quello fa pensare “non si è impegnato”.

La regola: meglio nessun video che un video fatto male.

Video lungo la pagina (interesse, fiducia)

Le 5 domande di questa sezione coprono i video aggiuntivi oltre al video di presentazione principale: video testimonianze, video dimostrativi del prodotto, video di approfondimento, video sociali e dietro le quinte. I video aggiuntivi possono potenziare significativamente le fasi 3 (Interesse) e 4 (Fiducia) del metodo OVT, se usati con criterio. Troppi video sulla stessa landing diluiscono l’attenzione.

Quanti video diversi mettere nella stessa landing?

Massimo 3 video, contando il video di presentazione principale.

Schema operativo:

Video 1 (presentazione, 60-120 secondi): nella fase 3 (Interesse), subito sotto l’above the fold.

Video 2 (dimostrativo del prodotto/servizio, 30-90 secondi): nel mezzo della pagina, dopo il copy della fase 3.

Video 3 (testimonianza video, 30-60 secondi): nella fase 4 (Fiducia), tra le testimonianze scritte.

Oltre i 3 video, l’attenzione si disperde. Il visitatore non sa quale guardare e non ne guarda nessuno.

Eccezione: per landing molto lunghe (sales page B2M ad alto valore), si possono inserire video brevi (15-30 secondi) come “respiri visivi” lungo lo scroll. In questo caso possono essere 5-6, ma molto brevi.

Le testimonianze video funzionano meglio o peggio di quelle scritte?

Non sempre meglio. Dipende da due fattori.

Fattore 1, capacità della persona di stare davanti alla camera. Se è di legno o impacciata, la testimonianza video sembra finta o imbarazzata. Una testimonianza scritta ben curata è molto meglio.

Fattore 2, contesto di fruizione. In ufficio senza audio non puoi far partire il video. Sui social scrolli veloce. Il video richiede attenzione che spesso non c’è. La testimonianza scritta si legge ovunque.

Soluzione ideale: mixare entrambi. Se hai sia video che scritti, metti il video con a fianco la frase più importante trascritta. Chi non guarda legge.

Se hai 10-15 video testimonial, montali in un unico video con taglio ritmato (“io sono Luca, io sono Marco, io sono Paolo”). Molto più efficace dei singoli video presi uno alla volta.

Per iniziare, parti dai feedback testuali (più facili da ottenere), poi passa ai video quando il sistema è rodato. La richiesta video va fatta dal professionista più importante per il cliente.

I video dimostrativi del prodotto come si fanno?

Tre tipi di video dimostrativi che funzionano:

Tipo 1, screen recording per software/SaaS. Mostra il prodotto in azione, con voice over che spiega cosa sta succedendo. Durata 60-90 secondi. Ideale per software di produttività, gestionali, applicazioni complesse.

Tipo 2, video pratico per prodotti fisici. Mostra il prodotto in uso reale, mani che lo manipolano, casi di utilizzo. Durata 30-60 secondi. Ideale per attrezzi, prodotti culinari, gadget.

Tipo 3, video timelapse per servizi che hanno una trasformazione visibile. Esempio: home staging (prima/dopo accelerato), giardinaggio, restauro. Durata 30-45 secondi. Molto efficace.

Per tutti e tre, regole base:

Audio importante. Anche un voice over essenziale fa la differenza rispetto al video muto.

Sottotitoli sempre. Vedi domanda 1.5.

Mostrare il “wow factor” nei primi 10 secondi. L’utente decide se continuare a guardare basandosi sui primi secondi.

Quando inserire video lungo la pagina come “respiri visivi”?

Per landing molto lunghe (sales page B2M, pagine corso, pagine di vendita prodotti complessi), si possono inserire video brevi (15-30 secondi) ogni 2-3 sezioni come “respiri visivi”.

Funzioni dei video brevi:

Spezzare blocchi di testo lunghi. Una sezione di 800 parole è pesante da leggere. Inserire un video di 20 secondi a metà offre una pausa visiva.

Rinforzare specifici concetti. “Qui spieghiamo il metodo, ecco un esempio in video di 30 secondi”.

Mostrare elementi che il testo non comunica. “Come funziona effettivamente il software”, “Come si presenta la consulenza”.

Limite: massimo 4-5 video brevi su una pagina molto lunga. Oltre, la pagina diventa pesante da caricare e l’utente è sovraccaricato di stimoli.

Per servizi che cambiano in base al cliente, come gestire i video dimostrativi?

Difficile, perché un video dimostrativo specifico richiama un caso unico.

Tre strategie:

Strategia 1, video del processo. Non del risultato, ma del metodo. Per landing page: video dell’intervista al cliente, della fase di analisi, dello sviluppo del copy. Il processo è uguale per tutti, il risultato cambia.

Strategia 2, video con esempi multipli. Mostra 3-4 esempi diversi di tipo cliente in un singolo video. “Per dentisti, per immobiliaristi, per consulenti: ecco come abbiamo lavorato”.

Strategia 3, focalizzazione su un caso forte. Scegli il caso più rappresentativo e gira un video dedicato. Anche se è specifico, mostra una metodologia replicabile.

Per il mio servizio principale uso una combinazione: video di presentazione che mostra il metodo (uguale per tutti), poi linko a casi specifici nelle pagine /casi-studio/ separate.

Design e gerarchia visiva

Le 6 domande di questa sezione coprono il design generale della landing oltre l’above the fold: gerarchia visiva, font, colori, spaziatura, gestione delle immagini, uso degli sfondi. Il design è quello che fa la differenza tra una landing “professionale” e una che sembra fatta in casa. Una pagina con copy buono ma design scadente perde fino al 35% di conversioni rispetto alla stessa pagina ridisegnata bene.

Quali font usare nella landing page?

Tre coppie di font che funzionano nella maggior parte dei progetti:

Coppia 1, Montserrat (titoli) + Open Sans (body): elegante, moderna, leggibile. Funziona per servizi professionali B2M e B2F.

Coppia 2, Raleway (titoli) + Roboto (body): tecnologica, pulita. Funziona per SaaS, tech, finance.

Coppia 3, Playfair Display (titoli) + Nunito (body): più classica, sofisticata. Funziona per servizi luxury, beauty, lifestyle.

Regole base:

Pairing tra font del titolo e del body è più importante del singolo font. Mai usare lo stesso font per titolo e body, mai mescolare 3+ font diversi.

Open Sans e Roboto sono i font più versatili per il body. Nunito è migliore se serve corsivo leggibile.

Per i titoli, scegliere un font con buon peso (700-800 di tipografia) per garantire impatto visivo.

Mai font decorativi (script, gothic, brushed) per il body. Si possono usare con cautela per i titoli, ma con misura.

Come gestire i colori della landing?

Il colore portante della pagina è dato dalla foto principale, non dai colori del logo.

Schema operativo:

Step 1, scegliere la foto dell’above the fold con i toni cromatici che vuoi nella pagina.

Step 2, estrarre i colori principali della foto (3-4 colori dominanti). Si fa con strumenti come Adobe Color o Coolors.

Step 3, costruire la palette della pagina partendo da quei 3-4 colori. Uno o due colori di base (chiari, per i fondi), un colore primario (per i pulsanti CTA e accenti), un colore secondario.

Step 4, i colori del logo del cliente si usano per elementi specifici (logo nel header, eventuali accenti decorativi), non per dettare l’intera palette.

Esempio: se il logo è giallorosso ma la foto principale ha toni di blu e grigio, la pagina sarà blu/grigia con il logo presente nei suoi colori originali. Mai costringere tutta la pagina ai colori del logo se non sono coerenti con la foto.

Errore comune: pagine intere costruite sui colori del brand (giallo+arancio, rosso+nero), che risultano pesanti e poco professionali.

Come strutturare la gerarchia visiva?

Gerarchia significa che l’occhio distingue subito cosa è importante e cosa è secondario.

Tre tecniche per costruire gerarchia:

Tecnica 1, dimensioni progressive. H1 grande (40-60px), H2 medio (28-36px), H3 più piccolo (22-26px), body 16-18px. La differenza di dimensioni deve essere visibile a colpo d’occhio.

Tecnica 2, pesi tipografici. Bold per i titoli principali, semi-bold per i sottotitoli, regular per il body. Usare il bold solo per le parole chiave nel testo, mai per frasi intere.

Tecnica 3, spaziatura. Più spazio attorno agli elementi importanti, meno attorno agli elementi secondari. La spaziatura comunica “questo è importante, fermati a guardarlo”.

Quattro errori comuni di gerarchia:

Errore 1, tutto della stessa dimensione. Niente è importante.

Errore 2, troppi livelli di gerarchia. Più di 4-5 livelli diversi confondono.

Errore 3, gerarchia inconsistente. H2 di dimensioni diverse in punti diversi della pagina.

Errore 4, body troppo piccolo. Sotto i 16px è difficile da leggere, sotto i 14px è quasi illeggibile.

Quanto spazio bianco usare nella landing?

Tanto.

Lo spazio bianco (o “white space”, anche se può essere di altro colore) è quello che rende la landing leggibile e professionale. Le pagine piene fino al bordo sono percepite come povere e poco organizzate.

Regole operative:

Spazio attorno alle sezioni: minimo 60-80px di padding verticale tra una sezione e l’altra.

Spazio attorno ai testi: minimo 40-60px di padding orizzontale sui lati (su desktop, container largo 1200px massimo, mai 100% di larghezza).

Spazio attorno ai pulsanti CTA: minimo 30-40px di spazio attorno ai bottoni. Mai pulsanti incollati ad altri elementi.

Spazio tra i blocchi di testo: minimo 1,6 di line-height. Sotto, il testo è denso e poco leggibile.

Le landing americane abusano dello spazio bianco. Le landing italiane provinciali abusano del riempimento. La via di mezzo (italiana di qualità) è generosa con lo spazio bianco senza esagerare.

Le illustrazioni e gli stili grafici alternativi alle foto, quando funzionano?

Le illustrazioni funzionano molto bene per:

Servizi B2M tech, SaaS, finanza, consulenza. Hotjar è un esempio: il suo stile illustrato lo distingue immediatamente dai concorrenti.

Servizi che parlano di concetti astratti difficili da fotografare. Esempio: cybersecurity, blockchain, machine learning. Le foto stock di “hacker incappucciato davanti a schermo verde” sono terribili. Illustrazioni dedicate funzionano meglio.

Funzionano meno per:

Servizi B2F dove l’identificazione personale è critica. Una landing per servizi al cliente finale che usa illustrazioni invece di foto reali risulta più “fredda” e meno coinvolgente.

Settori dove il pubblico è più maturo o conservatore. Per studi legali tradizionali, le illustrazioni “moderne” possono risultare poco serie.

L’ideale per il B2M è un mix: foto reali del team in evidenza (per dare umanità) combinate con elementi grafici e illustrazioni (per dare personalità). Le illustrazioni da sole rischiano di rendere il sito troppo “agenzia di branding”.

Come integrare i loghi dei clienti nella landing?

I loghi dei clienti (per il B2M) sono uno degli asset di prova sociale più potenti. Vanno gestiti con cura.

Schema operativo:

Posizionamento: in una sezione dedicata nel mezzo della pagina (dopo l’above the fold, prima delle testimonianze). Eventualmente ripetuti in basso come “trusted by”.

Quantità: 6-12 loghi visibili. Sotto 6 è poco, sopra 12 si sovrappone visivamente.

Selezione: i 6-12 loghi più riconoscibili e prestigiosi. Mai mettere tutti i clienti, ma scegliere i top.

Trattamento visivo: tutti i loghi in scala di grigi (o tutti a colori). Mai mix di alcuni a colori e altri in grigio. Tutti della stessa altezza visiva (anche se la larghezza varia).

Tecnologia: SVG quando possibile (si scala perfettamente). PNG con trasparenza se non hai SVG.

Per landing B2F (B2C) i loghi dei clienti aziendali sono meno rilevanti. Si possono sostituire con loghi delle media in cui sei stato citato (“Come visto su Forbes, Sole24Ore, …”).

Animazioni, transizioni, effetti

Le 4 domande di questa sezione coprono animazioni e transizioni visive nella landing: quando funzionano, quando rallentano, transizioni su scroll, micro-animazioni di accento. Le animazioni sono uno degli aspetti più sovrastimati del design moderno. Una landing con poche animazioni semplici converte meglio di una landing piena di effetti elaborati.

Le animazioni sullo scroll funzionano?

Sì, se sottili e veloci. Le animazioni pesanti che fanno aspettare l’utente rallentano la pagina e la rendono frustrante.

Schema operativo che funziona:

Fade-in (l’elemento appare gradualmente) all’arrivo nello schermo: 0.3-0.5 secondi. Aggiunge eleganza senza rallentare.

Slide-up (l’elemento sale leggermente mentre appare): 0.4-0.6 secondi. Crea movimento naturale durante lo scroll.

Reveal scaglionato (più elementi che appaiono in sequenza rapida): solo per elementi raggruppati come liste o gallerie. Mai per blocchi di testo lunghi.

Cosa NON funziona:

Animazioni che bloccano la lettura (“aspetta 2 secondi prima di vedere il testo”). Frustrante.

Effetti parallax pesanti (immagini di sfondo che scorrono a velocità diversa). Carini in teoria, ma su mobile spesso laggano.

Animazioni su ogni singolo elemento. Generano caos visivo.

Per le animazioni su scroll su WordPress + Elementor: i preset di “fade in” e “slide up” funzionano bene. Evitare i preset “complex” o “advanced” che spesso introducono bug.

I countdown nelle landing funzionano?

Sì, ma solo se reali.

Countdown che funzionano:

Countdown per lancio di un nuovo prodotto. “Lancio il 15 giugno”, e il countdown va al 15 giugno. Coerente con un evento verificabile.

Countdown per fine offerta promozionale legata a una data esterna (Black Friday, fine anno). “Offerta valida fino al 30 novembre”, countdown verso il 30 novembre.

Countdown per chiusura iscrizioni a corso/webinar. “Iscrizioni fino alle 23:59 del 20 ottobre”, countdown verso quella scadenza.

Countdown che NON funzionano:

Countdown che si resettano automaticamente quando l’utente arriva sulla pagina (“Offerta termina in 14 minuti 33 secondi”). Lo sa sempre più gente, brucia credibilità.

Countdown senza riferimento a un evento concreto. “Offerta termina in 24 ore” senza spiegare perché.

Countdown ripetuti settimanalmente identici. Riconoscibili come trucco.

Il principio: il countdown deve avere una storia plausibile. Se non puoi spiegare in una frase perché c’è quel countdown, è probabilmente un trucco e gli utenti lo riconoscono.

Gli effetti hover (al passaggio del mouse) sui pulsanti funzionano?

Sì, e sono uno dei rari effetti che migliorano la conversione su desktop.

Schema operativo:

Hover sul pulsante CTA: cambio di colore leggero (più scuro) o piccolo zoom (1.05-1.1x). Comunica “stai per cliccare”, aumenta la “tappability” percepita.

Hover su link in pagina: sottolineatura o cambio colore. Migliora la chiarezza di cosa è cliccabile.

Hover su card o sezioni interattive: leggera ombra che appare o piccolo movimento (1-2px verso l’alto). Comunica interattività.

Su mobile gli effetti hover non funzionano (non c’è il mouse). Lo stesso effetto si può simulare con “tap state” (cambio di colore al tocco), ma è opzionale.

Regola generale: gli effetti hover devono essere veloci (0.2-0.3 secondi) e sottili. Effetti lenti o esagerati rallentano la percezione di velocità della pagina.

I “loaders” e gli stati di attesa servono?

Per le landing standard no, perché dovrebbero essere veloci abbastanza da non aver bisogno di loader.

Casi in cui i loader servono:

Submit di form complessi: dopo il click su “Invia”, mostrare per 1-2 secondi un loader prima del redirect alla thank you page. Comunica che qualcosa sta succedendo.

Caricamento di contenuti dinamici (es. calcolo preventivo, sondaggi multi-step). Mostrare un loader durante il calcolo.

Per landing standard senza azioni complesse, i loader non servono e possono rallentare la percezione di velocità.

Importante: la velocità di caricamento iniziale è cruciale. Mediamente, ogni secondo aggiuntivo di caricamento riduce il tasso di conversione del 7-10%. Sopra i 3 secondi di tempo di caricamento, la conversione crolla drammaticamente.

Per ottimizzare la velocità: immagini in formato webp, lazy loading degli elementi sotto il fold, minify CSS/JS, hosting di qualità, CDN se il traffico è internazionale.

Mobile optimization

Le 6 domande di questa sezione coprono l’ottimizzazione per il mobile: dimensionamento dei font e dei tap target, gestione delle immagini, semplificazione del layout, test su dispositivi reali, gestione di sticky elements, performance. Il 70-95% del traffico web in Italia è mobile, quindi l’above the fold mobile è prioritario. Una pagina desktop perfetta che funziona male su mobile è di fatto una pagina che non funziona.

Quali sono le regole base del design mobile per le landing?

Sei regole base che applico a tutti i progetti:

Regola 1, font del body minimo 18px. Sotto, l’utente non legge. Per i titoli, minimo 24px per H2, 30px+ per H1.

Regola 2, tap target minimo 44px di altezza (regola Apple, valida anche per Android). Sotto, l’utente sbaglia il tocco e si frustra.

Regola 3, immagini ottimizzate. Mai immagini di sfondo pesanti (1900×1000px) che Elementor nasconde su mobile ma che pesano comunque. Sempre webp dove possibile, lazy loading per gli elementi sotto il fold.

Regola 4, layout semplificato. Multi-colonna su desktop diventa singola colonna su mobile. Evitare elementi che si sovrappongono su mobile per mancanza di spazio.

Regola 5, CTA principale full-width o quasi. Il pulsante deve occupare l’intera larghezza dello schermo, non essere piccolo al centro.

Regola 6, test su 3-4 dispositivi reali prima della pubblicazione. iPhone, Android medio, eventualmente tablet. Non basta il “responsive preview” del browser.

Quando il 95% del traffico è mobile, conviene progettare prima il mobile?

Sì, mobile-first design è la scelta giusta.

Schema operativo:

Step 1, progettare l’above the fold per mobile (500-600px verticali, larghezza 375-414px). Tutto deve stare in quello spazio: logo + headline + sottotitolo + CTA visibile.

Step 2, costruire il resto della pagina in versione mobile.

Step 3, adattare al desktop come “espansione” del mobile, non viceversa.

Vantaggi del mobile-first:

Forza a essere essenziali. Quello che non sta sopra il fold mobile probabilmente non è essenziale.

Garantisce velocità di caricamento. Le immagini sono dimensionate per il mobile (più piccole), poi si adattano al desktop con responsive.

Garantisce usabilità mobile. Tap target, font size, spaziature sono pensati per il mobile, non come ripiego del desktop.

Lo svantaggio: il design desktop può risultare meno “ricco” se non si lavora bene sull’adattamento. Va bilanciato.

Su mobile il video nell’above the fold funziona meglio o peggio del desktop?

Funziona peggio.

Su mobile l’attivazione automatica del video è limitata da regole browser (e dal consumo dati dell’utente). Le thumbnail di un video che non parte da solo sono terribili.

Su mobile il video va spostato sempre sotto l’above the fold, nell’area dell’interesse, con thumbnail accattivante e call-to-action chiara (“Guarda il video di 90 secondi”).

L’above the fold mobile deve essere: logo + headline + sottotitolo + (eventuale immagine ridotta) + call to action. Punto.

Stesso discorso per le animazioni di sfondo: su mobile sono spesso pesanti e impattano sulle performance. Conviene rimuoverle o sostituirle con immagini statiche.

La barra di contatto fissa (sticky footer) su mobile funziona?

Sì, molto bene per servizi B2F dove il contatto telefonico o WhatsApp è la conversione primaria.

Schema operativo:

Sticky footer (40-50px di altezza, sempre visibile) con 2-3 azioni rapide: telefono, WhatsApp, eventualmente form. Ogni icona è un tap target dedicato.

L’utente può chiamare/scrivere in qualunque momento senza dover scrollare fino al form.

Funziona particolarmente bene per:

Servizi sanitari (dentista, fisioterapista, medico).

Servizi locali (palestra, parrucchiere, ristorante).

E-commerce (chat con il consulente).

Servizi B2M dove il contatto telefonico è cruciale.

Non funziona bene per:

Landing molto lunghe dove l’utente è in modalità “lettura”. La sticky bar può essere percepita come distrazione.

Servizi dove il form di richiesta preventivo è la conversione naturale, e il telefono è secondario.

Sticky footer va testato. Se aumenta la conversione (più telefonate, più WhatsApp, più chat), si tiene. Se non aumenta o aumenta solo le richieste informative ma non commerciali, si valuta se rimuoverlo.

Come gestire i form su mobile?

Form su mobile sono più difficili da compilare che su desktop. La gestione del form mobile influenza significativamente la conversione.

Sei regole operative:

Regola 1, ridurre al minimo i campi. Su mobile ogni campo aggiuntivo riduce la conversione del 20-30%. Mai più di 4-5 campi.

Regola 2, autocompletamento attivato. I browser mobili autocompletare email, nome, telefono se i campi hanno gli attributi giusti (autocomplete="email", autocomplete="tel", ecc.).

Regola 3, tastiere appropriate. Campo email apre tastiera con @, campo telefono apre tastiera numerica. Si fa con il tipo input HTML (type="email", type="tel", ecc.).

Regola 4, label sopra i campi, non a fianco. Su mobile lo spazio orizzontale è scarso.

Regola 5, validazione in tempo reale. Se l’utente inserisce un’email malformata, mostra l’errore immediatamente, non solo al submit.

Regola 6, pulsante submit grande e full-width. Minimo 50px di altezza, larghezza piena del container.

Per landing complesse con form lunghi, considerare di spezzare il form in più step (step 1: email + nome, step 2: telefono + necessità). Spesso aumenta la conversione perché ogni step sembra meno impegnativo.

Come testare la performance della landing su mobile?

Tre strumenti essenziali:

Strumento 1, Google PageSpeed Insights (https://pagespeed.web.dev/). Misura performance, accessibilità, best practice, SEO. Target Lighthouse 90+ in tutti gli assi. Sotto i 70 ci sono problemi seri da risolvere.

Strumento 2, GTmetrix. Più dettagliato di PageSpeed Insights, mostra waterfall del caricamento, identifica risorse pesanti, suggerisce ottimizzazioni specifiche.

Strumento 3, test su dispositivi reali. Niente sostituisce un test su un iPhone medio e un Android medio. Caricare la landing, navigare, compilare il form, verificare che tutto funzioni.

Errori comuni che impattano sulla performance mobile:

Immagini non ottimizzate. Soluzione: webp, lazy loading, dimensioni adeguate.

CSS/JS non minificati. Soluzione: plugin di ottimizzazione (Autoptimize per WordPress).

Script di tracking pesanti (analytics multipli, pixel, chat). Soluzione: caricamento differito.

Hosting scadente. Soluzione: hosting con cache server-side (es. SiteGround, Kinsta) o CDN.

Tema WordPress pesante. Soluzione: scegliere temi leggeri (Astra, GeneratePress) invece di temi multi-purpose pieni di funzionalità inutili.

Performance mobile sotto i 3 secondi di caricamento iniziale è il target. Sotto i 2 secondi è eccellente.

Casi limite e setting specifici

Le 3 domande di questa sezione affrontano casi limite e setting specifici: landing per pubblici molto specifici, gestione del dark mode, accessibilità per pubblici con disabilità. Sono temi minoritari per la maggior parte dei progetti, ma quando si applicano possono determinare il successo o il fallimento della landing.

Le landing devono supportare il dark mode?

Per la maggior parte dei progetti no, non è prioritario.

Il dark mode è un’opzione di sistema (iOS, Android, browser) che alcuni utenti attivano per ridurre l’affaticamento visivo o per gusti personali. Quando attivato, le pagine web possono adattarsi automaticamente con CSS dedicato (prefers-color-scheme: dark).

Casi in cui supportare dark mode è importante:

Pubblico tech / sviluppatore. Probabilità che usino dark mode > 60%.

App o software con uso prolungato. Gli utenti vogliono ridurre l’affaticamento.

Servizi rivolti a un pubblico giovane (under 30). Adozione del dark mode più alta.

Casi in cui non è prioritario:

Pubblico B2F maturo (over 50). Dark mode è spesso disattivato.

Landing di servizi a conversione singola (visite brevi).

Mercati B2M tradizionali (PMI italiane, servizi professionali).

L’implementazione del dark mode richiede 4-8 ore di lavoro aggiuntivo (CSS, test, ottimizzazione immagini). Se il pubblico lo richiede, vale la pena. Se no, è un’opzione che si può aggiungere in futuro.

Come gestire l’accessibilità della landing per pubblici con disabilità?

Accessibilità (WCAG 2.1) è un tema serio che spesso viene trascurato.

Cinque principi base:

Principio 1, contrasto adeguato. Il testo deve essere leggibile per persone con problemi visivi. Contrasto minimo 4.5:1 per il body, 3:1 per testi grandi. Strumenti di verifica: WebAIM Contrast Checker.

Principio 2, alt text sulle immagini. Ogni immagine deve avere un attributo alt che la descriva. Per immagini decorative, alt=”” (vuoto).

Principio 3, navigazione da tastiera. Tutti gli elementi interattivi (link, form, pulsanti) devono essere navigabili con il tasto Tab. Indicatore di focus visibile.

Principio 4, sottotitoli sui video. Vedi domanda 1.5. Sempre presenti.

Principio 5, label sui form. Ogni campo input deve avere un label associato (Email), non solo placeholder.

L’accessibilità non è solo etica, è anche SEO. Google considera l’accessibilità nel ranking. Inoltre, le landing accessibili sono mediamente più usabili per tutti gli utenti, non solo per quelli con disabilità.

Per progetti enterprise, l’accessibilità WCAG è spesso un requisito legale. Per PMI italiane è raccomandata ma non sempre obbligatoria.

Come gestire landing per servizi con linguaggio molto tecnico (medico, legale, finanziario)?

Il rischio per servizi tecnici è il jargon che il pubblico non capisce.

Tre strategie operative:

Strategia 1, spiegare con metafore. Per servizi tecnici al pubblico generale (es. assicurazione vita per la famiglia), tradurre il jargon in linguaggio comune con metafore. “Polizza unit linked” diventa “investimento che cresce con il mercato”.

Strategia 2, ammettere la complessità. Per servizi B2M tecnici (es. consulenza fiscale specialistica), il pubblico è esperto e si aspetta linguaggio tecnico. In questi casi usare il vocabolario corretto, ma con definizioni minime per chi non lo conosce.

Strategia 3, segmentare per livello di consapevolezza. Vedi cluster 7 sui livelli di Schwartz. Una landing per “professionisti del settore” usa linguaggio tecnico, una per “pubblico generale” usa linguaggio semplificato. Sono due landing diverse.

Errore comune: usare jargon per “fare i professionali”. Le PMI italiane spesso pensano che usare termini tecnici dia autorevolezza. In realtà allontana il pubblico non esperto e non aggiunge autorevolezza a quello esperto.

La regola: il visitatore deve capire la promessa in 5 secondi. Se il jargon glielo impedisce, va riscritta nella lingua del target.

Chiusura della pagina

Le 30 domande di questo cluster sono il sesto di 8 cluster del database FAQ. Gli altri cluster coprono:

• Above the fold, immagini, attrazione visiva (cluster 1)
• Feedback, testimonianze, riprova sociale (cluster 2)
• Prezzo, scarsità, urgenza, ancoraggio (cluster 3)
• Traffico, target, segmentazione del pubblico (cluster 4)
• Posizionamento, mercati saturi, livelli di consapevolezza (cluster 7)
• Analytics, conversione, A/B test (cluster 6)
• Form, CTA, processo di contatto (cluster 8)

Il design e il video non sono decorazioni, sono parte integrante della comunicazione della landing. Approfondisco la fase 3 (Interesse) del metodo OVT, dove video e design giocano il ruolo principale, nel sub-pillar dedicato.

Per il sistema completo, parti dalla guida principale. Per i wireframe interattivi dei 7 tipi di landing, vai a l’anatomia di una landing page efficace.

Le 265 domande del database sono state raccolte in 28 live di corso, 4 edizioni, oltre 300 professionisti formati. Le domande di questo cluster su video e mobile sono particolarmente rilevanti oggi, dove il 70-95% del traffico è mobile e il consumo video supera il consumo di testo nel B2F.

Buon lavoro.

Luca