Blog

Responsive Design

Ho pensato di inaugurare questo blog, trattando un argomento che mi sta molto a cuore e che, negli ultimi anni, è diventato un vero paradigma del web: il Responsive Design.

In inglese, con il termine “Responsive” si indica tutto ciò che reagisce o risponde in modo rapido ed appropriato ad uno stimolo.

Applicando questa definizione al web design, possiamo definire “Responsive” un approccio tecnico mediante il quale sia la progettazione che lo sviluppo di un sito siano pensati dinamicamente, in base cioè alla risoluzione dello schermo, alla piattaforma utilizzata e all’orientamento del dispositivo dell’utente.

Dal punto di vista puramente tecnico, tutto ciò si può riassumere in un mix di griglie, layout ed immagini flessibili, affiancato da un uso appropriato delle media queries CSS.

Quando l’utente passa dal suo desktop ad uno smartphone, il sito deve adattarsi automaticamente alla nuova risoluzione, modificare le dimensioni delle immagini e del testo e riposizionare nel miglior modo possibile i contenuti.

responsive-web-design

Il Responsive Design non serve però a creare versioni di un sito web specifiche per il mobile: non esiste la necessità di versioni diverse. Ciò che un buon webmaster progetta e realizza deve essere auto-adattante rispetto all’enorme varietà di dispositivi con cui viene fruito (TV, Desktop, Laptop, Tablet, Smartphone…).

Gli obiettivi minimi per realizzare un’esperienza responsive positiva sono quindi i seguenti:

– Adattare il layout del sito al più ampio numero di risoluzioni possibile.
– Adattare le dimensioni delle immagini (e di tutti i contenuti solitamente a larghezza fissa) alla risoluzione e alle dimensioni dello schermo.
– Consegnare immagini meno pesanti ai dispositivi mobile, che non sempre possono sfruttare la banda larga.
– Semplificare il layout delle pagine per i dispositivi con schermi piccoli.
– Nascondere elementi non essenziali su questi dispositivi.
– Fornire un’interfaccia adeguata all’interazione touch per i device che la prevedono.
– Individuare e sfruttare, se necessario, funzionalità adatte al mobile (ad esempio la geolocalizzazione).

Esiste inoltre un’espressione che riassume efficacemente la filosofia del Responsive Design:

Content first and Mobile first. (Prima i Contenuti e prima il Mobile.)

Prima i Contenuti:

Per “contenuti” si intendono il logo, i testi, le immagini, il menu principale, le sezioni secondarie, i moduli di ricerca e così via…

In siti web di piccole/medie dimensioni è sufficiente affidarsi a carta e penna per tracciare gli elementi principali e disegnare uno schizzo dei layout che intendiamo implementare.

Prima il Mobile:

Secondo questa filosofia è necessario partire dalla strutturazione dei contenuti per il piccolo schermo dei dispositivi mobili.

Non si parte da un layout e da un set di funzionalità concepiti per il desktop per poi adattarli al mobile. Al contrario, si parte dai limiti posti dai dispositivi mobili per concentrarsi al meglio sui contenuti essenziali, per poi arricchire il tutto sui dispositivi più capaci, man mano che aumentano le dimensioni dello schermo e la potenza dell’hardware.

Per applicare questa tecnica di arricchimento in base all’aumentare delle dimensioni dello schermo ci serviamo delle media queries e dei breakpoint.