Quando nei nostri corsi introduciamo i principi di base del design reattivo (o adattivo), spieghiamo che si tratta di un tipo di design con relativo sviluppo del codice, che consente di ridisporre gli elementi della struttura di pagina ed i rispettivi contenuti in funzione della viewport del dispositivo su cui il sito viene visualizzato (in parole più semplici e con una certa dose di imprecisione: in funzione dello spazio disponibile).

Questa affermazione costituisce una valida approssimazione di partenza ma è incompleta.

Innanzitutto occorre considerare che esistono due possibili approcci:

1. la tecnica Mobile-First: disegnare la struttura di pagina per i dispositivi mobili, poi svilupparla per le viewport di dimensioni maggiori;
2. la tecnica opposta, ovverosia disegnare per una viewport corrispondente ad uno schermo da tavolo, poi aggiungere le regole (media query) per i dispositivi mobili.

I sostenitori di 1) motivano la loro scelta con la diffusione capillare dei dispositivi mobili al punto che questi vengono usati più dei tradizionali PC da tavolo per navigare Internet.

Chi preferisce la soluzione 2), invece, si basa più che altro su un presupposto di tipo logico: fino a poco tempo fa non esistevano le media query quindi si creavano i layout a dimensione fissa o variabile ma comunque partendo da una certa risoluzione orizzontale “ottimale” dello schermo, per cui è normale partire comunque da tale riferimento e poi considerare le viewport minori (tablet e smartphone) introducendo un certo numero di breakpoint.

Occorre anche aggiungere che è possibile aggiornare i siti esistenti – purché non troppo vecchi – modificandone il DTD in HTML5 ed aggiungendo le media query in modo tale che divengano reattivi. In questo tipo di interventi si procede per forza di cose secondo la tecnica 2).

A prescindere dalla prassi individuale, è possibile integrare la definizione di partenza aggiungendo che: nel design reattivo, è possibile prevedere che alcuni contenuti di pagina vengano visualizzati o meno in funzione della viewport del dispositivo.

Non solo, quindi, riposizionare gli stessi elementi bensì mostrarne di aggiuntivi ovvero nasconderne alcuni in base allo spazio.

Una tecnica molto semplice che consente di ottenere questo risultato, è quella di impiegare la dichiarazione: display:none; all’elemento che si vuole nascondere in corrispondenza di una certa risoluzione video.

Continua a leggere→