Cell. +39 3479684755
Il Blog di Instant Websites
What goes up, must come down ovvero: riposizionare gli elementi
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?
L’uso della dichiarazione display:none; nel design reattivo
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:
- la tecnica Mobile-First: disegnare la struttura di pagina per i dispositivi mobili, poi svilupparla per le viewport di dimensioni maggiori;
- 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.
Rendere reattivo un sito esistente – 2
In un precedente articolo (questo: https://lnx.instantwebsites.it/iwblog/?p=1585) abbiamo visto i presupposti per rendere reattivo un sito sviluppato prima dell’avvento di HTML5/CSS3.
Elenchiamo ora i passi fondamentali per realizzare questo risultato, sia pure in forma molto sintetica e non esaustiva.
Codice HTML
Cominciamo dalle pagine, cioè dai relativi file in formato HTML:
- cambiare il DTD da XHTML 1.0 Transitional/Strict a HTML5.
La linea di codice che deve aprire la pagina è semplicissima:
<!doctype html> - inserire il metatag viewport per istruire i dispositivi mobili a considerare la loro effettiva risoluzione della viewport invece di zoomare la pagina:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable = no” - prima di associare il foglio o i fogli di stile, prevedere il caricamento della libreria html5shim (o html5shiv) per i browser non compatibili con l’ultima versione di HTML.
Per fare questo, si impiega un commento condizionale destinato alle versioni di Internet Explorer 8 e precedenti:
<!–[if lt IE 9]>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js” type=”text/javascript”></script>
<![endif]–>
Si noti che in questo caso la libreria viene caricata dal CDN (Content Delivery Network) googlecode.com ma è anche possibile scaricare il file dalla stessa fonte e caricarlo in locale. - migliorare la semantica del codice di pagina, inserendo quantomeno i tag più tipici di HTML5 tra i quali, in particolare: <header>, <nav>, <section>, <article>, <aside>, <footer>.
Per evitare di dovere cambiare i nomi dei selettori nel foglio di stile è possibile usare questi tag abbinandoli ad un id o una classe, se ad esempio originariamente avevamo:
<div id=”menu”> … </div>
possiamo procedere nel modo seguente:
<nav id=”menu”> … </div> - fare attenzione agli stili “in linea”, cioè alle dichiarazioni delle proprietà di taluni elementi direttamente nel codice HTML, come ad esempio nella linea:
<img style=”margin-top:40px; float:right;” src=”…” alt=”…” />
E’ possibile infatti che quanto impostato in tale modo generi un risultato sgradito una volta che la pagina viene visualizzata su un dispositivo mobile.
Dopo avere eseguito queste operazioni, è consigliabile effettuare una prima “convalida” del codice, cioè verificare la sua corrispondenza alle raccomandazioni del W3C per il DTD scelto.
Se la pagina è online si può utilizzare il servizio del W3C stesso a questo indirizzo: http://validator.w3.org/
Passiamo ora alle modifiche ed aggiunte nel foglio di stile.