Cos'è il Responsive Web Design?

Responsive Web Design significa rendere il tuo Sito accessibile da tutti i Dispositivi, da tutti i Browser e per tutte le loro Versioni, anche le meno recenti: vediamo come.

Le immagini dell’articolo sono tratte da www.pexels.com

Il Responsive Web Design permette di rendere perfettamente visibile il tuo Sito Web su tutti i Dispositivi (Device Responsive), su tutti i Browser (Browser Responsive), e su tutte le loro versioni, anche le meno recenti (Retro Responsive).

Nello sviluppo del Sito Web si darà quindi la precedenza alla visualizzazione da Device Mobili (Mobile First), oppure ai Contenuti (Content First).

Il Responsive Web Design comprende anche l’Accessibilità al tuo sito da parte degli utenti con specifiche caratteristiche fisiche, come le persone con ridotte capacità visive.

Avere un Sito Responsive inoltre aiuta ad avere maggiore visibilità nella pagina dei risultati del Motore di Ricerca Google.

Device Responsive: adattarsi a tutti i Dispositivi del mercato

Il Responsive Design è diventato un’esigenza imprescindibile da quando l’accesso ad Internet è stato possibile dai dispositivi mobili, è quindi è alla nascita degli Smartphone, dei Tablet e di tutti i loro modelli disponibili nel mercato.

Per riuscire ad adattarsi a tutti i dispositivi, il Responsive Web Design si basa sulla risoluzione degli schermi dei dispositivi, espressa in Pixel.

Tecnicamente si parla di Media Queries e Resolution Breakpoint: nel foglio di stile vengono specificate le proprietà che deve avere il sito, suddividendole principalmente in:

Small Device, per dispositivi con schermi inferiori a 768 pixel, come gli Smartphone,
Medium Device, per dispositivi con schermi più larghi degli Small e fino a 992 pixel, come i Tablet,
Desktop Device, per schermi più grandi dei Medium fino a 1200 pixel e, come si evince dal nome, dedicate ai PC Desktop,
Large Device, per schermi oltre i 1200 pixel, come le più moderne Smart TV.

Per i dispositivi Small e Medium esiste inoltre la possibilità di settare delle impostazioni per le visualizzazioni Portrait (quando li teniamo in verticale) o Landscape (in orizzontale).

Browser Responsive: come essere visibili su ogni programma per la Navigazione su Internet

Esistono diversi Programmi per navigare su Internet e ognuno di loro necessita di impostazioni diverse: i più diffusi sono Google Chrome, Mozilla Firefox, Internet Explorer, iOs e MacOs Safari, ma esistono anche Browser meno usati come Opera, il Browser nativo per i dispositivi Android o il più recente Microsoft Edge fornito con Windows 10.

Un Web Designer fa un buon lavoro quando testa i siti che sviluppa sui vari Browser, e quando rileva qualche intoppo sulla navigazione interviene nel foglio di stile con Media Queries specifiche per rendere i propri siti perfetti per tutti i programmi per la navigazione sul Web.

Retro Responsive: come adattarsi alle versioni meno recenti di Browser e Dispositivi

Il nostro sito è Retro Responsive quando mantiene la capacità di essere visualizzato anche sui Dispositivi e sui Browser meno recenti.

E’ un lavoro certamente dispendioso in termini di tempo, e a volte tecnicamente impossibile perché è un’attività che non dipende solo dal Web Designer, ma anche dagli sviluppatori che non rendono più disponibili aggiornamenti sul codice che si è utilizzato per sviluppare il Sito.

Uno strumento che orienta i Web Designer in questo aspetto è Google Analytics, un Tool che analizza il traffico e le caratteristiche degli utenti che visitano le nostre pagine: da qui possiamo vedere quali sono i Browser e i Device più vecchi ma ancora utilizzati per la navigazione su Internet sui quali dobbiamo puntare per mantenere aggiornati i nostri Siti.

Rendere un sito Responsive significa, da parte del Web Designer, tenere conto di tutti questi aspetti, tradurli in codice HTML e CSS e moltiplicarli per ogni esigenza che si vuole soddisfare.