Responsive design: media queries – prima parte

Conoscenze necessarie: Buona preparazione su html e css

Richiesti: Editor, browser

Tempo di progettazione: 20 minuti

Con l’inizio delle docenze ho perso la cognizione del tempo e riuscire a concludere un articolo risulta un pochino più complesso! Bando alle ciance… oggi riprendo il discorso sul responsive webdesign affrontando l’argomento delle media queries.

Prefazione

Prima di parlare delle media queries vorrei spendere due parole riguardo a come pensare una struttura che si adatta a varie situazioni.

Molti ancora oggi sviluppano le pagine web utilizzando come unità di misura i pixel per qualsiasi elemento dalla larghezza dei div alla grandezza dei font. Se per le larghezze dei div questo non risulta un problema per i font invece lo è in quanto poniamo l’utente in una situazione molto spiacevole: non permettiamo il ridimensionamento del font qualora l’utente desideri fare lo zoom su una porzione della pagina impedendo quindi di poter adattare quel contenuto ad una dimensione più consona alla lettura.

Ragionare con unità di misura diverse dai pixel sicuramente risulta più complicato e difficile da comprendere per chi non sei mai cimentato. Lavorare su degli elementi che non hanno misure “definite” bensì misure che possono cambiare a seconda del dispositivo, della risoluzione o delle impostazioni del browser dell’utente mette il grafico in condizioni di “instabilità” in quanto non è abituato a lavorare entro certi schemi se così possiamo definirli. Ecco perchè la figura del web designer è fondamentale in questo contesto in quanto sa unire parte tecnica e parte grafica in un unico contesto trovando un equilibrio tra le due “parti”.

Un altro punto su cui farvi riflettere è il design del sito web. Oggi non si può più pensare ad un sito estremamente “pieno” (non che io sia stato mai un amante di questo modo di realizzare siti.) ma bisogna pensarlo lineare, pulito dando il giusto peso alle spaziature del testo, alle spaziature fra i vari elementi e agli “spazi bianchi” quest’ultimi  fondamentali nel responsive design e nei layout moderni. I layout devono essere pensati in modo semplice, puliti così che l’adattabilità sia più facile da poter impostare. Ovviamente per semplicità non si intende che non ci siano animazioni o elementi complessi nella pagina ma che l’insieme di tutti gli elementi non sia confusionario ma ben definito.

Un ultimo punto su cui riflettere è: da dove parto a disegnare? Desktop o Mobile? Il mio consiglio è di partire dal mobile così il layout che si otterrà sarà minimale e incentrato sui contenuti. Poi ci si concentra sulla versione desktop aggiungendo i dettagli che sul mobile non servono o non sono supportati.

Per capire meglio quello che vi sto dicendo non c’è modo migliore che mostrare degli esempi:

Formfett


Inspire Conference


These Are Things

I siti appena elencati sono solo un esempio. Ho scelto questi tre perchè uniscono sia l’aspetto tecnico che il design in modo molto elegante. Basta navigare in rete per scoprire quanti siti ad oggi sono stati creati in questo modo e sicuramente se siete degli utenti che utilizzano spesso con smartphone o tablet apprezzerete l’utilizzo di queste tecniche per rendere più gradevole la navigazione su questi dispositivi.

Risoluzioni dello schermo: breakpoint

Fatte le dovute precisazioni passiamo a cose più concrete. Innanzitutto dobbiamo sapere che in commercio esistono moltissimi dispositivi e quindi si passa da uno schermo di un pc ad uno di uno smartphone oppure di un tablet. Cosa cambia? Ovviamente la dimensione e la risoluzione dello schermo ma non solo: dobbiamo considerare anche la densità dei pixel sui diversi schermi. Quest’ultimo punto lo affronterò meglio in un prossimo articolo così da poter ampliare e definire questo aspetto.

Se pensiamo ai tablet o agli smartphone dobbiamo considerare il fatto che questi device integrano più risoluzioni ovvero una orizzontale definita Landscape e una verticale definita Portrait. Ecco che un solo device può presentare diverse visualizzazioni e quindi il sito deve adattarsi ad entrambi.

Arrivati a questo punto iniziamo a definire cosa sono i breakpoint. Per riuscire a realizzare un layout che si adatti ai vari cambiamenti dobbiamo definire dei punti in cui avviene un cambiamento, in questo caso il cambio di risoluzione dello schermo. I breakpoint sono proprio questi, dei punti che noi definiamo per riuscire a manipolare il comportamento degli elementi che compongono il layout così da mostrarli adattati in quella specifica situazione.

