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.
Regole CSS
Supponiamo di avere strutturato la pagina sulla base di un layout a dimensione fissa, tipicamente i soliti 960px di larghezza.
Se abbiamo invece realizzato un layout liquido, che occupa una certa percentuale della viewport, è probabile che abbiamo anche imposto delle limitazioni alla escursione nella larghezza del tipo:
#wrapper { width:90%; max-width:1200px; min-width:900px; … }
In entrambi i casi, terremo conto della dimensione minima della viewport che consente di mostrare il layout per intero: 960px nel primo caso e 900px nel secondo.
Conseguentemente le media query prevederanno innanzitutto delle regole per tutte le viewport al di sotto di tale valore:
@media (max-width:959px) { … }
oppure:
@media (max-width:899px) { … }
nei due casi rispettivi.
Altre media query dovranno poi essere previste per le viewport al di sotto delle quali è necessario impostare ulteriori modifiche nella visualizzazione.
Ad esempio, in un sito a 3 colonne, potremo prevedere che si riducano a 2 entro certe risoluzioni di viewport (la terza scivola sotto) e a 1 sola al di sotto di un certo altro valore (nel senso che si dispogono una sopra l’altra).
Quali regole verranno inserite?
- imponiamo una dimensione minima di body, ad esempio 320px o 240px, per evitare che sui dispositivi più piccoli (e meno performanti …) il layout si comprima troppo.
Qualora non già presente ad es. nel contenitore generale del layout, potrà essere opportuno aggiungere un padding a body stesso per fare sì che i contenuti non si appiccichino ai bordi.
Infine eliminiamo qualsiasi immagine di sfondo, tanto non risulterebbe visibile:
body { min-width:240px; padding: 0 5px; background: none; … } - impostiamo su auto la larghezza dei contenitori che originariamente hanno una dimensione prefissata.
Rimuoviamo anche eventuali bordi non più necessari, ad esempio:
#wrapper { width: auto; border: 0 none; … } - se abbiamo un’intestazione a dimensione fissa con un’immagine al suo interno, procediamo come segue:
#intestazione { width: auto; height: auto; }
#intestazione img {max-width: 100%; height: auto; display: block; } - per le colonne create con la proprietà float, si cambia il valore di quest’ultima:
da: #colonna-1 { float: left; } e #colonna-2 { float: right; }
a: #colonna-1, #colonna-2 { float: none; }
In questo modo il comportamento dei due box sarà quello tipico determinato dalla loro natura di elementi a livello di blocco, cioè si disporranno uno sopra l’altro. - per le colonne create con la dichiarazione: display: table-cell; si tratterà invece di cambiare il valore della proprietà display stessa riportandolo al default:
da: #colonna-1, #colonna-2 { display: table-cell; }
a: #colonna-1, #colonna-2 { display: block; }
La posizione in cui i box si posizioneranno dipenderà dall’ordine nel codice di pagina. - per quanto riguarda la dimensione delle immagini, al fine di adattarla alla viewport, useremo la dichiarazione:
img { max-width: 100%; height: auto; }
Nel momento in cui nel codice di pagina sono state specificate le dimensioni dell’immagine stessa, tramite gli attributi width e height, questa non supererà le sue dimensioni reali ma si rimpicciolirà in funzione dello spazio esistente. - le immagini flottanti andranno trasformate in centrate poiché, rimanendo flottanti, renderebbero gli altri contenuti come il testo non fruibili:
.mobileSx { float: left; … }
.mobileDx { float: right; … }
diventeranno:
.mobileSx, .mobile Dx { float: none; display: block; margin: 20px auto; } - se si sono inserite delle tabelle per mostrare dei dati, è possibile adattarne la visualizzazione riducendo progressivamente la dimensione del font man mano che la viewport diventa più piccola.
Dato però che oltre certi limiti la leggibilità sarebbe preclusa, è possibile innanzitutto pensare di semplificare la tabella stessa escludendo la visibilità di alcune colonne, alle quali saranno state assegnate delle classi a tale scopo, con la dichiarazione display:none; (a condizione che i dati esplicitati mantengano un minimo di validità, ovviamente!).
Alternativamente si può ipotizzare di nascondere del tutto la tabella e sostituirla magari con un file pdf o con un avviso di visualizzare il sito su uno schermo di maggiori dimensioni. Anche in questo caso inseriremo entrambi i contenuti nel codice di pagina, nascondendo l’uno o l’altro a seconda della viewport; ad esempio avremo nella pagina HTML:
…
<table id=”componenti”>…</table>
<div id=”avviso”><p>Attenzione, per visualizzare la tabella dei componenti occorre aprire questa pagina su un computer dotato di monitor avente risoluzione maggiore</p></div>
…
e nel foglio di stile:
#avviso { display: none; } /* l’avviso è normalmente nascosto */
…
@media (max-width:479px) {
/* viene nascosta la tabella e mostrato l’avviso quando la viewport scende sotto una certa soglia */
table#componenti { display: none; }
#avviso { display: inline; }
…
} - per il corretto dimensionamento dei video, può essere utile adottare una soluzione basata su jQuery come quella illustrata in questo articolo: https://lnx.instantwebsites.it/iwblog/?p=1546
e per concludere …
Può capitare che talune regole specificate nelle media query non funzionino, a causa della presenza di stili in linea (già citati sopra) e/o dell’azione a cascata di altre regole.
In questi casi si può ricorrere alla direttiva !important per assegnare priorità a tale regola, ad esempio:
#box { margin:0!important; … }
I tutorial pubblicati in questo blog sono usati nell’ambito dei corsi di web design organizzati da INSTANT WEBSITES a Vigevano (Pavia).
Puoi leggere tutti idettagli sui corsi stessi in queste pagine:
http://www.instantwebsites.it/corsi.html
http://www.corsidiwebdesignavigevano.it/corsi-di-web-design.php