menu
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
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.
Il Responsive Web Design funziona grazie alla conbinazione di 3 ingredienti:
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)
Gli elementi contenuti all’interno della griglia devono potersi adattare al contenitore:
img {
max-width:100%;
height:auto;
}
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;
}
}
.content,
.sidebar {
width: 100%;
}
@media screen and( min-width:1024px ) {
.content {
width: 75%;
float: left;
}
.sidebar {
width: 25%;
float: right;
}
}
Combinando i 3 ingredienti è possibile gestire, per ogni dimensione, un diverso layout della stessa pagina
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.
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.
È 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:
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>
I 3 ingredienti analizzati sono la base.
Il responsive web design è solo la punta dell’iceberg, vanno valutati altri aspetti:
Aspetti da valutare:
Il RWD è il presente, ma ci sono nuove opportunità per migliorare l’esperienza utente che possono già essere utilizzate: