Comunicazione e web agency

Responsive web design

Il termine Responsive Web Design (RWD) viene utilizzato per indicare una particolare tecnica di Web design per la realizzazione di siti web in modo che le pagine adattino automaticamente il layout per fornire una visualizzazione ottimale in funzione dell'ambiente nei quali vengono visualizzati (pc su desktop con diverse risoluzioni, tablet, smartphone, cellulari di vecchia generazione, web tv) riducendo al minimo all'utente la necessità di ridimensionamento e scorrimento, in particolare quello orizzontale.

Elementi del Responsive Web Design

Un sito progettato per il RWD utilizza Cascading Style Sheets 3 media queries, un'estensione della regola @media rule, per adattare il layout all'ambiente nel quale viene visualizzato, insieme a griglie di proprozioni fluide, e immagini flessibili:
Le Media Queries consentono alla pagina di usare diversi stili CSS sulla base delle caratteristiche del device sul quale vengono visualizzati, principalmente sulla larghezza del viewport, ovvero della finestra del browser nella quale viene visualizzata la pagina.
Il concetto di griglia flessibile richiede che gli elementi siano dimensionati tramite unità relative come percentuali e EM, e non come unità assolute come pixel o punti.
Le immagini flessibili devono poter essere visualizzate con dimensioni diverse, in modo da potersi adattare ai layout di diverse dimensioni evitando di sovrapporsi agli altri elementi.
Come risultato, gli utenti che utilizzano diverse periferiche e browser per la visualizzazione hanno accesso ad un singolo sorgente i cui contenuti vengono disposti in modo tale da essere facilmente consultabili, e si possa navigare senza dover fare troppe operazioni di ridimensionamento, scorrimento e spostamento delle pagine.

Resolution breakpoints

La necessità di dover adattare la visualizzazione alle diverse dimensioni e risoluzioni degli schermi, ha introdotto il concetto di Resolution breakpoints per poter suddividere in un numero discreto le tipologie di layout ovvero di organizzazione dei contenuti, in funzione della larghezza del device. Tali breakpoint sono generalmente espressi in pixel, anche se l'aumento della densità dei pixel nelle nuove generazioni di device comporta che non si possa considerare il viewport solo in termini di pixel senza considerarne l'effettiva dimensione.

Ethan Marcotte nel suo libro "Responsive web design" identifica 6 Resolution breakpoints:
320 pixel per device con schermi piccoli, come cellulari, mantenuti con orientamento verticale (portrait)
480 pixel per device con schermi piccoli, come cellulari, matenuti con orientamento orizzontale (landscape)
600 pixel piccoli tablet, come Kindle di Amazon (600x800) e Nook di Barnes&Noble (600x1024), tenuti con orientamento verticale
768 pixel tablet da 10 pollici come l'iPad (768x1024) mantenuti con orientamento verticale
1024 pixel computer da scrivania, laptop e netbook, e tablet come l'iPad (1024x768) mantenuti con orientamento orizzontale
1200 pixel computer con schermi larghi, tipicamente desktop ma anche laptop

Tali tipologie possono essere piùπ genericamente ricondotte a 4 principali:
mobile: per cellulari
narrow: per tablet
normal: pc desktop
wide: schermi di grandi dimensioni