Responsive web design: introduzione e origini del web mobile

 In Web design

Durante i primi anni di Internet, i monitor erano decisamente più piccoli di oggi. Le risoluzioni più usate, 800x600px e 1024x768px dettavano la larghezza standard delle pagine web (layout fisso). Qualche anno più tardi sono arrivate risoluzioni più alte e il layout fluido (qui un esempio) è diventato una necessità: con questo sistema, la pagina si adatta alla larghezza della finestra del browser. Un metodo a prova di futuro, per così dire, in quanto permette di non riscrivere da zero il codice nel caso di nuove risoluzioni.

Prima del 2007, per navigare da mobile esisteva il WAP. Oltre al fatto che costava parecchio navigare, il sistema era lento e serviva solo testo. Chi scrive, ad esempio, possedeva un Sony Ericcson P910: mai potuto navigare in Internet, né leggere la posta elettronica. L’esperienza utente era parecchio limitata.

Le primitive media type del CSS 2.1 permisero una semplice differenziazione in base al target (schermo, stampa, ecc.):

<link rel="stylesheet" type="text/css"  media="print" href="style.css">

Riassumendo: monitor con layout fluidi da un lato, tastiere T9 e primi smartphone con WAP fallimentare dall’altro.

iPhone e navigazione ricca

Nel 2007, con l’introduzione di iPhone (senza chip 3G ma solo EDGE per questioni di batteria), il panorama ha iniziato a cambiare. Schermi touch, tastiere virtuali e dispositivi che possono navigare in Internet come un Mac (CSS, XHTML, Javascript). Tuttavia, agli inizi, le pagine web su Safari per iOS si presentavano come su un computer… Rendendo necessario zoomare per poter leggere i testi.

Il layout fluido da solo non è in grado di servire monitor di quella dimensione. Certo, si poteva creare una versione separata per smartphone, tuttavia era un doppio lavoro.

Responsive web design

A partire da questa situazione è nato il responsive web design – RWD – (termine coniato da Ethan Marcotte), o web design responsivo. Grazie a questo metodo, un sito web adatta il layout in base alla risoluzione del monitor grazie a tre fattori: media queries, larghezze flessibili e immagini flessibili. Ecco un esempio.

layout-web-responsive

Media queries

Il responsive web design funziona attraverso le cosiddette “media queries”. Nel CSS, vengono scritte le regole per ogni schermo che decidiamo di supportare (Mac, iPhone, iPad, Android, ecc.) Per ogni media query definiamo le regole. Une media query si può inserire quando importiamo un CSS esterno:

<link rel="stylesheet" type="text/css"
 media="screen and (max-device-width: 480px)"
 href="stile01.css" />

 È inoltre possibile inserire una media query all’interno di un CSS:

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

Il codice sopra dice al browser che, per schermi fino a 480px, il selettore “.column” ha la proprietà “float: none”. Con un CSS ben strutturato, pertanto, è possibile definire i selettori comuni a tutti i monitor e, con le media queries, definire i selettori che adattano il layout ad ogni dispositivo.

Immagini responsive

È chiaro che le immagini su una pagina web devono a loro volta adattarsi alla dimensione del monitor. Se non  lo facessero, avremmo una foto enorme e le barre di scorrimento orizzontali. Il metodo più semplice e basilare consiste nell’impostare la larghezza al 100%, in questo modo l’immagine si adatterà automaticamente:

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

Da una prospettiva di art direction, quando si pone il problema del taglio fotografico da applicare ad ogni dimensione, esiste la tecnica picturefill:

<picture alt="description">
 <source src="small.jpg">
 <source src="medium.jpg" media="(min-width: 400px)">
 <source src="large.jpg" media="(min-width: 800px)">
</picture>

Per ogni dimensione del monitor, viene preparata e caricata una versione della fotografia ritagliata e approvata dall’art director, in modo da preservare il significato. In realtà, la questione è più complessa e meriterebbe approfondimenti ben maggiori, che riserviamo per il futuro.

Conclusione

Dal 21 aprile 2015, Google penalizza i siti web che non sono responsive, il che ne fa capire l’importanza. Ormai molti accedono a Internet da un iPhone o un iPad, magari viagiando in treno o aspettando il bus. Non da ultimo, il responsive design trova applicazioni non solo con i siti web, bensì anche con i servizi web più in generale. Cloud, gestione del personale, e-learning, ecc.

Post suggeriti
Comments

Leave a Comment

Inizia a digitare e premi Enter per effettuare una ricerca