Responsive web design spiegato semplice

Cos’è il Responsive Web Design?

da Wikipedia:

Il responsive web design (RWD), indica una tecnica di web design per la realizzazione di siti in grado di adattarsi graficamente in modo automatico al dispositivo coi quali vengono visualizzati (computer con diverse risoluzioni, tablet, smartphone, cellulari, web tv), riducendo al minimo la necessità dell’utente di ridimensionare e scorrere i contenuti.

Definizione:
La locuzione Responsive Web Design (RWD) è stata coniata da Ethan Marcotte in un articolo sulla rivista A List Apart, nel 2010

Perchè nasce il RWD?

Dopo la diffusione dei primi smartphone nasce la necessità di rendere i siti più accessibili: essi infatti visualizzano i siti adattandoli alla larghezza dello schermo e costringendo l’utente a continui zoom e pan per la consultazione

Una prima soluzione è stata quella di sviluppare una versione specifica del sito progettata per la navigazione mobile, e raggiungibile ad un indirizzo diverso: in questo modo il sito è più accessibile, questa tecnica però, ha diverse controindicazioni.

Versione mobile del sito:

difficoltà nel mantenere aggiornate e allineate le due versioni del sito
problemi di indicizzazione nei motori di ricerca
il numero crescente di device diversi sul mercato rende difficile lo sviluppo di una versione del sito adeguata

Sito responsive:

Una sola versione del sito per tutti i dispositivi
manutenzione di un unico sito
Indicizzazione ottimale

Come funziona il RWD?

Il Responsive Web Design funziona grazie alla conbinazione di 3 ingredienti:

meta tag VIEWPORT
griglie e immagini flessibili
CSS media queries

1. Meta tag Viewport

Di default i browser visualizzano i siti adattandoli alla larghezza dell’area visibile dello schermo: tramite il meta tag VIEWPORT è possibile indicare al browser quanto dovrà essere larga in px la schermata da visualizzare:

<meta name="viewport" content="width=320" />

<meta name="viewport" content="width=device-width, 
initial-scale=1, maximum-scale=1.0, user-scalable=no" />

Indica al browser come gestire la viewport
(l’area visibile nella quale viene visualizzato il sito)

Sito con interfaccia 960 px

Senza tag viewport

Con tag viewport 320

2. Griglie e immagini flessibili

La griglia del layout deve essere definita in misure percentuali anziché in pixel, in modo da adattarsi alle diverse dimensioni dello schermo
Gli elementi contenuti all’interno della griglia devono potersi adattare al contenitore

griglia fissa
con misure
espresse in px

griglia flessibile
con misure
espresse in percentuale

Immagini flessibili

Gli elementi contenuti all’interno della griglia devono potersi adattare al contenitore:

i testi scorrono adattandosi allo spazio disponibile
per le immagini è necessario usare la proprietà CSS max-width:

img {
    max-width:100%;
    height:auto;
}

3. CSS media queries

Dichiarazioni CSS3 con le quali si determina il tipo di dispositivo che sta accedendo al nostro sito ed altre caratteristiche del dispositivo stesso in modo che si possano assegnare stili differenti in funzione di queste caratteristiche.

@media screen and ( min-width:1024px ) {
  body {
    background-color: lightblue;
  }
}

Mobile (first)

Desktop

 
.content,
.sidebar {
  width: 100%;
}

@media screen and( min-width:1024px ) {
  .content {
    width: 75%;
    float: left;
  }
  .sidebar {
    width: 25%;
    float: right;
  }
}

RWD: risultato

Combinando i 3 ingredienti è possibile gestire, per ogni dimensione, un diverso layout della stessa pagina

Non ci sono più i pixel di una volta

Pixel hardware
Pixel CSS (device independent pixels)

In passato un pixel hardware corrispondeva ad un pixel dell’immagine. Con l’avvento degli schermi alta definizione (come il retina display dell’iPhone 4 di Apple) si è creata necessità di visualizzare la stessa interfaccia con un numero doppio di px hardware, in modo da garantire l’utilizzo delle interfacce preesistenti.

Oggi tutti i dispositivi moderni hanno schermi alta definizione – il produttore stabilisce il numero corretto di px css visualizzabili nel viewport, che saranno poi renderizzati dai pixel hardware.

Viewport

Il viewport di un dispositivo viene definito dal produttore in base alle caratteristiche hardware ed al suo utilizzo: per esempio, nell’immagine seguente sono rappresentate 3 schermate catturate su 3 dispositivi: smartphone, notebook e smart TV. Tutti e 3 i dispositivi hanno la stessa risoluzione hardware di 1920 x 1080 px (Full HD), pur con dimensioni completamente diverse (rispettivamente 5, 15 e 40 pollici)

Come si può vedere dal contenuto delle schermate, ciascuno dei 3 dispositivi ha una “viewport” in px completamente diversa, nonostante il numero di px hardware sia lo stesso.

Le mediia queries usate nel RWD si riferiscono quindi al viewport dei dispositivi, e non alla risoluzione hardware.

Framework CSS

È una libreria di componenti di interfaccia creata con css, html
e javascript, allo scopo di semplificare lo sviluppo di siti responsive.
I più diffusi sono:

Bootstrap: http://getbootstrap.com/
Foundation: https://foundation.zurb.com//
Materialilze: http://materializecss.com/

I framework CSS contengono diversi elementi di interfaccia preimpostati e personalizzabili: menu, moduli, slider, ecc. per gestire il posizionamento degli elementi nella pagina utilizzano una griglia di 12 colonne.

Tramite classi CSS preimpostate è possibile gestire in modo semplice l’adattamento responsive della griglia nelle varie risoluzioni

 
<header class="row">
  <div class="col-sm-12 col-md-12 col-lg-12">L12 M12 S12</div>
</header>

<div class="row">
  <main  class="col-sm-12 col-md-6 col-lg-8">L8 M6 S12</main>
  <aside class="col-sm-10 col-md-6 col-lg-4">L4 M6 S10</aside>
</div>

WordPress e il RWD

I temi presenti di default in WordPress sono già responsive
Tra i tanti temi che possono essere scaricati (sia free che premium) molti integrano framework css come Bootstrap o Foundation.
Quando si sceglie un tema valutare anche se il tipo di adattamento responsive è adatto al nostro sito (tipo menu, hero image, ecc.)

Considerazioni sparse

RWD si o no?

Nella maggior parte dei casi il RWD è un’ottima soluzione per rendere il proprio sito più accessibile
Il RWD non è la soluzione a tutti i problemi (es. sito Ikea)
Google penalizza i siti non ottimizzati per mobile

Quindi con il RWD ho risolto?

I 3 ingredienti analizzati sono la base.
Il responsive web design è solo la punta dell’iceberg, vanno valutati altri aspetti:

lentezza della connessione
ottimizzazione delle immagini
facilità di navigazione su smartphone
funzionamento su dispositivi touch
test su dispositivi diversi (es. smart TV)

Contenuti di un sito responsive

Aspetti da valutare:

priorità dei contenuti da visualizzare
eventuale selezione dei contenuti
gestione di elementi complessi (es. tabelle)
leggibilità dei testi su schermi di diverse dimensioni

E domani?

Il RWD è il presente, ma ci sono nuove opportunità per migliorare l’esperienza utente che possono già essere utilizzate:

CSS Grid Layout
Picture element
SVG images

css html mobile responsive