Responsive design: come gestire layout, tipografia ed elementi multimediali?

Nella precedente lezione, abbiamo realizzato una pagina responsive attraverso la quale abbiamo analizzato il layout e le media queries offerte dal codice CSS3. La lezione di oggi è dedicata ai contenuti: le unità di misura, la tipografia, le immagini e i video.

Unità di misura del layout

Percentuali o pixel? La scelta delle dimensioni del layout è da analizzare molto attentamente in quanto possono esserci pareri differenti riguardo l’unità di misura da adottare. Da una parte c’è chi dice che un sito responsive debba essere totalmente flessibile. Quindi è d’obbligo usare le percentuali e mai i pixel:

.inner {
margin:0 auto;
width:98%;
}

#content {
width:74.5%;

}

#sidebar {
width:23.5%;
}

In questo esempio, tutte le dimensioni delle classi e degli id sono espresse in percentuale. Il layout sarà quindi totalmente adattabile a qualunque risoluzione dello schermo.

Dall’altra parte invece si nota che l’uso esclusivo dei pixel o la combinazione pixel / percentuali è un aiuto per lavorare meglio su un layout fisso del quale possiamo conoscere fin dall’inizio il comportamento dei box:

.inner {
margin:0 auto;
width:960px;
}

#content {
width:560px;
}

#sidebar {
width:360px;
}

.nav {
margin: 0 auto;
width: 90%;
}

Quale delle due soluzioni adottare? Effettivamente un sito responsive dovrebbe usare le percentuali e quindi permettere un adattamento a tutte le risoluzioni degli schermi. In questo modo l’uso delle media queries ci permette di spostare i box come si vuole e di lasciare che sia lo schermo a deciderne le dimensioni in base ai valori percentuali scritti nel codice CSS. Nasce, a mio avviso, un piccolo problema.

Fino a 1200px di risoluzione dello schermo i contenuti si possono adattare e gestire senza problemi. La sidebar potrebbe essere più larga e mostrare qualche informazione (per esempio una foto) in più o il riquadro dei contenuti principali potrebbe mostrare uno slide più grande e un numero di caratteri più elevato su un’unica riga riducendo l’effetto di scrolling in verticale. Cosa fare però se lo schermo dovesse avere una risoluzione elevata (Full-HD) o decisamente elevata (Retina Display)? Gestire i contenuti a risoluzioni così elevate non è sempre facile.

La risposta che ritengo più ragionevole alla questione su quale strada intraprendere (pixel, percentuali, o entrambi) è “a seconda dei casi”. Un sito può essere progettato per essere visto a pieno schermo, e in questo caso è sicuramente doveroso usare le percentuali. Oppure pensato per lo scrolling in verticale, e in questo caso è possibile usare le dimensioni fisse con o senza l’uso delle percentuali.

Tipografia

Altro aspetto da non tralasciare quando si progetta e si realizza un sito, in particolar modo un sito responsivo, è la tipografia.

Unità di misura

L’unità di misura da adottare su un sito responsivo (ma anche non) deve essere sempre quella relativa e mai fissa. Quindi la dimensione dei font deve essere espressa in em. Questo perché il px, l’unità di misura del display, è un’unità di misura fissa; l’em invece è un’unità di misura relativa che si adatta al dispositivo utilizzato. Quindi per il body possiamo impostare il font-size al 100%.

body {
font-size: 100%;
}

Per tutti gli altri testi, dai titolo ai paragrafi, dobbiamo invece usare gli em.

p {
font-size: .7em;
}

h1 {
font-size: 1.2em;
}

h2 {
font-size: 1em;
}

Utilizzando questa soluzione sarà sufficiente variare la dimensione del font-size nel body per modificare gli altri testi.

I Font Family

La scelta dei font su un sito responsive è la parte più delicata. I font disponibili su PC sono molti più numerosi rispetto agli smartphone, alcuni dei quali hanno giusto un font per ogni famiglia generica (sans-serif, serif, monospace).

h1 {
font-family:Arial, Helvetica, sans-serif;
}

Molto probabilmente uno smartphone equipaggiato con un sistema Android non visualizzerà il titolo h1 in Arial nè in Helvetica ma in Droid Sans. Come risolvere il problema?

Il CSS3 e vari servizi, come Google Web Fonts, ci hanno permesso di integrare nel sito font non installati sui dispositivo. Questa soluzione è molto comoda ma solo se si dispone di una connessione velocissima e senza limiti. Con gli smartphone e con i tablet non è molto praticabile.

