Mobile-first: progettare dal piccolo verso il grande

Perché partire dagli schermi piccoli rende il CSS responsive più semplice, progressivo e facile da mantenere.

Quando impariamo a scrivere HTML e CSS, lo facciamo quasi sempre davanti a uno schermo grande di un computer. È naturale quindi che il nostro primo istinto sia quello di scrivere il CSS pensando al layout desktop, e solo alla fine cercare di “aggiustarlo” per gli smartphone.

Questo approccio si chiama desktop-first. In molti progetti semplici può funzionare, ma spesso porta a scrivere CSS ridondante, complesso e fragile.

Oggi l’approccio più consigliato per il web responsive è il mobile-first, vicino al principio del progressive enhancement.

Cos’è l’approccio Mobile-first?

Mobile-first significa che il CSS di base (quello fuori da qualsiasi regola speciale per le dimensioni dello schermo) è progettato per gli smartphone.

Scrivi il tuo HTML, scrivi il tuo CSS e guardi l’anteprima stringendo la finestra del tuo browser fino a 320px. Gli elementi saranno impilati uno sull’altro grazie al naturale comportamento a blocco dell’HTML. Userai pochissimo CSS, principalmente per i colori, la tipografia e un po’ di padding. Niente colonne, niente grid complesse, niente elementi affiancati.

Solo dopo aver completato la visualizzazione mobile, inizi ad allargare la finestra del browser. Quando noti che lo schermo è diventato abbastanza grande e che il tuo layout mobile “si rompe” o diventa sgraziato (es. testi che si estendono per righe lunghissime), introduci una regola CSS speciale per dire al browser: “Ehi, se lo schermo è grande ALMENO questa dimensione, allora affianca questi due elementi”.

Perché conviene partire dal piccolo

La semplicità intrinseca: Il layout mobile è, per natura, una singola colonna impilata. L’HTML fa già questo di default. Se scrivi prima il CSS mobile, stai semplicemente assecondando il browser.
Meno sovrascritture: Se progetti prima per desktop, probabilmente forzerai due elementi ad affiancarsi con Flexbox. Poi, per il mobile, dovrai scrivere una regola per annullare quel layout e farli impilare di nuovo. Col mobile-first, li lasci impilati e aggiungi Flexbox solo quando lo schermo è grande.
Progressive enhancement: le regole base funzionano per tutti. Le media query aggiungono complessità solo quando lo spazio lo consente, invece di dover annullare continuamente scelte pensate per desktop.

Nelle prossime lezioni vedremo lo strumento tecnico che rende pratico questo approccio: le Media Query. Prima, però, serve un tag HTML fondamentale per controllare correttamente il viewport sui dispositivi mobili.