I siti web di nuova generazione devono essere responsivi, le ragioni sono tante e disparate ma per il momento vediamone due: sono tantissime le persone che navigano da mobile o tablet (e perdere un bacino di utenza così alto sarebbe un vero peccato), Google apprezza i siti responsivi e li posiziona più in alto rispetto agli altri.

Per creare una pagina web dal design responsivo bisogna avere conoscenze tecniche specifiche ed in particolare ci sono 3 regole da conoscere e da applicare.

I cardini del design responsivo

1. Media Queries

Possiamo definirle istruzioni che hanno il compito di rivelare quale media viene usato dall’utente (ad esempio lo schermo) e, in base a questo, mostreranno ed applicheranno id e classi definite proprio per quel media specifico. In altre parole: grazie alle media queries il web developer ha la possibilità di mostrare il proprio sito in maniera differente a seconda del dispositivo utilizzato dall’utente.

Per fare tutto questo è possibile sfruttare le regole media queries ed ottenere il risultato inserendo una sola riga di codice aggiuntiva.

È fondamentale conoscere le regole ed utilizzarle il più possibile.

2. Griglie Fluide

Hanno il compito di modificare il design di una pagina web in base allo spazio disponibile, servono quindi ad eliminare i problemi che il layout fisso porta con sé. La differenza più evidente rispetto al layout fisso consiste nell’unità di misura: viene espressa non in pixel ma in percentuale. Se sei alle prime armi e desideri realizzare griglie fluide puoi scaricare librerie come Bootstrap.

In alternativa Dreamweaver permette di creare layout a griglie fluide dal menù File, Nuovo, Layout a griglia fluida.

3. Immagini Flessibili

È fondamentale che anche le immagini vengano scalate autonomamente in base alla grandezza del monitor. Come ottenere questo risultato? Ci sono strategie differenti.

È possibile sfruttare la proprietà CSS max-width con valore 100% e altezza auto per fare in modo che l’immagine si adatti al suo contenitore in modo proporzionale e senza perdere qualità.

È possibile anche collegare la dimensione delle immagini alla dimensione del testo.

Ed infine, se l’immagine contiene del testo puoi impostare una dimensione minima ed una dimensione massima per fare in modo che il testo sia sempre leggibile.