Il progetto potrebbe complicarsi, visto che scegliere un font adeguato alla comunicazione del sito non è mai facile. In un sito responsive si potrebbe quindi decidere di usare due font differenti: uno specifico e personalizzato per i PC, ed uno generico per i dispositivi mobile.

@media only screen and (min-width: 321px) and (max-width: 1024px) {
h1 {
font-family:Arial, Helvetica, sans-serif;
}
}

@media only screen and (min-width: 1025px) {
  @font-face {
    font-family: 'BebasNeueRegular';
    src: url('BebasNeue-webfont.eot');
    src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
    url('BebasNeue-webfont.woff') format('woff'),
    url('BebasNeue-webfont.ttf') format('truetype'),
    url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
  }

  h1 {
    font-family: 'BebasNeueRegular';
  }
}

Elementi multimediali

Riprendiamo il layout che abbiamo realizzato nella terza lezione.

Avevamo aggiunto sotto la barra di navigazione un’immagine che si adattava allo schermo grazie all’uso dell’istruzione background-size:containt;. Oggi vediamo in dettaglio come realizzare immagini responsive per il nostro sito, sostituiamo l’immagine grande sotto l’header con uno slider e aggiungiamo anche un video. Il tutto in maniera responsiva.

Come rendere le immagini responsive?

Ci sono, teoricamente, quattro possibilità per rendere le immagini responsive: l’istruzione object-fit del CSS3, il tag picture dell’HTML5, il tag figure dell’HTML5 appoggiato da jQuery ed infine una tecnica che utilizza il max-width del CSS2.

Iniziamo dal CSS3:

img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

Con il codice sopra riportato adattiamo le immagini ai loro contenitori grazie a object-fit: contain. Questa è una possibile soluzione facile da implementare ma comporta un enorme spreco di risorse per chi naviga in mobile, in quanto l’immagine originale deve essere di buona qualità. Inoltre l’object-fit è fruibile solo da pochi browser (in particolare Opera 10.6+, e a breve da Firefox 18+ e Chrome 24+).

Il W3C ha proposto come possibile soluzione un nuovo tag da aggiungere all’HTML5, picture, che consentirà di includere più immagini, mostrando quella più adatta al dispositivo.

<picture width="500" height="500">
   <source media="(min-width: 45em)" src="large.jpg">
     <source media="(min-width: 18em)" src="med.jpg">
     <source src="small.jpg">
      <img src="small.jpg" alt="">
   <p>Accessible text</p>
</picture>

Questa soluzione è però solo una bozza e richiederà un po’ di tempo prima che venga completata e accolta dalle software house.

La terza soluzione alla quale possiamo ricorrere comprende il tag figure dell’HTML5 e il plugin jQuery Picture.

Il codice da riportare nella pagina HTML5 è:

<figure class="responsive" data-media="assets/images/small.png" data-media440="assets/images/medium.png" data-media600="assets/images/large.png" title="A Half Brained Idea">
    <noscript>
        <img src="assets/images/large.png" alt="A Half Brained Idea">
    </noscript>
</figure>

Possiamo notare, nel codice dell’esempio, l’utilizzo di quattro immagini differenti, una per ogni tipologia di risoluzione, con l’immagine large.png resa predefinita.

mentre il codice che inizializza il plugin è

$(function(){
    $('figure.responsive').picture();
});

jQuery Picture può essere utilizzato anche con il tag picture discusso in precedenza:

<picture alt="A Half Brained Idea">
    <source src="assets/images/small.png">
    <source src="assets/images/medium.png" media="(min-width:440px)">
    <source src="assets/images/large.png" media="(min-width:600px)">
    <noscript>
        <img src="assets/images/large.png" alt="A Half Brained Idea">
    </noscript>
</picture>

e per inizializzare il plugin:

$(function(){
    $('picture').picture();
});

L’ultima soluzione è disponibile utilizzando istruzioni già presenti in CSS2:

.box_immagine {
  width:90%; /* il contenitore prende il 90% della pagina */
}

.box_immagine img {
  height: auto;
  max-width: 100%; /* fai espandere l'immagine fino a riempire il contenitore e non oltre */
  width: auto;
}

Come per l’object-fit, anche in questo caso si ripete il problema del peso dell’immagine. A favore invece ci sono compatibilità con i browser e facilità di implementazione.

