Sito mobile first: cos'è e come si progetta

In breve: un sito mobile first è un sito progettato prima per lo smartphone e poi esteso a tablet e desktop. Si decide sullo schermo più piccolo cosa conta davvero, e sugli schermi più grandi si aggiungono spazio e dettagli. È importante anche per la SEO, perché Google usa la versione mobile dei contenuti per l'indicizzazione e il posizionamento.

Mobile first: significato

Mobile first indica l'ordine in cui nasce un sito. Un tempo si disegnava prima la versione desktop e alla fine se ne ricavava una mobile, impilando le colonne e nascondendo elementi. Con il mobile first si parte dal contrario: il primo progetto è per uno schermo stretto, usato con il pollice. Solo quando quella versione funziona si aggiungono i punti di rottura (breakpoint) per gli schermi più grandi.

Il metodo riguarda tre livelli:

• Contenuti: cosa deve vedere subito chi arriva da smartphone, e cosa può stare più in basso o dietro un tocco?
• Design: menu, pulsanti, moduli e dimensioni del testo sono pensati per il tocco e per gli schermi piccoli.
• Codice: gli stili di base valgono per gli schermi piccoli, e le media query con min-width arricchiscono il layout per quelli più grandi. Questo approccio per aggiunte successive si chiama anche progressive enhancement.

Mobile first non significa trascurare il desktop. Significa che il desktop non riceve più l'attenzione per primo, e spesso ne esce più ordinato.

Mobile first, responsive o adattivo: le differenze

I tre termini vengono spesso confusi, ma indicano cose diverse:

Google distingue tre configurazioni per i siti mobile: design responsive, pubblicazione dinamica (stesso URL, ma HTML diverso a seconda del dispositivo) e URL separati, per esempio un sottodominio m. Google consiglia il design responsive perché è lo schema più semplice da implementare e mantenere (Google Search Central). Pubblicazione dinamica e URL separati corrispondono a ciò che spesso si chiama design adattivo.

Nella pratica, per la maggior parte delle aziende la scelta migliore è un sito responsive progettato mobile first. Un sito responsive pensato partendo dal desktop di solito sta nello schermo dello smartphone, ma sembra una pagina desktop schiacciata.

Perché il mobile first conta per la SEO

Google usa la versione mobile dei contenuti di un sito, scansionata con lo user agent per smartphone, per l'indicizzazione e il posizionamento (Google Search Central). Quello che manca su smartphone, quindi, Google può non vederlo. La documentazione di Google ne ricava alcune regole concrete:

• Stessi contenuti: la versione mobile deve avere gli stessi contenuti principali di quella desktop. Fisarmoniche e schede vanno bene; i contenuti assenti su mobile potrebbero non essere indicizzati.
• Stessi titoli, title e meta description su entrambe le versioni.
• Stessi dati strutturati, per esempio per breadcrumb, prodotti e video.
• Immagini con lo stesso testo alternativo e, se possibile, gli stessi URL.
• Caricamento lento (lazy loading): i contenuti principali non devono caricarsi solo dopo un tocco o uno scorrimento, perché Google non esegue queste azioni.
• Stessi meta tag robots: un noindex solo sulla versione mobile può impedire l'indicizzazione.

Con un sito responsive quasi tutti questi punti sono soddisfatti in automatico, perché l'HTML è uno solo. La velocità è un tema a parte: quanto rapida e stabile è una pagina su smartphone lo misurano i Core Web Vitals, che spieghiamo nella guida ai Core Web Vitals.

Come creare un sito mobile first passo dopo passo

