Cosa significa davvero il design mobile-first, come differisce dal design responsivo, e come progettare e costruire un sito mobile-first: ordine dei contenuti, target di tocco, breakpoint CSS min-width, immagini e test, più note per le aziende con più sedi.
Domande frequenti
Qual è la differenza tra design mobile-first e design responsivo?
Il design responsivo significa un sito che adatta il suo layout a qualsiasi dimensione dello schermo. Il mobile-first è l'ordine in cui progetti e programmi: inizia con lo schermo piccolo e aggiungi layout per schermi più grandi. Un sito mobile-first è responsivo, ma un sito responsivo costruito desktop-first spesso finisce con una versione mobile compressa e ripensata.
Perché il mobile-first è importante per la SEO?
Google usa l'indicizzazione mobile-first, il che significa che usa principalmente la versione mobile di una pagina per l'indicizzazione e il posizionamento. Se contenuto, intestazioni, dati strutturati o link mancano su mobile, Google potrebbe non vederli.
Quali breakpoint dovrei usare per un sito mobile-first?
Lascia che il contenuto decida: allarga il browser finché il layout sembra allungato, poi aggiungi un breakpoint lì. Punti di partenza comuni sono intorno a 640px, 768px, 1024px e 1280px, che molti framework CSS usano, scritti come media query min-width.
Quanto dovrebbero essere grandi i pulsanti su mobile?
WCAG 2.2 stabilisce una dimensione minima del target di 24 per 24 pixel CSS (livello AA) e raccomanda 44 per 44 (livello AAA). Le linee guida di Apple usano 44 punti e le indicazioni Material di Google usano 48dp. Punta a circa 44-48 pixel per i pulsanti primari e i link nei menu.
Come dovrebbero gestire i siti web mobile-first i franchise?
Usa un template condiviso con una pagina di sede per ogni franchise, ciascuna con click-to-call, tap-per-le-indicazioni, orari e un'azione di prenotazione o ordine specifica per quel punto vendita in cima. I visitatori mobile che cercano 'nelle vicinanze' vogliono agire immediatamente, quindi il localizzatore di sedi e l'azione primaria devono funzionare con un pollice.
Risposta breve: il web design mobile-first significa che progetti e costruisci prima la versione telefono di una pagina, poi aggiungi layout per tablet e desktop man mano che lo schermo si allarga. Nel codice, il tuo CSS base è il layout mobile e usi le media query min-width per migliorarlo. Ti obbliga a decidere cosa conta di più su ogni pagina, e corrisponde a come Google indicizza i siti oggi.
Mobile-first vs responsivo: la vera differenza
Le persone usano questi termini in modo intercambiabile, ma rispondono a domande diverse.
Design responsivo
Design mobile-first
Cos'è
Un sito il cui layout si adatta alla dimensione dello schermo
Un processo: inizia piccolo, migliora verso l'alto
Stile CSS
Può essere max-width (ridurre desktop) o min-width
min-width (espandere mobile verso l'alto)
Priorità del contenuto
Spesso decisa su desktop, poi compressa
Decisa sullo schermo più piccolo
Fallimento tipico
Contenuto nascosto, target di tocco minuscoli, pagine pesanti su telefono
Il layout desktop sembra scarso se non migliorato
La best practice è entrambi: un sito responsivo, costruito mobile-first.
Passo 1: Decidi l'ordine del contenuto su un telefono
Su uno schermo stretto tutto è una colonna, quindi l'ordine è il tuo intero layout. Per ogni pagina, scrivi un elenco numerato di sezioni nell'ordine in cui un visitatore su un telefono ne ha bisogno.
Per la homepage di un servizio locale potrebbe essere:
Cosa fai e dove (una riga)
Azione primaria: chiama o prenota
Prove: valutazione, recensioni o clienti riconoscibili
Servizi, come brevi card tappabili
Area di servizio o sedi
Prove secondarie: foto, prima e dopo
FAQ
Footer con orari, indirizzo e contatti
Qualsiasi cosa che non guadagna un posto in questo elenco probabilmente non appartiene neanche al desktop.
Passo 2: Progetta per i pollici
Target di tocco: rendi pulsanti e link del menu almeno 44-48 pixel alti, con spazio tra loro. Il minimo WCAG 2.2 è 24 per 24 pixel CSS; è un pavimento, non un obiettivo.
Azione primaria raggiungibile: una barra inferiore fissa con "Chiama" e "Prenota" funziona bene per le aziende locali. Tienila corta così non copre il contenuto.
Navigazione: un pulsante menu che apre un elenco a schermo intero va bene. Mantieni l'elenco a cinque-sette elementi e metti l'azione principale fuori dal menu.
Form: una colonna, etichette sopra i campi e i tipi di input corretti (tel, email, number) così i telefoni mostrano la tastiera corretta. Usa gli attributi autocomplete così i browser possono compilare nomi e indirizzi.
Testo: 16px per il corpo del testo è un minimo comune e impedisce a iOS Safari di ingrandire i campi form. Mantieni la lunghezza delle righe confortevole e il contrasto almeno 4.5:1 per il corpo del testo (WCAG AA).
Passo 3: Costruiscilo mobile-first nel codice
Inizia con il tag viewport nell'intestazione di ogni pagina:
@media (min-width: 1024px) { .services { grid-template-columns: repeat(3, 1fr); } .site-nav { display: flex; } /* mostra nav completa, nascondi pulsante menu */ } ```
Alcune tecniche che rendono questo più facile:
Tipo e spaziatura fluidi con clamp(), ad esempio font-size: clamp(1.75rem, 5vw, 3rem) per un'intestazione, così hai bisogno di meno breakpoint.
Flexbox e Grid con auto-fit: grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) crea colonne solo quando c'è spazio.
Container query (supportate nei browser principali attuali) lasciano che una card cambi layout in base alla larghezza del suo contenitore piuttosto che dell'intero schermo, utile per componenti riutilizzabili.
Framework di utilità come Tailwind CSS sono mobile-first per impostazione predefinita: le classi senza prefisso si applicano a tutte le dimensioni e i prefissi come md: si applicano da quella larghezza in su.
Scegli i breakpoint dove il tuo contenuto si rompe, non per modelli di telefono specifici.
Passo 4: Rendilo veloce su una vera connessione telefonica
I telefoni hanno processori più lenti e reti meno affidabili del laptop su cui progetti. I Core Web Vitals di Google lo misurano: Largest Contentful Paint (caricamento), Interaction to Next Paint (reattività) e Cumulative Layout Shift (stabilità visiva).
Immagini responsive: usa srcset e sizes così i telefoni scaricano file più piccoli, e formati moderni come WebP o AVIF.
Imposta sempre larghezza e altezza (o aspect-ratio) su immagini e incorporamenti per prevenire il layout shift.
Caricamento lazy delle immagini sotto la fold con loading="lazy", ma non dell'immagine hero principale.
Limita i font a una o due famiglie e pochi pesi.
Taglia gli script di terze parti: i widget di chat, i tracker e gli incorporamenti sono cause frequenti di interazione lenta sui telefoni. Caricali tardi o solo dove necessario.
Passo 5: Migliora per gli schermi più grandi
Una volta che il layout telefono funziona, allarga il browser e aggiungi valore, non solo larghezza:
Griglie di servizi e prodotti multi-colonna
La barra di navigazione completa invece di un pulsante menu
Testo e immagini affiancati
Una barra laterale fissa per articoli lunghi o riepilogo prenotazioni
Stati hover, ma mai informazioni solo-hover, poiché i touch screen non possono fare hover
Passo 6: Testa come un visitatore
Modalità dispositivo degli strumenti sviluppatore del browser per verifiche rapide a 360px, 390px e 414px di larghezza, più le dimensioni tablet.
Almeno un vero Android e un vero iPhone, perché gli emulatori mancano i quirk di scorrimento, le tastiere che coprono i campi e i processori lenti.
Lighthouse in Chrome DevTools, e PageSpeed Insights, che mostra anche i dati sul campo degli utenti Chrome reali quando un sito ha abbastanza traffico.
Ruota in orizzontale e controlla che le barre fisse non coprano metà dello schermo.
Completa il compito principale (prenota, compra, chiama) con un pollice su dati mobili.
Controlla la Search Console per i problemi mobile dopo il lancio. La nostra guida a Google Search Console spiega dove guardare.
Mobile-first per franchise e aziende con più sedi
I siti franchise e multi-sede hanno uno specifico problema mobile: la maggior parte dei visitatori arriva da una ricerca "nelle vicinanze" su un telefono e vuole immediatamente i dettagli di una sede.
Localizzatore di sedi prima: "Usa la mia posizione" più una ricerca per CAP o città, con i risultati come card tappabili.
Una pagina per sede costruita da un template condiviso: indirizzo, orari, telefono, link mappa, servizi e un'azione di prenotazione o ordine locale, con il pulsante chiamata in cima.
Dettagli locali che differiscono: ogni pagina ha bisogno delle proprie foto, personale o recensioni dove possibile, non solo un nome di città cambiato.
Brand coerente, controllo locale: i franchisee dovrebbero poter aggiornare orari e offerte senza toccare il layout.
Dati strutturati: schema LocalBusiness su ogni pagina sede con nome, indirizzo e telefono corretti.
Checklist mobile-first
[ ] Tag viewport meta su ogni pagina
[ ] Ordine del contenuto scritto per una singola colonna
[ ] Azione primaria visibile senza scorrimento su un telefono
[ ] Target di tocco circa 44-48px, con spaziatura
[ ] Testo corpo 16px+, contrasto 4.5:1
[ ] CSS base per mobile, query min-width per schermi più grandi
[ ] Immagini responsive con dimensioni impostate
[ ] Stesso contenuto e dati strutturati su mobile e desktop
[ ] Testato su veri dispositivi iOS e Android
Costruirne uno senza partire da zero
Ogni sito che We.Inc costruisce è responsivo dall'inizio, e puoi visualizzare in anteprima il layout del telefono nell'editor, poi regolarlo visivamente o nel codice. Sfoglia i template per vedere come i layout collassano a una colonna, o descrivi la tua attività e ottieni una prima bozza da testare sul tuo telefono.