Dei quattro esempi, le migliori soluzioni sono le ultime due, quindi: il plugin jQuery Picture e le dimensioni relative dell’immagine (height, max-width, e width). Entrambi sono facili da implementare. jQuery Picture permette un risparmio di banda ma richiede JavaScript e il ritaglio di quattro immagini. Il CSS2 consuma più banda ma è immediato e funziona anche con JavaScript disabilitato.

Slider responsivo

Miglioriamo il nostro tema aggiungendo uno slider responsivo. Ho scelto ResponsiveSlides in quanto molto veloce e altamente compatibile, anche con Internet Explorer versioni 6,7,8. Dopo aver scaricato il plugin dal sito e scelto alcune immagini (possiamo anche usare quelle fornite dallo sviluppatore del plugin), installiamolo sul sito.

Il plugin

<script src="responsiveslides.js"></script>

La lista delle immagini

<ul>
  <li><img src="slider_1.jpg" alt="Testo alternativo" /></li>
  <li><img src="slider_2.jpg" alt="Testo alternativo" /></li>
  <li><img src="slider_3.jpg" alt="Testo alternativo" /></li>
  <li><img src="slider_4.jpg" alt="Testo alternativo" /></li>
</ul>

Attivazione dello slider

<script>
  $(function () {
    $(".rslides").responsiveSlides();
  });
</script>

Le istruzioni CSS

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

Et voilà… abbiamo installato il nostro slider!

Video responsivo

Infine condividiamo sul nostro sito responsive un video pubblicato su YouTube o su Vimeo. Come adattarlo? Le soluzioni non sono moltissime e presentano ancora qualche difetto di gioventù soprattutto quando lo schermo è troppo piccolo. La soluzione al momento migliore è offerta da fitvids.js, un plug-in jQuery semplice e veloce da installare pensato proprio per il responsive.

Il plugin

<script src="fitvids.js"></script>

Il video da condividere

<div>
<iframe width="1280" height="720" src="http://www.youtube.com/embed/oF_dXUkRWrE" frameborder="0" allowfullscreen></iframe>
</div>

Anche se le dimensioni del video vengono definiti nel codice html, lo script che segue richiama la funzione fitVids indicando dove si trova il video indicando le nuove dimensioni.

<script>
  $("#content").fitVids();
</script>

Nell’esempio puoi vedere come il video si adatta al ridimensionamento del browser.

Conclusioni

Con la lezione di oggi abbiamo migliorato la nostra pagina con uno slider di immagini e con un video. Il tutto responsivo.

Cosa manca per completare il percorso che abbiamo affrontato sul responsive design? I test, utili a capire il comportamento del layout della nostra pagina responsive con i vari dispositivi. Nella prossima ed ultima lezione affronteremo questa parte.

Indice della guida

  1. Introduzione: come nasce il Responsive Design, accenno ai linguaggi di programmazione usati
  2. Analisi dei dispositivi, studio del layout e gestione dei contenuti
  3. I CSS3 media queries
  4. Gestione del layout, tipografia ed elementi multimediali
  5. Compatibilità e testing
Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: , , , ,

L'autore

Laureato in Scienze della Comunicazione ma con un background da sviluppatore web, svolge con passione e determinazione il proprio lavoro, quello di Front-End Web Developer, iniziato per caso in una Web Agency e approfondito come libero professionista. Del lavoro autonomo apprezza molto la possibilità di dedicare tempo alla ricerca e all’approfondimento delle novità. Nel tempo libero si diletta invece in scatti paesaggistici e urbani.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

22 commenti

  1. maxlovegods
  2. Antonio
  3. lucalbero
  4. lucalbero
  5. lucalbero
  6. cristina
  7. cristina
  8. Cristina
  9. Cristina
  10. cristina

Trackback e pingback

  1. Responsive Design: come e perchè progettare siti responsive? | Your Inspiration Web
    [...] Gestione del layout, tipografia ed elementi multimediali [...]
  2. Responsive Design: Lo studio del layout e la gestione dei contenuti | Your Inspiration Web
    [...] Gestione del layout, tipografia ed elementi multimediali [...]
  3. Come progettare un layout web responsive con le media queries? | Your Inspiration Web
    [...] Gestione del layout, tipografia ed elementi multimediali [...]

Lascia un Commento

Current day month ye@r *