1. Capisci cosa fanno i visitatori da mobile. Guarda negli analytics quali pagine vengono visitate da smartphone e cosa fanno lì gli utenti. A un idraulico servono soprattutto numero di telefono, zona servita e modulo di richiesta; a un'azienda di software B2B una spiegazione chiara e la prenotazione di una demo.
2. Dai priorità ai contenuti, non nasconderli. Ordina ogni pagina per importanza. web.dev sconsiglia di nascondere contenuti solo perché non entrano nello schermo, perché la dimensione dello schermo non dice nulla su ciò che serve all'utente (web.dev).
3. Wireframe dalla larghezza minima. Parti da una colonna sola. Dove vanno titolo, proposta di valore, prove e invito all'azione quando lo spazio è una striscia stretta?
4. Pensa alle dita. Le aree toccabili dovrebbero misurare circa 48 pixel indipendenti dal dispositivo, con circa 8 pixel di spazio tra l'una e l'altra (web.dev). Nei moduli usa i tipi di campo giusti, come type="tel" o type="email", così compare la tastiera adatta.
5. Viewport, testo e immagini. Ogni pagina ha bisogno del meta tag <meta name="viewport" content="width=device-width, initial-scale=1">. Non bloccare lo zoom, perché peggiora l'accessibilità. Le immagini si ridimensionano con max-width: 100% ma mantengono gli attributi width e height, così lo spazio è riservato e il layout non salta (web.dev).
6. Breakpoint in base ai contenuti. Non in base ai modelli di telefono, ma dove il layout smette di funzionare mentre allarghi lo schermo. web.dev suggerisce di progettare prima per lo schermo piccolo e poi allargarlo finché non serve un breakpoint.
7. Estendi a tablet e desktop. Ora arrivano più colonne, immagini più grandi, un menu esteso e i contenuti aggiuntivi che su uno schermo grande servono davvero.

È lo stesso ordine con cui costruiamo i siti nel nostro lavoro di agenzia web. Se oggi il tuo sito su smartphone funziona molto peggio che su desktop, creare un sito mobile da zero può essere più sensato che correggere il vecchio: i segnali per capirlo sono nella guida al rifacimento del sito web.

Mobile first per l'e-commerce

In un negozio online la versione mobile incide direttamente sulle vendite, perché lì non si legge soltanto: si compra. Fai attenzione soprattutto a questi punti:

• Pagine categoria: filtri e ordinamento si raggiungono con il pollice e mostrano subito quanti prodotti restano.
• Schede prodotto: foto, nome, prezzo, varianti e pulsante del carrello stanno in alto. Tempi e costi di spedizione sono visibili senza cercarli.
• Carrello e checkout: meno campi possibile, acquisto come ospite senza registrazione, compilazione automatica con gli attributi autocomplete corretti e metodi di pagamento rapidi da smartphone.
• Dati di prodotto: i dati strutturati dei prodotti devono essere completi anche su mobile, perché Google legge quella versione.

Se stai per aprire o rifare un negozio online, nella pagina dedicata all'e-commerce trovi come lavoriamo.

Come testare la versione mobile

• Dispositivi reali: apri le pagine principali su almeno uno smartphone recente e uno più vecchio, in verticale e in orizzontale, e completa un percorso intero, per esempio una richiesta di contatto o un acquisto.
• Chrome DevTools, modalità dispositivo: utile per controlli veloci a diverse larghezze. La documentazione di Chrome la definisce però un'approssimazione, perché il codice non gira davvero su un dispositivo mobile (Chrome for Developers).
• PageSpeed Insights: mostra i dati sul campo di utenti Chrome reali negli ultimi 28 giorni e i dati di laboratorio di Lighthouse. Per il test mobile Lighthouse simula un dispositivo di fascia media su rete mobile (Google for Developers).
• Lighthouse: si avvia dai Chrome DevTools e controlla prestazioni, accessibilità, best practice e SEO (Chrome for Developers).
• Google Search Console: il rapporto sui Core Web Vitals indica quali gruppi di URL hanno problemi su mobile. Se non lo usi ancora, parti dalla nostra guida a Google Search Console.

Durante il test chiediti: c'è scorrimento orizzontale? Tutti i link e i pulsanti si toccano senza errori? Il testo si legge senza zoom? Qualcosa si sposta mentre la pagina carica? E su smartphone ci sono davvero tutti i contenuti presenti su desktop?