Archives

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

1. crea backup e ambiente di staging;
2. attiva un tema responsive compatibile;
3. ricrea eventuali personalizzazioni nel child theme;
4. controlla menu, widget, shortcode e cache;
5. disattiva WPtouch soltanto in staging;
6. verifica URL, canonical e contenuti su più dispositivi;
7. pubblica con possibilità di rollback;
8. 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.