Quando nell’ambito dei nostri corsi di web design devo spiegare il concetto di responsive design, sintetizzo solitamente in questo modo:
Il termine “responsive design” indica le tecniche di sviluppo delle pagine web che ne permettono l’ottimizzazione per il tipo di dispositivo sul quale un sito viene visualizzato, con particolare riferimento ai dispositivi mobili, tramite il ridimensionamento ed il riposizionamento dei contenuti
Per quanto riguarda il primo aspetto, cioè il ridimensionamento, si sono già viste in precedenti articoli le tecniche di base da applicare ai box contenitori ed ai principali contenuti (con particolare riferimento alle immagini) tramite le media query che subordinano l’applicazione di determinate regole CSS alla dimensione effettiva della viewport del dispositivo.
Relativamente al riposizionamento, invece, la pratica indica che nella maggior parte dei casi la natura di “elementi a livello di blocco” dei contenitori di pagina è sufficiente a fare sì che si dispongano uno sopra l’altro nella pagina occupando lo spazio orizzontale disponibile; tutt’al più, può essere necessario rimuovere la proprietà float per evitare che si affianchino (si rilegga questo articolo a proposito dell’uso della proprietà display: table-cell; piuttosto che della proprietà float per costruire un layout a 2 o più colonne).
In determinate circostanze, tuttavia, può essere necessario modificare questo comportamento.
Prendiamo a titolo di esempio il caso di un layout a 2 colonne, in cui la sidebar a sinistra è utilizzata per un sottomenu di pagine.
Normalmente, nel layout reattivo, questo box si posizionerebbe al di sopra di quello principale, dal momento che nel codice di pagina è inserito prima.
Ecco un semplicissimo esempio che mostra questo comportamento in un contenitore a larghezza fissa di 960px.
E’ sufficiente ridimensionare la finestra del browser per vedere come gli elementi si ridimensionano e redispongono.
Il punto è: come fare in modo che si posizioni invece al di sotto?
1) DISPORRE LE COLONNE IN ORDINE INVERSO NEL CODICE
Nell’esempio modificato, la sidebar si posiziona ancora a sinistra grazie alla dichiarazione float:left; mentre la seconda colonna è posizionata con float:right, a differenza del precedente esempio.
Nel codice HTML la loro posizione è invertita quindi, quando la viewport scende sotto 960px e la proprietà float viene annullata, la sidebar si colloca al di sotto.
Visualizza lo stesso esempio modificato cliccando qui.
2) RICORRERE A JAVASCRIPT
Quanto mostrato sopra è facilmente implementabile grazie alla tecnica usata per costruire il layout a 2 colonne (la proprietà float).
Supponiamo che sia invece stata usata la tecnica basata sull’uso della proprietà display:table-cell; ecco il relativo esempio in cui, quando la viewport scende sotto i 960px, le colonne si dispongono una sopra l’altra tramite le dichiarazioni display:block; al posto di display:table-cell; applicate ad entrambe.
Per disporle in posizione invertita, cioè al di sopra la colonna principale e al di sotto la sidebar, è possibile fare ricorso al seguente script (jQuery):
<script src=”jquery.js”></script>
<script>
jQuery(document).ready(function($)
{
if ($(window).width() >= 960)
{jQuery(‘div#colonna1’).insertBefore(‘div#colonna2’);}
if ($(window).width() < 960)
{jQuery(‘div#colonna1’).insertAfter(‘div#colonna2’);}
$(window).resize(function()
{
if ($(window).width() >= 960)
{jQuery(‘div#colonna1’).insertBefore(‘div#colonna2’);}
if ($(window).width() < 960)
{jQuery(‘div#colonna1’).insertAfter(‘div#colonna2’);}
});
});
</script>
Quindi, quando la viewport è uguale o superiore della dimensione indicata dal breakpoint (960px), la sidebar identificata con #colonna1 si posiziona prima della colonna più larga identificata con #colonna2; quando la viewport scende sotto la dimensione indicata dal breakpoint, si sposta sotto.
Ciò accade sia quando la finestra del browser viene aperta:
jQuery(document).ready(function($) …
sia quando la finestra viene ridimensionata:
$(window).resize(function() …
Per vedere il relativo esempio, cliccare qui.