Sito web responsive
Un sito responsive utilizza griglie fluide, immagini flessibili e media query CSS affinché una sola pagina si adatti a qualsiasi dimensione di schermo.
Cos’è un sito web responsive?
Un sito web responsive serve lo stesso codice HTML a ogni dispositivo e adatta il layout con griglie fluide, immagini scalabili e media query CSS. Invece di un sito mobile separato (versione m-dot), i contenuti fluiscono in modo che colonne, caratteri e navigazione si adattino alla larghezza dello schermo. La base di questo approccio è <meta name="viewport" content="width=device-width, initial-scale=1"> nell’intestazione <head> della pagina — senza di essa, i browser mobile mostrano la pagina alla larghezza desktop e ignorano le media query.
Perché un sito web responsive è importante?
Google utilizza l’indicizzazione mobile-first, il che significa che la versione mobile della tua pagina è quella che viene scansionata, indicizzata e usata per il posizionamento. Una configurazione responsive con un solo URL e un unico HTML è anche il metodo consigliato da Google, poiché è più facile da gestire ed evita gli errori SEO spesso introdotti da siti mobile separati. Per un negozio online è anche una questione di conversione pura: la maggior parte del traffico proviene da mobile, e una pagina prodotto angusta o un checkout che non si adatta allo schermo influiscono negativamente sulle vendite.
Casi d’uso comuni
- Pagine prodotto su dispositivi mobili. Assicurati che le immagini, il prezzo e il pulsante “Aggiungi al carrello” siano leggibili e cliccabili senza zoomare.
- Dimensioni riservate. Imposta larghezza/altezza o un rapporto di aspetto su immagini e banner in modo che non spostino il contenuto danneggiando il CLS.
- Priorità above the fold. I contenuti più importanti dovrebbero essere visibili sui piccoli schermi senza dover scorrere la pagina.
- Test su più dispositivi. Controlla il tema su smartphone, tablet e desktop prima di ogni modifica importante.
Prospettiva Shopify
I temi di Shopify per Online Store 2.0 come Dawn sono responsive e mobile-first fin da subito, ma le personalizzazioni e le app possono compromettere questo aspetto. Pop-up, barre adesive e script di terze parti sono i problemi più diffusi su mobile. Testa le modifiche nella visualizzazione dei dispositivi dell’editor dei temi e su un telefono reale, e tieni d’occhio i Core Web Vitals in Search Console, invece di dare per scontato che il tema gestisca tutto in automatico.