Come rendere un sito web responsive per il mobile

Per rendere un sito web responsive per il mobile, aggiungi un meta tag viewport, costruisci il layout partendo dal mobile con larghezze flessibili e usa i breakpoint CSS per riorganizzarlo sugli schermi più grandi — impilando le colonne, comprimendo il menu e ridimensionando le immagini per adattarle. Poi controlla ogni pagina alla larghezza del telefono per lo scorrimento laterale, il testo troppo piccolo e i pulsanti troppo piccoli per essere toccati. Su un sito creato con l'AI, un prompt chiaro più una verifica in un'anteprima di dimensione telefono di solito risolve la maggior parte dei problemi.

Cos'è davvero il design responsive

Un sito responsive usa un unico insieme di pagine e URL che si adattano allo schermo. Invece di un sito "m." separato, il CSS cambia il layout a determinate larghezze, chiamate breakpoint. I mattoni fondamentali:

• Il meta tag viewport dice ai browser mobile di usare la larghezza reale del dispositivo.
• I layout fluidi usano percentuali, flexbox e grid invece di larghezze fisse in pixel.
• Le media query (o classi di framework come md: di Tailwind) cambiano il layout oltre una certa larghezza.
• I media flessibili — immagini e video che si restringono per entrare nel loro contenitore.

È importante perché gran parte del tuo traffico probabilmente arriva dal telefono, e perché Google indicizza la versione mobile delle tue pagine. Se contenuti o link esistono solo su desktop, Google potrebbe non vederli nemmeno.

Opzioni e compromessi

Il mobile-first è di solito più semplice: una colonna singola è il layout più facile, e aggiungere colonne man mano che lo spazio cresce richiede meno lavoro che toglierle.

Le parti che di solito si rompono

Il tag viewport

Se una pagina sul telefono sembra un piccolo sito desktop, manca il tag viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

Non aggiungere maximum-scale=1 né user-scalable=no. Bloccare lo zoom con due dita rende il sito più difficile da usare per chi ha una vista ridotta.

Larghezze fisse e scorrimento orizzontale

Il bug responsive più comune è qualcosa più largo dello schermo: un contenitore con width: 1200px fisso, una tabella larga, un URL lungo o un blocco di codice, un'immagine senza max-width: 100%. Tutta la pagina scorre di lato. Usa max-width invece di width, lascia che il testo vada a capo e dai agli elementi larghi una propria area di scorrimento.

Navigazione

Cinque link di menu desktop difficilmente stanno su un telefono. La soluzione tipica è un pulsante menu che apre un pannello. Mantieni visibili le due o tre azioni più importanti — "Prenota", "Carrello", "Accedi" — e assicurati che il menu funzioni con la tastiera e si chiuda facilmente.

Testo e aree di tocco

• Un testo di circa 16 px è un minimo sensato sul telefono. Campi con testo più piccolo fanno ingrandire automaticamente gli iPhone quando vengono toccati.
• Rendi pulsanti e link facili da toccare. WCAG 2.2 AA fissa un minimo di 24 per 24 pixel CSS (o una spaziatura sufficiente); intorno a 44 pixel è più comodo per il pollice.
• Lascia spazio tra link vicini, così le persone non sbagliano quello giusto.

Tabelle e dati

Le tabelle larghe sono la parte più difficile di un'app responsive. Opzioni, in ordine di preferenza: mostrare meno colonne sul telefono, trasformare ogni riga in una card o inserire la tabella in un contenitore scrollabile orizzontalmente con la prima colonna fissata. Scegli in base a ciò che le persone devono confrontare.

Immagini e media

Usa max-width: 100% e height: auto, servi file più piccoli agli schermi piccoli con srcset e imposta larghezza e altezza per evitare salti nel layout. I video e le mappe incorporati hanno bisogno di un contenitore responsive per mantenere le proporzioni. Immagini più leggere rendono anche le pagine più veloci — vedi come rendere il tuo sito più veloce.

Moduli

Metti le etichette sopra i campi, rendi i campi a larghezza piena e usa i tipi di input giusti (type="email", type="tel", inputmode="numeric") così il telefono mostra la tastiera adatta. Metti il pulsante di invio dove un pollice lo raggiunge e fallo restare visibile quando si apre la tastiera.

Interazioni solo con il passaggio del mouse

Sui telefoni non c'è il passaggio del mouse. Tooltip, menu a tendina e anteprime che compaiono solo al passaggio sono invisibili per chi usa il tocco. Falli funzionare anche con il tocco.

