004 • Modularità

Nel numero sulla navigazione dicevamo che la modularità può essere comoda per progettare, ma forse vale la pena provare a spiegarla meglio.

Una pagina web non è davvero una pagina, ma un insieme di pezzi indipendenti che vivono assieme.

Questi pezzi – come ad esempio un menu di navigazione, una sezione, una card, una modale, un bottone – servono a costruire una pagina, una schermata. La metafora più usata per descriverli è quella dei mattoncini Lego. Come i Lego, possono essere usati per costruire cose diverse, ma ogni pezzo mantiene la sua identità e può essere riutilizzato.

Nel web (e nel digitale in generale) questo non è solo un principio progettuale, ma anche un principio tecnico. Una pagina è costruita da elementi esterni, indipendenti, file CSS, file JS, immagini, video, font, che vengono assemblati dal browser al momento dell’apertura.

Quando si impagina o progetta qualcosa, che sia un documento Word, un manifesto, una card per Instagram, gli elementi vengono incorporati all’interno del programma. Si lavora a qualcosa che esiste in un singolo file. Una pagina web invece è un assemblaggio di pezzi esterni che prendono forma nel momento in cui il browser li combina, quando la carica.

«We don’t design pages, we design systems» diceva Stephen Hay — autore del libro Responsive Design Workflow — in un intervento del 2012 alla BD Conference di Orlando.

La questione della modularit๠era già emersa nel numero sulla navigazione, dove avevamo citato Manovich, che citiamo pure oggi, riprendendo un altro suo articolo, dal titolo Modularity as an Aesthetic Category:

Invece di considerarla soltanto una caratteristica fondamentale dei media digitali, propongo che la modularità possa essere usata come una categoria estetica generale, utile per analizzare tanto l’arte storica quanto quella contemporanea.

La modularità come un’estetica, un modo di vedere.

Micro esercizio

Visitate uno di questi siti, Creative Boom, Creative Review, It’s Nice That e guardate la struttura, i blocchi. Osservate gli elementi di una card. Potreste fare lo stesso con una qualsiasi delle vostre app sullo smartphone.

Poi fate due prove con ispeziona elemento.

1. Smontate il design. Sulla pagina cliccate il tasto destro del mouse e selezionate Ispeziona. Nel pannello che si apre Elements, cercate la riga in alto con scritto e cancellatela. Vedrete il sito perdere stili, font e parte del funzionamento.

2. Rallentate il tempo. Ricaricate la pagina per tornare alla normalità. Sempre nel pannello Ispeziona, andate nella tab Network. Dove vedete scritto "No throttling" (o Nessuna limitazione), selezionate "Slow 3G". Ora ricaricate nuovamente la pagina: la vedrete arrivare pezzo per pezzo.