Per ottenere un sito WordPress mobile responsive non serve più creare una seconda versione con WPtouch. I temi moderni usano layout fluidi, media query e immagini adattive per mostrare gli stessi contenuti e URL su desktop, tablet e smartphone.
Perché evitare una versione mobile separata
Due versioni possono duplicare template, impostazioni e test, creare differenze nei contenuti e complicare cache e canonical. Il responsive design mantiene una sola pagina che si adatta allo spazio disponibile.
1. Scegliere un tema responsive
Controlla aggiornamenti, compatibilità e qualità del codice. Prova demo e pagine reali con testo lungo, menu, tabelle, gallerie e moduli. Un’etichetta “responsive” non garantisce usabilità.
2. Usare un child theme
Inserisci le personalizzazioni in un child theme o in strumenti supportati dal tema. Modificare direttamente i file del tema principale espone alla perdita delle modifiche durante gli aggiornamenti.
3. Impostare il viewport
Il tema deve includere un viewport coerente:
<meta name="viewport" content="width=device-width, initial-scale=1">Non disabilitare lo zoom dell’utente. Se il tag manca, correggi il tema anziché aggiungerlo più volte con plugin diversi.
4. Layout fluidi
Preferisci Grid, Flexbox, percentuali e funzioni CSS come min(), max() e clamp(). Evita larghezze fisse che producono scroll orizzontale.
.layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1.5rem;
}5. Immagini responsive
WordPress genera attributi srcset e sizes per gli allegati gestiti correttamente. Carica un originale adeguato, evita immagini enormi e usa WebP o AVIF quando disponibili. Non impostare dimensioni che deformano il rapporto.
6. Menu accessibile
Il pulsante del menu mobile deve essere raggiungibile da tastiera, avere nome accessibile e comunicare lo stato aperto/chiuso. Gestisci focus ed Escape nei menu complessi. Non nascondere la navigazione principale soltanto dietro gesti.
7. Tipografia e controlli
Usa testo leggibile senza zoom, interlinea sufficiente e righe non troppo lunghe. Pulsanti e link devono avere area di attivazione e distanza adeguate; non affidare azioni essenziali al solo hover.
8. Tabelle e contenuti larghi
Per tabelle di dati usa un contenitore con scorrimento orizzontale e un’indicazione visiva. Per confronti semplici valuta card impilate. Non ridurre il testo fino a renderlo illeggibile.
9. Moduli da smartphone
Associa ogni campo a una label, usa tipi input corretti e mostra errori vicini al campo. Riduci i campi obbligatori e prova autofill, password manager e tastiera virtuale.
10. Prestazioni mobile
Connessioni e dispositivi mobili amplificano JavaScript, font e immagini pesanti. Rimanda script non essenziali, limita widget esterni e misura con PageSpeed Insights e DevTools. Non nascondere soltanto un elemento pesante con CSS: potrebbe essere comunque scaricato.
11. Test reali
- larghezze intermedie, non solo preset comuni;
- orientamento verticale e orizzontale;
- zoom del browser e testo ingrandito;
- navigazione da tastiera;
- Safari iOS e Chrome Android;
- rete lenta e cache fredda;
- form, login, carrello e checkout.
Migrare da WPtouch
- crea backup e ambiente di staging;
- attiva un tema responsive compatibile;
- ricrea eventuali personalizzazioni nel child theme;
- controlla menu, widget, shortcode e cache;
- disattiva WPtouch soltanto in staging;
- verifica URL, canonical e contenuti su più dispositivi;
- pubblica con possibilità di rollback;
- rimuovi il plugin dopo il periodo di controllo.
Conclusione
Un sito WordPress mobile responsive moderno usa un solo contenuto e un tema adattivo, senza dipendere da una versione parallela. Cura layout, immagini, menu, moduli e prestazioni, poi prova dispositivi e condizioni reali prima di rimuovere WPtouch.