Per definire questi punti ci vengono in aiuto le media queries ovvero delle specifiche definizioni all’interno dei css che ci permettono di fare quanto detto poco fa. Per capire di cosa si tratta non c’è cosa migliore di un esempio. A questo punto prepariamo due file: uno html e uno css

Uso delle media queries: esempi pratici

Una volta creati i due file apriamoli nel nostro editor preferito. Il file html è il primo su cui andremo a lavorare. Per prima cosa copiate il codice seguente all’interno del vostro file:

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" dir="ltr" lang="it-IT"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" dir="ltr" lang="it-IT"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" dir="ltr" lang="it-IT"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html dir="ltr" lang="it-IT"> <!--<![endif]-->
<head>
    <title>Media queries</title>
    <meta name="description" content="Esempio media queries" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
</head>
<body>
    <div id="wrapper">
        <header></header>
        <section>
            <article></article>
        </section>
        <footer></footer>
    </div>
</body>
</html>

Analizzando il codice passo per passo si può notare che ho utilizzato l’html5. Questo perchè permette di creare un documento che rispetti una certa architettura e soprattutto una semantica ben definita che con il vecchio html decisamente non si può ottenere.

La prima parte del codice è dedicata al Doctype. Purtroppo i browser di casa Microsoft sono da sempre un vero problema. In questo specifico caso le versioni di internet explorer precedenti alla 9 non interpretano html5 e di conseguenza il relativo doctype. Grazie all’uso dei commenti condizionali possiamo assegnare diversi doctype a seconda della versione di internet explorer. Inoltre all’elemento html assegniamo una classe che ci permetterà, in un progetto reale, di assegnare stile e proprietà diverse ai vari elementi così da poter visionare il contenuto anche ai browser che non interpreteranno animazioni o particolari impostazioni.

Riporto il pezzo di codice riferito a questa spiegazione:

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" dir="ltr" lang="it-IT"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" dir="ltr" lang="it-IT"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" dir="ltr" lang="it-IT"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html dir="ltr" lang="it-IT"> <!--<![endif]-->

Un altro elemento essenziale è questo:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

Questo particolare metatag, introdotto da Microsoft, permette di specificare il motore di renderizzazione per la pagina che si sta visualizzando. Ecco un elenco dei valori che vengono accettati da questo metatag:

  • IE=5 “Quirks” mode
  • IE=7 ”Standards” mode
  • IE=8 Internet Explorer 8 Standard mode
  • IE=edge Utilizza l’ultimo standard utilizzato da Internet Explorer 8 o dalle future versioni

L’altro valore che troviamo è chrome=1. Questa particolare voce è stata introdotta da quando html5 ha iniziato ad essere utilizzato sempre più frequentemente nei vari progetti. Ma a cosa serve? Qui entra in gioco Google che ha creato un plugin denominato Google Chrome Frame che permette di utilizzare il rendering di chrome nelle versioni di internet explorer dal 6 all’8.

Questo plugin ovviamente deve essere installato dall’utente. Noi possiamo solo, attraverso questo espediente, abilitare le nostre pagine al suo utilizzo.

Sempre nella sezione head troviamo un altro metatag fondamentale:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Questo metatag è molto importante per i dispositivi mobile. Perchè? Avete mai provato ad aprire un sito sul vostro smartphone o tablet? Cosa succede? Se il sito non è stato ottimizzato per la navigazione mobile i browser di questi dispositivi mostrano l’intera pagina web così come l’abbiamo costruita rendendo di fatto illeggibile qualsiasi testo. Il metatag menzionato con il relativo valore content=”width=device-width” permette ai browser mobile di prendere come riferimento non la larghezza della pagina bensì quella della risoluzione del nostro dispositivo. Ecco la descrizione degli altri valori che troviamo in questo metatag:

  • width: Larghezza del viewport espressa in pixels o in “device-width” (larghezza del dispositivo). Se la larghezza non è settata, questo parametro assume il valore della risoluzione che il sito mostra di default sui desktop pc.
  • height: L’altezza del viewport espressa in pixels o in “device-height”. Generalmente questa proprietà non viene impostata.
  • initial-scale: i valori possono andare da da 0 a 10.0. Questi valori permettono di impostare lo zoom della pagina. Normalmente si imposta il valore a 1.0 così da prendere in considerazione la larghezza del dispositivo in scala 1 a 1.
  • minimum-scale: i valori possono andare da da 0 a 10.0. Indica il limite minimo di zoom-out che l’utente può effettuare
  • maximum-scale: i valori possono andare da da 0 a 10.0. Indica il limite minimo di zoom-in che l’utente può effettuare
  • user-scalable: i valori sono yes o no. Permette di bloccare o lasciare libera la possibilità di zoomare. Di default questo valore è impostato su yes

