Come funziona il design responsive?

Volendo riassumere in poche parole questa tecnologia potremmo dire che, se applicata a un sito web, gli elementi di quest'ultimo si adatteranno e si riposizioneranno in base alla misura dello schermo.

Non sarà più rilevante il tipo di piattaforma utilizzato per visualizzare il sito, che sia un mobile, un tablet o un desktop non avrà importanza, sarà la misura del monitor a determinare come saranno visualizzati gli elementi delle pagine.

Quando navighiamo lo stesso sito da mobile e da desktop vediamo che gli elementi sono posizionati diversamente, sul mobile avremo le immagini posizionate sopra e sotto i testi, sui desktop invece le potremmo vedere affiancate (non è obbligatorio ovviamente, dipende dal layout del sito, ma in genere è così).

Tutto questo viene fatto automaticamente, in pratica in fase di sviluppo le web agency determinano il riposizionamento degli elementi in base a determinati scaglioni di misure, di solito tre o quattro: mobile, tablet verticale, tablet orizzontale e desktop. Spesso tablet verticale e mobile vengono inquadrati allo stesso modo.

I siti sviluppati con questa tecnologia sono visti come mobile friendly da Google.

Prima dell'avvento del design responsive si creava una versione alternativa del sito per i mobile, si rilevava il tipo di piattaforma e si reindirizzava l'utente su quella adatta al suo device, questo però comportava lo sviluppo di due versioni del sito web, costringendo gli sviluppatori a un doppio lavoro.

Oggi viviamo nell'epoca del mobile first, ovvero la versione mobile viene vista come primaria e di conseguenza viene quella desktop, questo perché il traffico arriva sempre più dai mobile che dai computer desktop, per cui gli sviluppatori ragionano mobile e poi valutano il layout del desktop quasi come un adattamento del mobile.

Grazie al responsive design i siti web sviluppati negli ultimi anni sono praticamente tutti mobile. Le web agency non lo scrivono neanche più nei preventivi, è un fattore che oggi si da per scontato, realizzare un sito web non mobile è impensabile.

Quando si lavora con gli open source i layout sono già impostati per essere responsive, se invece creiamo siti custom abbiamo dei tool che ci aiutano in questo compito, il web designer deve però fare attenzione che il sito sia perfettamente fruibile ed esteticamente gradevole in ogni risoluzione.

Il fatto che si auto adattino non garantisce che tutto sia perfetto, ad esempio il menù di navigazione potrebbe essere in una posizione che non permette di cliccare sulle voci a determinate risoluzioni del montor, alcune immagini potrebbero coprire dei testi sul mobile e non sul desktop, occorre fare molta attenzione e testare sempre il prodotto con le diverse piattaforme.

Un altro vantaggio è che abbiamo un unico URL (indirizzo della pagina web) a differenza del passato quando, a causa della doppia versione mobile/desktop, gli URL erano due. Questo comportava una complicanza in più per quanto riguardava il posizionamento del sito web, costringendo le agenzie web a un doppio posizionamento delle pagine.