Un layout non diventa responsive perché hai guardato l’anteprima telefono per trenta secondi e non hai visto nulla esplodere. Titoli più lunghi, menu reali, immagini verticali, form, contenuti dinamici e schermi intermedi sono molto più creativi di noi nel trovare problemi.

In questa parte eseguiamo l’audit di un sito Divi 5 responsive usando breakpoint, valori ereditati, preset e variabili. Non ricostruiremo ogni pagina: controlleremo ciò che esiste, individueremo le eccezioni e correggeremo il livello giusto del sistema.

Se stai iniziando ora con Divi, trovi nella pagina la sezione per ottenerlo. Per familiarizzare con le viste e i controlli puoi consultare prima l’approfondimento sull’Editor Responsive.

Preparare breakpoint e percorso di controllo

Divi 5 mette a disposizione sette breakpoint personalizzabili: Phone, Phone Wide, Tablet, Tablet Wide, Desktop, Widescreen e Ultra Wide. Non devi usarli tutti. Attiva quelli che risolvono problemi reali del progetto; più breakpoint significano anche più valori da controllare e mantenere.

Stabilisci un percorso ripetibile: homepage, pagine interne, articoli, archivi, header, footer e template. Per ogni pagina scorri dall’alto verso il basso nei breakpoint attivi. Parti dagli elementi globali, perché un difetto corretto nel preset o nella variabile può sistemare più punti contemporaneamente.

Prima il sistema, poi l’eccezione. Se tutti i titoli H2 sono troppo grandi su telefono, modifica il preset. Se soltanto un titolo molto lungo crea un problema, intervieni su quel modulo. Questa distinzione evita una collezione di correzioni locali che tra qualche mese nessuno saprà più spiegare.

Controllare tipografia, spaziature e dimensioni

Verifica dimensione, interlinea, lunghezza delle righe e spazi fra le sezioni. Le unità fluide e le formule clamp possono ridurre il numero di override, ma non sostituiscono il controllo visivo. Un titolo può rientrare perfettamente e restare comunque sproporzionato rispetto al contenuto.

Usa le variabili di design in Divi 5 per valori ricorrenti e i preset per i ruoli tipografici. Controlla poi le eccezioni create durante la costruzione: valori inseriti a mano, margini negativi, altezze fisse e larghezze massime sono i primi sospettati quando un layout si rompe.

Su schermi larghi verifica anche il problema opposto: righe di testo infinite, contenuti dispersi e immagini che si ingrandiscono oltre una misura utile. Responsive non significa soltanto “funziona su telefono”. Significa mantenere gerarchia, leggibilità e proporzioni lungo tutto l’intervallo.

Controlla inoltre le altezze minime. Possono mantenere ordinate card e hero, ma diventano fragili quando il testo cresce o l’utente aumenta lo zoom. Preferisci contenitori capaci di espandersi e usa l’altezza fissa soltanto quando il contenuto è davvero controllato. Verifica padding superiore e inferiore separatamente: spesso ciò che sembra un problema di altezza nasce dalla somma di spazi applicati a sezione, riga e modulo.

Verificare Flexbox, Grid e ordine dei contenuti

Nei contenitori Flex controlla direzione, wrapping, gap e larghezza dei figli. Un gruppo di pulsanti può restare orizzontale su desktop, andare a capo su tablet e diventare verticale su telefono. La guida alle colonne responsive con Flexbox mostra come progettare questi passaggi senza duplicare strutture.

Nelle griglie riduci il numero di colonne e neutralizza gli span troppo aggressivi. Soprattutto, osserva l’ordine visivo rispetto all’ordine del documento. Cambiare Display Order può risolvere una composizione, ma devi verificare che la lettura e la navigazione da tastiera rimangano comprensibili.

Prova contenuti imperfetti. Inserisci un titolo molto lungo, una card senza immagine, un pulsante con più parole e un paragrafo breve. Se il sistema funziona soltanto con le frasi dimostrative, non è ancora pronto. È una vetrina ben pettinata, non un layout affidabile.

Usa anche l’anteprima libera, trascinando la larghezza tra un breakpoint e l’altro. Gli errori non compaiono necessariamente sulle misure predefinite: un menu può andare a capo a 980 pixel e tornare ordinato a 768. Individua il punto in cui la struttura smette di funzionare e solo allora valuta se attivare un breakpoint aggiuntivo o modificare una larghezza fluida.

Audit di header, moduli e contenuti dinamici

Nell’header controlla logo, menu, dropdown, area cliccabile dell’icona mobile e comportamento sticky. Nel footer verifica wrapping, allineamenti e collegamenti. Nei form prova focus, messaggi di errore, checkbox e pulsante. Nei moduli dinamici controlla casi con più categorie, autori senza foto e immagini in evidenza di proporzioni differenti.

Non limitarti al builder. Apri le pagine nel browser, ridimensiona la finestra e prova dispositivi reali quando possibile. Controlla orientamento verticale e orizzontale, zoom e navigazione con tastiera. Aggiungi inoltre gli attributi ARIA in Divi 5 solo quando chiariscono un componente che non è già descritto correttamente dall’HTML.

Concludi annotando cosa hai corretto a livello globale e cosa resta un’eccezione. Un buon audit non produce soltanto pagine più ordinate: lascia anche un sistema più leggibile. Nella parte 13 useremo Canvas e Interactions per aggiungere elementi fuori dal flusso della pagina senza perdere controllo su visibilità e accessibilità.

Fai un’ultima prova con zoom al 200%, caratteri ingranditi e connessione lenta. Questi scenari rivelano testi tagliati, contenitori rigidi ed elementi che arrivano in ritardo alterando il layout. Se una correzione richiede di nascondere contenuto importante su telefono, riconsidera la struttura: il breakpoint dovrebbe riorganizzare l’informazione, non eliminare ciò che non entra comodamente.

Ripeti poi una verifica dopo aver svuotato cache e CSS statico. Il builder può mostrarti una versione aggiornata mentre il frontend continua a servire file precedenti. Controllare da utente non autenticato evita di scambiare un problema di cache per un errore responsive e ti permette di vedere ciò che riceverà davvero il visitatore.

Questo articolo è una rielaborazione originale in italiano basata sull’articolo originale di Elegant Themes, a cui va il credito per il tutorial di partenza.