Infine nella sezione head troviamo un altro commento condizionale:

<!--[if lt IE 9]>
   <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
   <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Questa parte è dedicata alle versioni precedenti alla 9 di internet explorer. La prima libreria javascript che viene richiamata è quella che permette a questi browser di interpretare i tag html5. La seconda libreria javascript permette di far interpretare le media queries.

Il resto del codice mi sembra piuttosto chiaro. Se avete difficoltà nel comprenderlo vi suggerisco un buon libro che vi chiarirà molte idee: html5 e css3 di Gabriele Gigliotti

Tutto chiaro fino a questo punto? Domande?

Passiamo alla sezione css. In questa sezione definiamo le nostre media queries che ci permetteranno di adattare il nostro layout alle risoluzioni da noi indicate.

Prima di tutto mettiamo del testo nel corpo del documento:

<div id="wrapper">
        <header>
            <h1>Esempio Responsive design: Media queries</h1>
        </header>
        <section>
            <article>
                <h3>Titolo di esempio</h3>
                <p>Integer sit amet erat quis diam ultrices vestibulum ac in metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras at lorem et metus laoreet semper. Curabitur pretium; purus quis eleifend consectetur, nibh ipsum volutpat eros, ut euismod arcu nulla non dui. Pellentesque a est libero! Curabitur vulputate elit in ipsum posuere sollicitudin. Etiam eu arcu at elit condimentum posuere sed tempor velit. Nam sollicitudin arcu velit, placerat ultrices est? Etiam nec justo elit, eget ultricies justo! Integer sed erat eros. Integer lorem risus, eleifend nec gravida in; vulputate eget nisi. Nullam id elit lorem, dapibus consectetur ligula.</p>

                <p>Quisque varius dapibus elit, sed sodales arcu viverra in. Nulla facilisi. Aliquam consectetur auctor orci non semper. Vivamus laoreet blandit arcu sed faucibus. Cras sit amet libero augue. Suspendisse volutpat lacinia tortor a vulputate? Nulla dolor lacus, interdum non commodo vel; placerat ac orci.</p>

                <p>Morbi porttitor accumsan volutpat. Maecenas lobortis urna ac tortor tincidunt posuere. Phasellus erat nibh, bibendum vel malesuada accumsan, ultrices non velit. Vivamus et nisl sit amet ante feugiat commodo. Duis sed eros vitae purus feugiat lacinia ut et dolor. In hac habitasse platea dictumst. Sed fermentum pellentesque gravida. Fusce vel eros metus, rhoncus ultricies enim. Proin nec tortor nulla? Integer eu purus id enim pellentesque aliquam. Nulla facilisi. Proin pellentesque dapibus metus, a congue enim fermentum eget. Duis ut purus sit amet erat interdum lobortis. Morbi viverra erat id nunc dignissim in lacinia dolor dapibus. Vestibulum velit dui; blandit fringilla mattis sed, dignissim at nisi. Proin pulvinar tincidunt massa, id semper est egestas eu.</p>
            </article>
        </section>
        <footer>
             <p>© Copyright by <a href="https://www.ndstyle.it" title="blog ndstyle">Danilo Virotta</a> | <a href="https://www.ndstyle.it/responsive-design-media-queries/" title="Responsive design: media queries">Torna all'articolo</a></p>
        </footer>
    </div>

Ora abbiamo una pagina molto semplice da poter formattare a nostro piacimento. Ora formattiamo la nostra pagina pensando alla risoluzione per i pc desktop. Impostiamo il wrapper (il nostro contenitore) ad una larghezza di 960px e lo posizioniamo al centro. Poi diamo un minimo di stile agli elementi interni e impostiamo per semplicità questi elementi in float con larghezza al 100%. Il codice seguente potrà aiutarvi  capire:

html,body{margin:0;padding:0}

#wrapper{margin:0 auto;padding:0;width:960px}

header{margin:0;padding:0;float:left;width:100%;text-align:center}
section{margin:0;padding:0;float:left;width:100%}
article{margin:0;padding:0;float:left;width:100%}
footer{margin:0;padding:0;float:left;width:100%;text-align:center}

Dopo aver salvato questo codice provate a visualizzare la pagina. Otterrete semplicemente che il contenuto è al centro del browser. Se provate a ridimensionare la finestra vedrete che il contenuto non sia adatterà alla nuova risoluzione.

Il prossimo passo è quello di aggiungere le media queries. In questo esempio specificherò un breakpoint  a 480px. Questo valore è un valore intermedio che può essere provato su diversi dispositivi mobile in modalità Landscape.

Vediamo assieme il codice:

@media only screen and (max-width:480px) {
	#wrapper{width:460px}
}

Questo codice va inserito nel file css dopo le dichiarazioni fatte in precedenza. Ora provate a ridimensionare la finestra del vostro browser fino a raggiungere la larghezza di 480px. Vedrete che arrivati a quel breakpoint i contenuti si riadatteranno facendo sparire la barra di scorrimento orizzontale nel browser.

La dicitura messa nei css dice ai browser che se incontra una risoluzione minore o uguale a 480px deve applicare quelle regole sovrascrivendo quelle principali. Ho scritto minore o uguale in quanto ho definito un valore max-width quindi un valore massimo.

Conclusioni

Per ora concludo qui la prima parte dedicata alle media queries. Penso di aver messo molta carne al fuoco e che bisogna sicuramente “digerirla”!!

Spero di essere riuscito a farvi capire le potenzialità e l’uso delle media queries, Se avete domande in merito o trovate degli errori potete utilizzare i commenti.

Alla prossima!

