# Come rendere un sito web mobile friendly

Rendere un sito mobile friendly significa partire dallo schermo piccolo: viewport corretto, aree di tocco da 44 px, nessuno scorrimento orizzontale, moduli che si compilano dal telefono. Misure, comandi e obblighi di legge.

> Pagina: https://ui.eneawork.it/blog/sito-web-mobile-friendly
> Markdown: https://ui.eneawork.it/blog/sito-web-mobile-friendly.md

*2026-11-01*

Come rendere un sito web mobile friendly: si parte dallo schermo piccolo, con testo leggibile senza zoom, aree di tocco da almeno 44 px e nessuno scorrimento orizzontale. Il desktop viene dopo, come variante di un layout già provato in verticale.

Il catalogo EneUI conta 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, misurati e letti da /api/stats il 1 novembre 2026. I blocchi di navigazione sono 9 e quelli di contatto 33, contati con backend/blocks.js lo stesso giorno. La query «how to make a website mobile friendly» è passata a Breakout nell'export Google Trends worldwide del 1 novembre 2026: è un indice relativo, non un numero assoluto di ricerche.

## Il viewport è il primo controllo

Se manca il meta viewport, un telefono assume una larghezza di 980 px e rimpicciolisce tutto: il testo diventa microscopico e i pulsanti si sovrappongono. La correzione sta in una riga, nella head di ogni pagina, prima di qualsiasi foglio di stile.

Non usare user-scalable=no né maximum-scale=1: bloccano lo zoom e violano il criterio WCAG 2.2 1.4.4 (Resize Text), che chiede testo ingrandibile fino al 200% senza perdita di contenuto.

## Quattro misure che decidono se il sito regge

Aree di tocco. Il minimo legale è 24×24 CSS px (WCAG 2.2, criterio 2.5.8, raccomandazione del 5 ottobre 2023). In pratica servono 44 px, la misura delle linee guida Apple, perché il pollice copre più di quanto il dito tocchi.,Testo base. 16 px come dimensione minima del corpo. Sotto i 16 px Safari su iOS ingrandisce la pagina quando si tocca un campo del modulo, e il layout salta.,Nessuno scorrimento orizzontale. Il contenuto deve stare nella larghezza del viewport. Tabelle lunghe e immagini con dimensioni fisse sono le due cause ricorrenti.,Moduli con il tipo giusto. type="email", type="tel" e inputmode="numeric" aprono la tastiera corretta e riducono gli errori di battitura.

## Immagini e font: il peso si sente su rete mobile

Un'immagine da 2400 px servita a un telefono da 390 px costa banda e tempo di decodifica senza alcun beneficio visivo. La soluzione è srcset con sizes, più loading="lazy" su tutto ciò che sta sotto la prima schermata. Per i font, font-display: swap evita il testo invisibile durante il caricamento. Le due tecniche sono spiegate in immagini responsive con srcset e in font-display e CLS.

## Il menu è il punto in cui si perde la visita

Un menu desktop con dieci voci, compresso su 390 px, diventa una riga di testo illeggibile. Su mobile serve un pulsante esplicito, un pannello a schermo intero, la chiusura con Esc e il focus che torna al pulsante. I dettagli tecnici sono in navbar mobile in React; i blocchi già pronti sono in blocchi navbar.

## Come misurarlo in dieci minuti

Lighthouse in modalità mobile simula una CPU quattro volte più lenta e una rete 4G: è una stima severa ma ripetibile. Il comando sotto raccoglie tre esecuzioni e riporta la mediana, che è più stabile di una singola corsa.

npx @lhci/cli autorun --collect.url=https://example.com --collect.numberOfRuns=3

Le soglie da guardare sono tre: LCP sotto 2,5 secondi, CLS sotto 0,1, INP sotto 200 ms. Come si impostano in CI è in soglie Lighthouse CI; per l'interazione il riferimento è INP spiegato. Il dato che conta resta quello di campo, in Search Console, perché il laboratorio non vede il telefono dell'utente.

## Accessibilità e obblighi: cosa dice la legge

In Italia la legge 9 gennaio 2004, n. 4, articolo 3, impone l'accessibilità dei siti della pubblica amministrazione; la direttiva (UE) 2016/2102, del 26 ottobre 2016, estende lo stesso obbligo agli enti che erogano servizi pubblici, con la norma tecnica EN 301 549 come riferimento. Per un'azienda privata l'obbligo contrattuale arriva quando vende alla PA, ma i criteri WCAG 2.2 restano la misura tecnica utile a chiunque. Un sito accessibile è anche più facile da indicizzare, perché la struttura che serve a uno screen reader è la stessa che legge un motore.

## Dove questa guida non arriva

L'emulazione di Chrome DevTools non sostituisce un dispositivo reale: Safari su iOS gestisce la barra degli indirizzi in modo diverso, e i telefoni Android economici hanno prestazioni che nessun profilo simulato riproduce. Se il pubblico include utenti su dispositivi vecchi, serve almeno una prova su un telefono fisico prima del rilascio.

## Da dove partire oggi

Correggi il viewport e le dimensioni di base, poi rimisura: è la modifica con il rapporto costo/beneficio più alto.,Sostituisci il menu compresso con un pannello mobile: parti dai componenti di navigazione.,Rifai i moduli con i tipi di input corretti: i componenti form coprono validazione e stati di errore.,Aggiungi una sezione contatti raggiungibile con un pollice: i blocchi di contatto sono 33 e già provati su schermo piccolo.,Se stai scegliendo la piattaforma, leggi il confronto tra WordPress, Wix e componenti React prima di decidere.

## FAQ

### Quanto deve essere grande un pulsante su mobile?

Almeno 24×24 CSS px per il criterio WCAG 2.2 2.5.8, ma in pratica 44×44 px: il dito copre un'area più ampia del punto di contatto e un bersaglio piccolo produce tocchi sbagliati.

### Serve un sito separato per mobile?

No. Un sito responsive con un solo HTML serve telefono, tablet e desktop, e Google indicizza la stessa pagina. Un sito separato tipo m.example.com duplica contenuti e richiede due manutenzioni.

### Come verifico se il mio sito è mobile friendly?

Apri il sito sul telefono con una mano e prova a fare quello che chiedi al visitatore: leggere, compilare, chiamare. Poi esegui Lighthouse in modalità mobile e controlla LCP, CLS e INP.

### Il testo sotto i 16 px è un problema?

Sì, su iOS Safari un campo con testo sotto i 16 px fa ingrandire la pagina al focus e sposta il layout. Tieni 16 px come dimensione base del corpo e dei campi modulo.

### Un sito accessibile è obbligatorio per legge?

Per la pubblica amministrazione italiana sì, per la legge 9 gennaio 2004, n. 4, articolo 3, e per la direttiva (UE) 2016/2102 del 26 ottobre 2016. Per un'azienda privata diventa un obbligo contrattuale quando fornisce servizi alla PA.