La maggior parte di chi visita il suo sito arriva dal telefono. Eppure si costruisce quasi sempre sullo schermo grande — e la vista piccola si controlla, quando va bene, solo alla fine. È esattamente da qui che nascono i problemi che nei corsi mi trovo a riparare più spesso.
L'unico consiglio che cambia il modo di lavorare
Costruisca la pagina e poi controlli subito ogni sezione sul telefono, prima di passare alla successiva. Non tutto insieme alla fine.
La differenza è notevole: se corregge venti sezioni contemporaneamente alla fine, perde di vista quale modifica abbia agito dove. Sezione per sezione è ogni volta una piccolezza.
La vista si cambia nell'editor in basso a sinistra, con l'icona del dispositivo.
Come sono collegate le viste dei dispositivi
Il principio su cui quasi tutti inciampano all'inizio: Elementor eredita dal grande al piccolo.
Quello che imposta nella vista desktop vale automaticamente anche per tablet e telefono — finché lì non imposta qualcosa di diverso. Non appena inserisce un valore proprio nella vista telefono, quel valore resta fissato per il telefono e non segue più il desktop.
Ne derivano due regole pratiche.
Modifichi i contenuti sempre nella vista desktop. Se modifica un testo nella vista telefono, cambia sì ovunque — ma perde facilmente di vista quale impostazione sia agganciata dove.
Imposti valori mobili solo dove serve. Ogni valore sovrascritto è un punto in più da curare a ogni modifica futura.
I cinque errori più frequenti
Larghezze fisse in pixel. Un container largo 1200 pixel non entra in nessuno schermo di telefono e genera scorrimento orizzontale. Usi valori percentuali o una larghezza massima invece di una fissa.
Spaziature pensate solo per il desktop. 120 pixel di spazio interno sopra e sotto sullo schermo grande sembrano generosi. Sul telefono significano che chi visita scorre davanti a superfici vuote. Su mobile imposti valori nettamente più piccoli — di solito la metà o meno.
Dimensioni del testo senza adattamento mobile. Un titolo da 64 pixel sul telefono occupa cinque righe. Per i titoli conviene quasi sempre un valore proprio, più piccolo.
Aree cliccabili troppo piccole. Pulsanti e voci di menu hanno bisogno di una dimensione minima per essere colpiti con sicurezza dal pollice — circa 44 per 44 pixel. Due link uno sotto l'altro con poco spazio in mezzo, sul telefono, sono una prova di pazienza.
Ordine sbagliato. Sul desktop l'immagine sta a sinistra e il testo a destra. Sul telefono si impilano — e improvvisamente l'immagine finisce prima del titolo. Con i container flexbox cambia l'ordine sotto Avanzate per ciascuna vista, senza duplicare la struttura. Perché qui i container siano superiori è spiegato in Container al posto delle sezioni.
Nascondere elementi su mobile — con criterio
Sotto Avanzate → Responsive può nascondere gli elementi per singolo dispositivo. È utile per le grafiche decorative che sul telefono rubano solo spazio.
Due limiti: gli elementi nascosti vengono caricati comunque — risparmia spazio, non tempo di caricamento. E non nasconda mai contenuti necessari alla comprensione. Una versione mobile a cui mancano informazioni essenziali non è un'ottimizzazione.
Breakpoint personalizzati
Per impostazione predefinita Elementor lavora con desktop, tablet e telefono. Sotto Impostazioni del sito → Responsive si possono attivare soglie aggiuntive, per esempio per schermi grandi o telefoni piccoli.
Il mio consiglio: resti sulle tre viste standard finché non ha un problema concreto. Ogni breakpoint in più significa un'altra vista da controllare a ogni modifica — e la precisione aggiuntiva, nella pratica, non la nota nessuno.
Verificare: non solo nell'editor
La vista telefono nell'editor è una simulazione. Mostra correttamente la larghezza, ma non tutto: comportamento al tocco, resa reale dei caratteri, caricamento con connessione scadente.
Guardi la pagina almeno una volta su un dispositivo reale prima che vada online. E controlli in particolare due cose: la pagina si sposta in orizzontale? Allora da qualche parte c'è un elemento troppo largo. E il menu funziona — si apre, si chiude?
Per quanto riguarda i tempi di caricamento
Su mobile la connessione è spesso peggiore e il dispositivo più lento. Ed è proprio lì che vengono misurati i Core Web Vitals, che confluiscono nella valutazione per la ricerca. Se vuole risparmiare tempo di caricamento in un punto solo, lo faccia sul mobile: Elementor e i Core Web Vitals.
Elementor Pro: le impostazioni responsive ci sono in entrambe le versioni. Pro le estende a intestazione, footer e popup — proprio con il menu sul telefono è questa la differenza che si sente. Scopri Elementor Pro
Se vuole passare in rassegna il suo sito in versione mobile insieme, invece di curare i singoli sintomi, è una parte tipica del mio corso Elementor.
Tag