18 Commenti
  1. Ciao, navigando in rete alla ricerca di una soluzione ad un problema di validazione ho trovato il tuo sito, mi complimento per il tuo lavoro.
    Dunque, sono a chiederti un aiuto se hai tempo e voglia…

    Non sono assolutamente un esperto, ma ho fatto alcuni siti e mi diverto: ora ho appena iniziato a lavorare ad un sito (l’ URL che ho inserito in questo form) che non viene validato a causa del meta .
    Posso toglierlo dall’header ed inserirlo nel file .htaccess?
    Se la risposta è sì, in .htaccess va inserito così come é scritto ora?

    Sperando in una tua risposta ti ringrazio in anticipo!
    Ciao e buon lavoro.

  2. opps…il metatag non è stato accettato nel form. Si tratta del metatag che permette di specificare il motore di renderizzazione per la pagina che si sta visualizzando.

    …. IX-UA-Compatible” content=”IE=edge,chrome=1″ …

    • Ciao Enrico. Ti ringrazio per i complimenti!! 😀

      Per quanto riguarda il tuo problema ti posso dire che ormai la validazione è difficile da ottenere. Anche gli strumenti del w3c non sono aggiornati in quanto sia html5 che i css3 vengono approvati a moduli. Inoltre il metatag che tu hai indicato, come ho scritto nel tutorial, è un metatag introdotto da Microsoft per il corretto rendering della pagina. Purtroppo l’utilizzo di tutte queste accortezze per la compatibilità invalidano il codice.

      Io sono dell’opinione che se gli errori segnalati sono dovuti a queste “accortezze” penso che si possa tranquillamente non tener conto della validazione. Infondo è solo uno strumento che ci guida nel creare quanto più possibile del codice grammaticalmente corretto.

      Riguarda la domanda dell’htaccess non puoi utilizzarlo per queste cose.. almeno io non ne sono al corrente!! 😉

      Spero di esserti stato utile. Nel caso lascia nuovamente un commento e vedrò di risponderti!

      P.S: complimenti per il tuo lavoro. Penso che la passione sia una delle migliori armi per creare dei buoni lavori!

      Ciao

  3. Ti ringrazio per la veloce e precisa risposta e… sono proprio d’accordo, la passione ci aiuta a dare il meglio di noi, poco o tanto che sia 😉
    Ciao.

  4. Grazieeeeee
    il tuo post mi ha risolto un problema enorme sulla pagina degli arrivi e delle partenze.

    😀

  5. se posso ti chiederei una cosa che non ho ben capito:

    questo è il codice che ho usato:




    <!–

    Calendario

    ma per funzionare devo mettere necessariamente questa riga che però non mi permette di caricare il file css/iphone_calendario.css

    volevo evitare di usare la

    in quando con questo codice la pagina viene visualizzata male sull’iphone

  6. non mi prende il codice il sorgente lo puoi vedere qui
    www dot aeroportodipantelleria dot it/display/calendario dot php

    • Ciao Umberto.

      Purtroppo credo di non aver capito bene il tuo problema. Per postare il codice puoi utilizzare questo strumento: http://pastebin.com/ – Una volta che salvi puoi copiare l’url per accedere al codice in un secondo momento o come in questo caso per condividerlo con qualcuno.

      Da quello che ho potuto vedere tu inserisci il codice per iphone in un commento condizionale ad uso esclusivo di internet explorer. Dovresti mettere quel css al di fuori di quei commenti. Se ho capito male riscrivimi pure.

      Danilo

      • Ciao

        il codice lo trovi qui: su pastebin.com/wNTPYsQT

        il problema è a riga 9 e riga 12 in pratica in questo modo non mi carica il foglio di stile che dovrebbe caricare in riga 10, cosa che fa se cancello riga 12 ma in questo modo perdo la compatibilità con i vecchi browser

        • Ciao Umberto.

          Da quello che vedo tu hai creato due direttive che puntano allo stesso file. La prima con una media query min-device-width: 481px mentre l’altra è normale. Non capisco perchè tu abbia fatto una cosa simile. Potresti semplicemente creare un unico file dove integrare il codice per le varie risoluzioni. Prima parti da quelle standard e poi quelle più piccole. Così come hai fatto tu non funzionerà mai!

          Spero di essere stato chiaro nella spiegazione!
          Danilo

          • Il problema è che se tolgo l’ultima (riga 12) funziona correttamente sul telefono ma non va completamente su < IE9 🙁 e mi sono incartato

          • Il problema sta nel foglio di stile. Tu hai creato due regole che puntano allo stesso identico file e questa cosa non ha senso!! Tu devi creare un unico foglio di stile al cui interno metti le varie media query a seconda della risoluzione dello schermo.

            Il problema di ie9 è dovuto al fatto che probabilmente vengono sovrascritte delle regole perchè quest’ultime sono in cascata!

  7. ahh ok allora devo agire all’interno del css ok…. domani che ho un po’ di tempo di provo..

    grazie mille

    😀

    • Figurati!! Se rileggi il mio articolo vedrai che io ho utilizzato un unico foglio di stile all’interno del quale ho inserito prima il codice per la visualizzazione normale e poi il break-point che mi interessava per cambiare le impostazioni ad una determinata risoluzione.

      Fammi sapere se risolvi o meno!
      Danilo

  8. Complimenti per le lezioni che sto seguendo con interesse.
    Posso chiederti come mai nel CSS hai messo il flot left a tutti gli elementi?
    Hai per caso realizzato un post dove spieghi come gestire le immagini nel responsiv?

    Grazie.

    • Ciao Robert.

      Sono molto contento che i miei tutorial ti siano di aiuto. Ho messo il float a tutti gli elementi in quanto era più semplice gestire i posizionamenti e lo stesso resposive!

      Al momento non ho scritto altri post perchè purtroppo da un po di tempo non riesco a curare il blog. Spero di ricominciare a breve! Appena scrivo un nuovo articolo se vuoi ti avverto!

      Ciao

      Danilo

  9. Ciao Danilo
    e grazie per la risposta.
    1)Quale metodo utilizzi per il RESET CSS? Ho visto che ci sono diversi metodi tra qui l’utilizzo del SELETTORE UNIVERSALE (*). E’ che fra le tante non so quale è meglio utilizzare.
    2)Ho una buona conoscenza di HTML/HTML5, CSS/CSS3 cose che ho iniziato a studiare 3-4 mesi fa. Ora volevo implementare la mia conoscenza passando allo studio di JAVASCRIPT. Quale libro potresti consigliare per uno che inizia da zero?

Rispondi a Umberto Annulla risposta

Attenzione

Se dovete postare del codice utilizzate uno di questi tool online (o un altro che preferite): pastebin.com - gist.github.com - jsfiddle.net