Il concetto di “Responsive web design”: Progettare un sito web per diverse risoluzioni con media queries

Oggi ti voglio parlare del concetto di responsive web design, di come applicarlo e a cosa può servire nello sviluppo di un sito web.
La parola Responsive in italiano significa reattivo o “di risposta”, unito al web design indica un sito web che adatta il suo aspetto, tramite CSS, in base ad alcuni parametri che bisogna impostare.

Il concetto di Responsive web design viene associato, come indicato dal coniatore di questo termine Etan Marcotte, all’uso delle Media Queries CSS, questa regola permette di modificare l’aspetto di una pagina web in base ad alcuni parametri logici che, se soddisfatti, faranno entrare in gioco regole CSS che modificheranno di conseguenza il layout.

Demo

Utilizzare le regole Media Queries in un sito web può avere diversi scopi, quando si parla di Responsive web design si parla di adattare l’aspetto di un sito web in base alla dimensione del browser con il quale si naviga, quindi in parte questo metodo è molto simile al layout fluido o elastico.

La sintassi

Per utilizzare le Media Queries si possono usare diversi tipi di sintassi e di incorporazione che produrranno tutti lo stesso risulato, ma alcuni saranno più vantaggiosi di altri:

1. Link al foglio di stile: Se decidi usare diversi fogli di stile separati e richiamarli uno ad uno puoi farlo tra i tag head della pagina HTML:

<link rel="stylesheet" media="tipologia and (proprietà:valore)" href="media-queries.css" />

2. Importarlo: Anche questa opzione è pensata per collegare diversi fogli di stili, non attraverso la pagina HTML come sopra, ma attraverso un foglio di stile con il comando @import:

@import url(media-queries.css) tipologia and (proprietà:valore);

3. Nel Foglio di stile principale: Questo è il metodo migliore, ti consente di creare regole direttamente dentro il foglio di stile principale, come il classico style.css.

@media tipologia (proprietà:valore) { ...Regole CSS che entreranno 
in gioco quando le condizioni proprietà e valore 
saranno soddisfatte... }

In questa maniera potrai creare dei piccoli fogli di stile dentro quello principale con il vantaggio di tenere tutte le regole CSS facilmente accessibili e modificabili.

Esempio pratico

@media screen and (max-width:960px) { 
 
body { background:red; }
 
}

Il codice sopra si può leggere in questo modo:
Quando la finestra del browser di un computer (screen) si rimpicciolirà sotto 960 px di larghezza allora entrerà in gioco la regola @media che applicherà la proprietà CSS background:red al tag body, da qui si capisce molto bene cosa si intende per web design di risposta o responsive.
Per vedere alcuni siti che utilizzano il metodo illustrato sopra per ridimensionare il proprio layout ti consiglio di visitare il sito mediaqueri.es

Differenze con il layout fluido ed elastico

Con Media Queries puoi progettare e prevedere al 100% l’aspetto del sito web rispetto alle grandezze del browser e dispositivi di navigazione, andando a interagire e a ridimensionare il foglio di stile di partenza, al contrario, usando dimensioni in percentuali come per il layout fluido non hai questa possiblità e diventa più problematico individuare e risolvere eventuali errori di visualizzazione come elementi che slittano l’uno sull’altro, proporzioni che diventano sbagliate, margini errati etc. .

Progettazione di siti web per mobile

Spesso la regola @media viene associata alla progettazione di pagine web per mobile o tablet, questo perchè effettivamente grazie a questa tecnica è possibile creare ANCHE MA NON SOLO fogli di stile che entreranno in gioco durante la navigazione con dispositivi come IPad e IPhone, vediamo come:

@media all and (max-device-width:960px) { 
 
body {background:red;}
 
}

Aggiungendo il termine device tra i prefissi max o min e width tutte le proprietà CSS non entrano più in gioco mentre si navigherà con un browser da PC ma piuttosto da smartphone o tablet.

Impostare la visualizzazione con IPad in posizione portrait, ovvero verticale.

@media all and (max-device-width: 1024px) and (orientation:portrait) {
... proprietà CSS
}

Impostare la visualizzazione con IPad in posizione landscape, ovvero orizzontale.

@media all and (max-device-width: 1024px) and (orientation:landscape) {
... proprietà CSS
}

Come visto sopra è possibile inserire più condizioni che devono essere soddisfatte per attivare la regola @media, in questo caso max-device-width: 1024px e (orientation:landscape).

Impostare la visualizzazione con IPhone.

@media all and (max-device-width: 480px) and {
... proprietà CSS
}

Media queries e Internet Explorer

Ti ricordo, infine, che @media è una regola CSS che non viene riconosciuta da Internet Explorer 8 e inferiori, per risolvere questo problema puoi usare i commenti condizionali per IE, oppure usare plugin come JQuery Media queries
o ancora integrare la libreria Respond.js

Condividi questo articolo:

• Tweet

Info sull' autore:

Nato a Bologna, mi occupo della realizzazione grafica e dello sviluppo front-end di siti web e sono il fondatore di questo blog. Se vuoi segnalare qualche problema o hai qualche richiesta particolare invia una mail tramite il modulo contatti.
Leggi gli altri articoli di Francesco