Come verificare e migliorare il design responsive del tuo sito WordPress
Oltre il 60% del traffico web arriva da dispositivi mobili. Se il tuo sito WordPress non si adatta correttamente a smartphone e tablet, perdi visitatori e posizioni su Google. Il design responsive è un requisito fondamentale, non un’opzione. In questa guida ti spiego come verificare che il tuo sito sia davvero responsive e come correggere i problemi più comuni.
Cosa significa design responsive
Un sito responsive è un sito che adatta automaticamente il suo layout in base alle dimensioni dello schermo del dispositivo. Lo stesso sito appare in modo diverso su desktop (layout largo), tablet (layout medio) e smartphone (layout stretto, navigazione semplificata). Questo adattamento avviene tramite le media query CSS che applicano stili diversi in base alla larghezza della viewport.
Google usa il mobile-first indexing: la versione mobile del tuo sito è quella che viene analizzata per il posizionamento. Un sito non responsive viene penalizzato nei risultati di ricerca mobile.
Come verificare se il tuo sito è responsive
Ecco gli strumenti per testare la responsività del tuo sito:
Strumenti per sviluppatori del browser: premi F12, poi clicca sull’icona del dispositivo mobile (o premi Ctrl+Shift+M). Puoi simulare qualsiasi dimensione di schermo e vedere come il sito si adatta.
Google Mobile-Friendly Test: il test di Google analizza la tua pagina e ti dice se è ottimizzata per i dispositivi mobili, segnalando i problemi specifici.
Google PageSpeed Insights: oltre alle prestazioni, segnala problemi di usabilità mobile come testo troppo piccolo, elementi cliccabili troppo vicini e contenuto più largo della viewport.
Test su dispositivi reali: nessun emulatore sostituisce il test su un dispositivo reale. Prova il tuo sito su almeno un iPhone, un telefono Android e un tablet.
Problemi responsive più comuni in WordPress
I problemi di responsività più frequenti in WordPress sono:
- Immagini troppo larghe: le immagini non si ridimensionano e causano lo scroll orizzontale. La soluzione è aggiungere nel CSS: img { max-width: 100%; height: auto; }
- Tabelle non responsive: le tabelle HTML non si adattano allo schermo mobile. Usa overflow-x: auto su un wrapper o un plugin come TablePress che gestisce le tabelle responsive.
- Menu di navigazione rotto: il menu desktop non si trasforma in menu hamburger. Verifica che il tuo tema supporti il menu mobile e che il JavaScript necessario sia caricato.
- Video incorporati non responsive: gli iframe di YouTube o Vimeo hanno dimensioni fisse. Usa un wrapper con position: relative; padding-bottom: 56.25% per renderli fluidi.
- Font troppo piccoli su mobile: il testo deve essere almeno 16px sul mobile. Font più piccoli costringono l’utente a zoomare.
- Elementi cliccabili troppo vicini: i pulsanti e i link devono avere almeno 48px di spazio toccabile per essere facilmente cliccabili col dito.
Correggere i problemi con CSS personalizzato
La maggior parte dei problemi responsive si risolve con media query CSS. Aggiungi il CSS personalizzato nel Customizer (Aspetto → Personalizza → CSS aggiuntivo) o nel file style.css del tema child:
/* Smartphone */
@media (max-width: 768px) {
.site-header {
padding: 10px;
}
.entry-content img {
max-width: 100%;
height: auto;
}
.sidebar {
display: none;
}
table {
display: block;
overflow-x: auto;
}
}
I breakpoint più comuni sono: 768px (tablet portrait), 1024px (tablet landscape) e 480px (smartphone piccoli). Alcuni framework CSS usano breakpoint diversi: verifica quelli del tuo tema prima di aggiungere media query personalizzate per evitare conflitti.
Il meta tag viewport
Il meta tag viewport dice al browser mobile come comportarsi con la larghezza della pagina. Verifica che il tuo tema includa questo tag nell’<head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Senza questo tag, i browser mobili mostrano la versione desktop rimpicciolita. Tutti i temi moderni lo includono, ma se usi un tema vecchio potrebbe mancare.
Scegliere un tema realmente responsive
Non tutti i temi WordPress sono ugualmente responsive. Quando scegli un tema, verifica che:
- La demo del tema funzioni bene su mobile (testala col browser in modalità mobile).
- Il tema supporti il menu hamburger mobile nativo.
- Le immagini e le gallerie si adattino alla viewport.
- I form e i pulsanti siano facilmente utilizzabili su touchscreen.
- Il tema sia testato con i Core Web Vitals e abbia buoni punteggi mobile su PageSpeed Insights.
Plugin utili per il responsive design
Alcuni plugin possono aiutarti a migliorare la responsività del sito:
- WPtouch: crea una versione mobile separata del sito, utile per temi non responsive molto vecchi.
- Jepack: include un modulo per le immagini responsive che serve dimensioni diverse in base al dispositivo.
- Responsive Menu: aggiunge un menu hamburger personalizzabile se il tuo tema non ne ha uno soddisfacente.
Serve assistenza?
Se il tuo sito WordPress non è responsive o ha problemi di visualizzazione su mobile, il team di SoccorsoWP può analizzare e correggere tutti i problemi. Apri un ticket e rendi il tuo sito perfetto su ogni dispositivo.