Prompt che funzionano

Per una nuova costruzione, dillo fin dall'inizio:

Costruisci questo partendo dal mobile. Colonna singola sui telefoni, due colonne dalla larghezza tablet, layout completo su desktop. Nessuno scorrimento orizzontale a 320 px di larghezza, testo del corpo di almeno 16 px, aree di tocco di almeno 44 px, un pulsante menu sugli schermi piccoli e tabelle che diventano card sui telefoni.

Per una pagina esistente, descrivi ciò che vedi:

Sui telefoni, la pagina /pricing scorre di lato e le tre card dei piani sono schiacciate una accanto all'altra. Impila le card verticalmente sotto i 768 px, fai scorrere orizzontalmente la tabella di confronto dentro il proprio contenitore con la colonna delle funzioni fissata, e lascia invariato il layout desktop.

Controlla ogni pagina a 375 px di larghezza. Elenca tutto ciò che sborda, si sovrappone, ha un testo più piccolo di 16 px o aree di tocco più piccole di 44 px, o funziona solo al passaggio del mouse, poi correggi ciascun punto.

Passo dopo passo

1. Conferma il tag viewport nell'intestazione della pagina.
2. Testa a 320-375 px di larghezza nella modalità dispositivo del browser o in un'anteprima di dimensione telefono. Scorri ogni pagina dall'alto in basso.
3. Risolvi prima lo scorrimento orizzontale. Trova l'elemento troppo largo; tutto il resto è difficile da valutare finché non sparisce.
4. Sistema la navigazione: pulsante menu, azioni chiave visibili.
5. Controlla testo, aree di tocco e moduli in ogni flusso chiave — registrazione, ricerca, checkout, contatto.
6. Gestisci tabelle e media: card o contenitori scrollabili, immagini ed embed responsive.
7. Controlla le dimensioni intermedie. Trascina lentamente la larghezza dal telefono al desktop; i layout spesso si rompono intorno alla larghezza tablet.
8. Testa su un telefono reale. Gli emulatori non colgono cose come la tastiera a schermo che copre un pulsante, le tacche dello schermo e la velocità del sito con la rete mobile.

Errori comuni

• Testare solo a una dimensione di telefono. Controlla un telefono piccolo, uno grande e un tablet.
• Nascondere contenuti sul mobile per farli entrare. Google indicizza la versione mobile, e chi usa il telefono vuole le stesse informazioni.
• Disattivare lo zoom nel tag viewport.
• Immagini di dimensioni desktop sui telefoni, che costano tempo di caricamento e traffico dati.
• Elementi a posizione fissa che si accumulano: un header sticky, un banner dei cookie e un'icona della chat possono coprire metà schermo del telefono.
• Pop-up che non si chiudono su uno schermo piccolo perché il pulsante di chiusura è fuori schermo.

Checklist mobile

• Meta tag viewport presente; zoom non disattivato
• Nessuno scorrimento orizzontale a 320 px su nessuna pagina
• Testo del corpo di circa 16 px; i campi non fanno scattare lo zoom
• Aree di tocco abbastanza grandi e distanziate
• Il menu funziona sui telefoni e con la tastiera
• Tabelle leggibili sui telefoni (card, meno colonne o contenitore scrollabile)
• Immagini ed embed si ridimensionano; servono file della dimensione giusta
• I moduli usano i tipi di input giusti; il pulsante di invio è raggiungibile
• Nulla di importante dipende dal passaggio del mouse
• Testato su almeno un telefono reale

Il layout responsive fa anche parte dell'accessibilità: WCAG chiede che i contenuti funzionino a 320 px di larghezza e con zoom al 200%. Se stai costruendo un'app che le persone useranno ogni giorno dal telefono, come creare una web app ottimizzata per il mobile va oltre, includendo le PWA installabili.

Il design responsive su Mythex

Mythex crea web app responsive, e con Pro può incapsularle come app Android e iPhone. Nello spazio di lavoro, clicca l'icona del telefono sopra Preview (Switch to Mobile) per vedere la tua app in una cornice di dimensione telefono, e trascina il bordo della cornice per provare altre larghezze (Preview e Code). La documentazione ha un breve prompt di partenza per sistemare il layout sugli schermi piccoli nei prompt per il responsive mobile. Controlla anche su un telefono reale: apri l'URL pubblicato, oppure condividi un link di anteprima e aprilo sul tuo telefono.

Domande