Come progettare un layout web responsive con le media queries?
Dopo le prime due lezioni introduttive sul Responsive Web Design, oggi ci addentreremo nel codice CSS attraverso le nuove istruzioni messe a disposizione nella terza versione dei fogli di stile. In particolare vedremo come realizzare un semplice layout responsive utilizzando le media queries.
Media queries: che cosa sono?
Tra le novità del CSS 3 troviamo le media queries, istruzioni il cui compito è rilevare il “media” usato (es. schermo, stampante) insieme ad altre caratteristiche (risoluzione, orientamento dello schermo) e applicare gli id e le classi definite per quel “media” specifico.
In realtà, le media queries sono una vecchia conoscenza dell’HTML. Hai presente le successive istruzioni?
<link rel="stylesheet" type="text/css" media="screen" href="screen.css"> <link rel="stylesheet" type="text/css" media="print" href="print.css">
Sono le istruzioni che inseriamo nel codice per collegare il foglio di stile alla pagina HTML. All’interno delle due stringhe di esempio c’è l’attributo media. Il primo, screen, comunica al browser di usare il foglio di stile screen.css qualora il supporto di visualizzazione dovesse essere uno schermo. Il secondo, print, comunica al browser di scegliere print.css se l’utente desiderasse stampare la pagina.
In ambito HTML era stato implementato anche il media=”handheld”, da utilizzare per i piccoli dispositivi mobili o per i dispositivi la cui connessione era molto lenta. Tale selezione però risulta vaga poiché non definisce chiaramente le tipologie di dispositivi. Inoltre era stato concepito nel periodo antecedente la nascita di smartphone e tablet.
Questo meccanismo di selezione quindi è stato migliorato, reso più completo e integrato nella versione 3 del CSS.
Vediamone un esempio:
@media only screen and (min-width: 768px) and (max-width: 959px) {
.box {
color:#9d9d9d;
font-size:12px;
line-height:18px;
margin: 0 auto;
padding: 0;
position: relative;
width: 960px;
}
}
La prima riga dichiara al browser di utilizzare le caratteristiche della classe .box solo se il supporto di visualizzazione dovesse essere uno schermo con risoluzione minima di 768px e massima di 959px.
Come è strutturata una regola @media?
Ora però sezioniamola per comprenderne tutte le parti e in che modo adattarla alle esigenze progettuali.
@media: questa prima parte è obbligatoria, va sempre inserita se si desidera suddividere il CSS in base ai dispositivi selezionati.
Successivo a @media troviamo il tipo di supporto only screen: in questo caso ci si riferisce solo agli schermi; è possibile però anche usare usare anche le seguenti opzioni (tra le principali):
- all: tutti i dispositivi (quindi @media all …);
- print: seleziona solo le stampanti (quindi @media print …);
- tv: seleziona solo le TV (quindi @media tv …).
Infine aggiungiamo le condizioni (min-width: 768px) and (max-width: 959px) che selezionano alcune caratteristiche richieste al supporto per eseguire le regole del CSS. min-width e max-width definiscono la lunghezza minima e massima del display, ma sono solo due delle tante possibili condizioni. Infatti possiamo definire:
- la larghezza minima e massima del display, con min-width e max-width;
- la larghezza e l’altezza fissa dell’intero schermo del dispositivo, con device-width e device-height (esempio completo @media screen and (device-width: 768px) and (device-height: 1024px);
- l’orientamento del display, con orientation:landscape e orientation:portrait (esempio completo @media all and (orientation:landscape);
- il rapporto larghezza/altezza del display, con device-aspect-ratio (ad esempio per l’iPhone 4 si userebbe la regola @media only screen and (device-aspect-ratio: 3/2);
- la densità dei pixel del display, con -webkit-min-device-pixel-ratio (ad esempio completo i recenti display Retina di Apple potrebbero sfruttare una regola come: @media all and (-webkit-min-device-pixel-ratio: 2);
Come puoi notare la categorizzazione dei dispositivi è molto semplice da capire e anche da scrivere. Il resto del codice altro non è che del semplice CSS che ormai, si presuppone, abbiamo perfettamente assimilato.
E’ possibile però separare il codice CSS in più file e richiamarli direttamente nell’HTML sfruttando sempre l’attributo media:
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />
Di questa possibile soluzione, però, ne parleremo in maniera più dettagliata nella prossima lezione.
Il nostro primo layout Web Responsive
Chiarito il concetto delle media queries e di come scriverle, ora possiamo provare ad applicare quanto imparato fino ad ora su un progetto reale.
A tale scopo ho creato un tema Web Responsive graficamente molto semplice ma didatticamente utile a capire il funzionamento delle media queries e il comportamento del layout al variare della risoluzione dello schermo con il quale viene visualizzata la pagina. Vediamoli insieme:
Smartphone: breakpoints 321px – 480px
Tablet: breakpoints 481px – 768px
Desktop: breakpoints > 1025px
Analisi dei tre layout: selezione degli elementi in comune
Dopo la realizzazione delle bozze grafiche e prima di metterci a scrivere il codice CSS, occorre analizzare le tre bozze e selezionare gli elementi in comune. Nella prima parte del codice di stile dobbiamo scrivere gli id e le classi di tali elementi.
Individuiamo, nel caso specifico di queste bozze:
- il background della pagina, del footer e della barra di navigazione
- il logo
- il font
- i colori dei caratteri
- le linee di separazione dei contenuti
- la lista numerata dei servizi e la semplice lista delle news
- il testo del footer
Codice
Il codice da scrivere per questi elementi in comune è il solito cui siamo abituati. Eccone un estratto:
body {
background-color:#E3E1E1;
color:#303030;
font-family:Helvetica, Arial, sans-serif;
font-size:0.9em;
}
h1, h2, h3 {
color:#408095;
font-family:'BebasNeueRegular', Arial, sans-serif;
margin-bottom:5px;
text-transform:uppercase;
}
h1 {
font-size:1.8em;
}
h2 {
font-size:1.5em;
}
h3 {
font-size:1.1em;
}
a {
color:#303030;
text-decoration:none;
}
p {
line-height:1.4em;
}
#main ul.servizi li, #main ul.news li, p {
text-align:justify;
}
/*altre istruzioni*/
#header, #main, #footer {
width:100%;
}
#header, #main {
background-color:#EDEDED;
}
#header {
padding-top:20px;
}
#logo {
text-align:center;
}
ul#nav {
background-color:#408095;
color:#FFF;
list-style:none;
overflow:hidden;
padding:10px;
text-align:center;
}
ul#nav a {
color:#FFF;
font-size:0.9em;
text-transform:uppercase;
}
ul#nav li {
float:left;
}
#main {
padding:20px 0;
}
#slider {
background-image:url(images/slide.jpg);
background-size:contain;
margin-bottom:20px;
}
#main .box p {
font-size:0.8em;
}
#main ul.servizi li {
list-style:decimal;
list-style-position:inside;
margin-bottom:20px;
}
#main ul.news li {
font-size:0.9em;
line-height:1.3em;
margin-bottom:20px;
}
#footer {
padding-top:30px;
text-align:center;
}
#footer #copy, #footer #sitemap {
padding:10px 0 20px;
}
Fin qui nulla di nuovo: sono stati applicati alcuni stili di base per la formattazione e la gestione dei colori.
Analisi dei tre layout: selezione degli elementi che differiscono
Agli elementi in comune, si affiancano invece quelli che differiscono, come per esempio:
- le dimensioni e la disposizione dei contenitori (i div)
- la disposizione della barra di navigazione
- l’immagine sotto la barra di navigazione
Tali differenze devono essere separate per layout e scritte separatamente all’interno delle media queries.
Codice per smartphone 321 – 480 px
@media only screen and (min-width: 321px) and (max-width: 480px) {
.inner {
width:301px;
}
ul#nav li {
padding:4px 0;
width:100%;
}
#slider {
height:99px;
width:301px;
}
#main .box {
margin-bottom:10px;
}
img.aboutus {
margin-bottom:10px;
}
}
Codice per Tablet 481 – 768 px
@media only screen and (min-width: 481px) and (max-width: 768px) {
.inner {
width:461px;
}
ul#nav li {
width:25%;
}
#main .box {
margin-bottom:10px;
}
img.aboutus {
float:left;
margin-right:20px;
}
#slider {
height:152px;
width:461px;
}
}
Codice per PC Desktop min. 1025 px
@media only screen and (min-width: 1025px) {
.inner {
width:924px;
}
ul#nav li {
width:25%;
}
#main .box {
float:left;
padding:0 1%;
width:23.5%;
}
#content {
float:left;
width:74.5%;
}
img.aboutus {
float:left;
margin-right:20px;
}
#sidebar {
float:right;
width:23.5%;
}
#slider {
height:305px;
width:924px;
}
}
Analizzando il codice all’interno delle media queries, puoi notare che gli id e le classi sono uguali ma cambiano le loro caratteristiche. Per esempio, prendiamo l’id content e l’id sidebar. Nella versione Desktop prendono posto rispettivamente a sinistra e a destra, attraverso il valore float. Tale valore è stata tralasciato nella versione Smartphone e Tablet. In questo modo il browser visualizzerà i contenuti nello stesso ordine in cui sono stati scritti in HTML.
Estratto HTML:
</pre> <div id="header"> <div class="inner"><!--logo--> <!--barra di navigazione--></div> </div> <div id="main"> <div class="inner"> <div id="slider"></div> <div class="box alpha"><!--box 1--></div> <div class="box"><!--box 2--></div> <div class="box"><!--box 3--></div> <div class="box omega"><!--box 4--></div> <div class="clear"></div> <div class="line"></div> <div id="content"> <h1>About us</h1> <img class="aboutus" src="images/aboutus.jpg" alt="" width="301" height="201" /> Lorem ipsum dolor sit amet, ... <div class="clear"></div> <div class="line"></div> <h1>Servizi</h1> <ul class="servizi"> <li>Lista servizi</li> </ul> </div> <!--content--> <div id="sidebar"> <h2>News</h2> <ul class="news"> <li><strong>ott 2012.</strong> Lorem ipsum ...</li> <li><strong>set 2012.</strong> Lorem ipsum ...</li> <li><strong>ago 2012.</strong> Lorem ipsum ...</li> <li><strong>lug 2012.</strong> Lorem ipsum ...</li> </ul> </div> </div> <div class="clear"></div> </div> <div id="footer">contentuo del footer</div> <pre>
Il codice HTML è uguale per tutte le versioni, mentre il CSS svolge pienamente il proprio ruolo separando la visualizzazione grafica dai contenuti disponendoli come si vuole.
Se prima del Responsive Web Design, tale separazione apparentemente era meno evidente, oggi con il CSS3 e i Media Queries il foglio di stile mostra davvero le proprie potenzialità.
Conclusioni
In questa terza parte abbiamo visto come le Media Queries agiscono nella visualizzazione dei contenuti al variare della dimensione dello schermo. Purtroppo la loro compatibilità è riservata ai browser più recenti. C’è un modo, quindi, per rendere compatibile il codice anche con le vecchie versioni di Internet Explorer? Lo vedremo insieme nella quarta lezione.
Indice della guida
- Introduzione: come nasce il Responsive Design, accenno ai linguaggi di programmazione usati
- Analisi dei dispositivi, studio del layout e gestione dei contenuti
- I CSS3 media queries
- Gestione del layout, tipografia ed elementi multimediali
- Compatibilità e testing
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
38 commenti
Trackback e pingback
-
Responsive Design: Lo studio del layout e la gestione dei contenuti | Your Inspiration Web
[...] I CSS3 media queries [...] -
Responsive Design: come e perchè progettare siti responsive? | Your Inspiration Web
[...] I CSS3 media queries [...] -
Responsive design: come gestire layout, tipografia ed elementi multimediali? | Your Inspiration Web
[...] precedente lezione, abbiamo realizzato una pagina responsive attraverso la quale abbiamo analizzato il layout e le [...]
Come sempre un lavoro esemplare, molto chiaro e sintetico al punto giusto.
Per chi è gia in questo mondo da tempo risulta di facile comprensione e poi con i tutorial è tutto più semplice.
Grazie, alla prossima.
Grazie a te.
Di sicuro oggi l’automatismo, la velocità e i tempi ristretti che mi si impongono lasciano poco spazio alla personalizzazione e all’adattamento perfetto e chiedersi se si può fare meglio, le aziende si accontenta del risultato cercando di risparmiare tempo e denaro. Ma sicuramente per crescere e coltivare una figura professionale come la nostra, leggere ed imparare, magari approfondire, con articoli come questo rende la propria attività più intrigante e rendendoci sempre più sicuri di quello che si fa quando ci si mette al lavoro. Quindi grazie per il tuo lavoro.
Ah, questo è un signor articolo.
Tra l’altro non conoscevo l’uso della doppia parentesi graffa nei css.
In alternativa si può decidere di richiamare direttamente nella pagina html i diversi layout o non conviene/non si può?
grazie
Faccio solo un appunto:
in questa linea: “la larghezza minima e massima del display, con min-height e max-height;” se è larghezza non dovrebbe essere width? o se è height sarà altezza min e max. O forse ho capito male?
Lettura attenta. Grazie per la segnalazione. L’errore è stato corretto.
Nel prossimo articolo vedremo anche la seconda alternativa, cioè richiamare i diversi css e ne spiegherò i vantaggi.
Avevo notato anch’io l’errore di battitura ma mi sono dimenticato di farlo presente.
Roba di dettagli trascurabili comunque…
Trascurabile sì, ma meglio non farli! :-) Grazie…
Giusto una domanda:
essendo HTML5 non dovrebbe avere codici tipo … anzichè … ?
mi ha cancellato il codice.
riscrivo :)
essendo HTML5 non dovrebbe avere codici tipo anzichè
niente, continua a cancellarmi i codici :((((
ci riprovo…
essendo HTML5 non dovrebbe avere codici tipo h e a d er anzichè d i v i d =”h e a d e r”
L’esempio non è basato sull’html5, vedi il doctype del sorgente. Le media queries riguardano i css3, non sono un esclusiva dell’html5.
Ciao Igor, direi di no in quanto il CSS3 è distinto dall’HTML5. Si possono utilizzare unitamente, ma anche separatamente. Il CSS3 e l’HTML5 sono due linguaggi separati, supportati differentemente dai vari browser. Per cui il CSS3 si può utilizzare tranquillamente anche con l’HTML4 o con l’XHTML 1.0.
Scusate, ma inizio a fare un po’ di confusione allora: il web cosiddetto responsive non lo si fa con l’html5? cioè, io posso fare un sito in html 4 normalissimo come ho creato fin ora e applicare il css3 che lo rende responsive?
Nessuna confunsione, tranquillo. Il W.R. lo si fa con CSS3 e/o con jQuery.
“Dopo le prime due lezioni……metterci un link no?
vabbè le vado a cercare…
Ciaoo!
Davide, ottimo articolo!
Volevo sollevare un quesito però…la doppia condizione “min-width and max width” funziona anche se applicata al tag link nell’HTML?
Perchè facendo qualche prova, suddividendo i CSS per le versioni mobile/tablet mi è parso di capire che nel tag link non segue la doppia condizione…
Ottima osservazione, Alessandro. Nel tag link non è possibile inserire una doppia condizione. Se vai su http://www.w3.org/TR/css3-mediaqueries/ trovi tutte le possibili combinazioni.
Complimenti per l’articolo esaustivo e chiaro.
In questi giorni ho adotatto un layout responsive su http://www.trentinotravel.com e se c’è una cosa che posso affermare con sicurezza è che il tasso di abbandono di utenti con dispositivi tablet è da subito diminuito.
Si può finalmente abbandonare l’approccio dello sviluppo di una versione mobile del sito, ridondanza a lungo andare costosa per il mantenimento.
Finalmente una guida in italiano e di facile comprensione anche per chi da poco si avvicina a questo mondo. Grazie mille! spero di riuscirci …..altrimenti mi licenziano ahahahahahahahahaha!
Spero di no (che non ti licenzino solo per questo)! Buon lavoro.
Grazie per l’articolo, chiaro e utilissimo!!!! XD
Grazie a te per il feedback!
Bell’articolo complimenti. Ti volevo segnalare un ulteriore tecnica per il responsive web design basata su una libreria javascript chiamata responsive.js che ho realizzato recentemente. Il concetto alla base è il rendering dinamico lato client di regole css/media query definite direttamente con js. Si tratta quindi non di una emulazione con callback ma di design ottenuti con css nativo. Il vantaggio di una definizione dinamica è il poter definire gli stili dipendenti dal contesto dinamico quale ad esempio la variabile width del device/browser in uso. Inoltre sono a disposizione altre utili funzioni quale interpolazione lineare, templating css, eventi js etc. Questo approccio ha anche il vantaggio di semplificare la gestione del layout aumentando i punti di breakpoint da tenere in considerazione e permettendo in modo molto facile il riutilizzo degli stili. Per chi fosse interessato può trovare la libreria open source e la documentazione a http://www.responsivejs.com . Mi piacerebbe avere un tuo parere in merito a questa soluzione. Grazie
Ciao!
Grazie per l’articolo. Utilissimo!
Grazie!
Complimenti per l’articolo.
Torno sull’argomento per chiedere come cambiano i breakpoints e le media queries in relazione ai nuovi display fullhd anche su mobile.
Mi sembra di capire che creare una versione ottimizzata per smartphone con un breakpoint basato esclusivamente sulla risoluzione non basti. Come si può integrare l’informazione della dimensione del display? Con i DPI? Si riesce?
Grazie in anticipo.
Ciao ragazzi! io ho creato un framework che praticamente permette di creare facilmente la base per un sito responsive (il tutto è basato su Foundation ma si ha anche la possibilità di convertirlo per Bootstrap, sono entrambi altri framework),. Permette di salvare i vostri progetti utilizzando il localStorage o se volete potete esportare il vostro progetto e reimportarlo in un secondo momento! l’ho fatto in inglese.. forse ci saranno un po’ di errori di inglese ma la sua funziona la svolge ;).. ecco il link: http://www.responsivetemplater.altervista.org/
Ciao !
complimenti per l’articolo, chiarissimo!
Ma ho una domanda : come si può riconoscere lo user-agent utilizzato e creare siti web responsive in base a questo parametro ?
Mi riferisco a quei siti che su desktop, anche se ridimensioni la pagina, non si adattano, ma che poi visti su smartphone invece cambiano aspetto adattandosi.
La domanda è nata dalla spunta ‘Richiedi sito desktop’ presente sugli smartphone Android, imamgino siano discorsi correlati o sbaglio ?
Ciao! complimenti per l’articolo, molto chiaro.
Ma ho una domanda: se io volessi creare un sito web responsive basandomi sullo user agent e browser utilizzato dal dispositivo, come dovrei muovermi? Librerie consigliate?
Mi riferisco a quei siti web che su dektop, anche ridimensionando la finestra, non si adattano, ma se visualizzo da smartphone invece si.
Credo sia correlato all’opzione ‘Richiedi sito desktop’ presente sui cellulari Android, o sbaglio ?
Grazie e complimenti ancora!
Ciao, non so se puoi aiutarmi, ma ho un problema con la visualizzazione di un sito sui telefonini. Ho letto l’articolo, ma non essendo un esperto di codice, non riesco ad adattarlo. Se posto il link puoi darmi una mano?
Ti ringrazio in anticipo.
Bell articolo, inoltre anchio mi creo dei bei div con la classe per interrompere i float (i tuoi clear i miei cancflo) ed anchio adoro il bebasneue come font ;)
Ciao!
Ciao e complimenti per il lavoro e l’articolo, forse mi sono perso io un passaggio ma a quanto ho potuto vedere su smartphone il tutto è poi vanificato in assenza del meta:
che indica al documento di adattare le misure in base al viewport del device altrimenti i 320px vengono ricalcolati in proporzione e avresti un wrapper ,o inner come lo chiami tu, piccolino messo a sinistra del layout con un ampia zona vuota a destra.
Un saluto e ancora complimenti
Silvio
il meta era
Silvio
”
Ciao Davide, vedo che la pagina ha qualche anno, spero tu veda il commento.
Domanda: le mediaQ devono avere un ordine?
Ho una domanda, non c’è un modo per creare un @media device che parte da 320px fino a 1025 in automatico? In questo modo il sito si adatterà a qualsiasi monitor che c’è e che verrà inventato.