Un sito nasce mobile-first, anche se lo sviluppiamo da un computer

Il sito prende forma su un monitor grande: tavole di design, editor di codice, anteprime affiancate. È comodo per lavorare, ma può farci scambiare lo spazio disponibile sul nostro computer per quello che avrà chi visita la pagina. Sul telefono un titolo occupa più righe, una navigazione si comprime e una scelta che sembrava immediata può finire molto più in basso.

Progettare mobile-first significa partire dalle condizioni più strette per decidere cosa conta davvero, poi adattare e arricchire l’esperienza quando lo spazio cresce. Non significa ignorare il desktop, né disegnare una versione ridotta di un sito già pensato per il monitor.

Prima il percorso, poi le colonne.

Su uno schermo piccolo non possiamo affidare la chiarezza a tre colonne, a un menu sempre aperto o a un’immagine enorme accanto al testo. Dobbiamo mettere in ordine le domande di chi arriva:

1. Dove sono e che cosa offre questa attività?
2. È ciò che sto cercando? Quali informazioni mi servono per capirlo?
3. Qual è il passo successivo e quanto è semplice compierlo?

Queste domande aiutano a scegliere gerarchia, parole, navigazione e call to action prima degli effetti visivi. Una pagina mobile ben progettata non è necessariamente corta: può essere lunga, purché resti leggibile, ben scandita e orientata a un compito.

Mobile-first non vuol dire nascondere metà sito.

Il poco spazio invita a togliere. A volte è giusto eliminare una decorazione o rimandare un dettaglio secondario. È diverso rimuovere informazioni importanti, link o funzioni dalla versione mobile solo perché il layout non riesce a contenerli.

Google usa principalmente la versione mobile del contenuto per l’indicizzazione e raccomanda che le informazioni principali, i titoli e i metadati siano equivalenti fra mobile e desktop. È una ragione in più per progettare una gerarchia migliore, non un sito impoverito per chi usa il telefono.

Le decisioni che cambiano davvero su uno schermo piccolo.

Navigazione. Il menu deve lasciare vedere le sezioni e permettere di raggiungerle senza gesti nascosti o passaggi inutili. Un’azione principale può restare in evidenza, ma non deve coprire il contenuto.

Testi. Titoli, paragrafi ed elenchi vanno letti alla larghezza reale di un telefono. Se un titolo occupa sei righe, forse va riscritto; ridurre il carattere fino a farlo entrare non è sempre la risposta.

Pulsanti e form. Il dito non è un cursore preciso. Controlli troppo vicini, campi difficili da compilare e tastiere inadatte al tipo di dato aumentano gli errori proprio nel momento in cui chiediamo un contatto o un acquisto.

Media e prestazioni. Un’immagine pensata per un monitor non dovrebbe essere scaricata identica su ogni telefono. Dimensioni, formato e priorità di caricamento vanno scelti per il ruolo che il contenuto svolge nella pagina.

Interazioni. Ciò che si scopre solo passando il mouse non funziona come unico modo per dare un’informazione. Touch, tastiera e movimento ridotto vanno considerati nello stesso progetto.

Per un ecommerce questo lavoro tocca ricerca, varianti, carrello e pagamento. Per un sito di servizi può voler dire rendere comprensibili offerta e contatto già nei primi passaggi. La sequenza giusta dipende dalle persone e dagli obiettivi del progetto, non da una larghezza standard.

Poi si progetta anche il desktop.

Partire dal mobile non obbliga a impilare gli stessi blocchi su un monitor largo. Sul desktop possiamo usare lo spazio per confronti, immagini più articolate, navigazione più visibile e relazioni tra contenuti che su telefono diventano sequenziali.

La sostanza però deve restare coerente. Un utente che passa dal telefono al computer non dovrebbe trovare un’offerta diversa o scoprire soltanto lì una funzione essenziale. Il responsive design funziona quando la presentazione cambia per aiutare la lettura, mantenendo chiaro lo stesso percorso.

Si può lavorare da PC e progettare per il telefono?

Sì. Il problema non è lo strumento di sviluppo: è fermarsi alla sua anteprima più comoda. Un processo mobile-first può seguire questo ciclo:

1. definire contenuti e azioni essenziali senza dipendere da un layout largo;
2. comporre e verificare la pagina a larghezze piccole;
3. ampliare il layout dove i contenuti ne traggono beneficio;
4. provare i percorsi su dispositivi reali, oltre che nell’emulazione del browser;
5. controllare anche tastiera, zoom, caricamento e movimento ridotto.

Non basta aprire la pagina sul telefono alla fine e correggere gli elementi che escono dallo schermo. A quel punto le scelte più costose — struttura, contenuti, interazioni — sono spesso già state prese.

Il punto, quindi, non è scegliere fra mobile e desktop. È smettere di trattare il telefono come una correzione dell’ultimo minuto. Se il sito nasce chiaro nello spazio più difficile, può crescere sui monitor grandi senza perdere la propria direzione.

Se stai pensando a un nuovo sito, scopri come progettiamo i siti web. Se invece stai valutando quello attuale, leggi quando conviene riprogettarlo.

Riferimenti tecnici

• Google Search Central: indicizzazione mobile-first e parità dei contenuti.
• web.dev: principi di responsive web design e dimensioni delle aree touch.