frontend developer e consulente web

design responsivo

cos'è e a cosa serve il design responsivo

Il design responsivo è un tipo di progettazione che permette ad un sito web di adattarsi a varie risoluzioni desktop e a vari dispositivi mobile in maniera nativa. Negli ultimi anni, con il rilascio di monitor sempre più grandi e diversi tra loro, e con l'avvento dei dispositivi mobile, il design ha avuto esigenze differenti. Si è così pensato ad un design che potesse essere responsivo: adattabile cioè a qualunque risoluzione e dispositivo; senza bisogno di creare versioni apposite del sito web per i dispositivi mobile.

Com'è possibile che un design si adatti a diverse risoluzioni e dispositivi? Grazie al codice CSS, che con alcune regole rende "fluidi" alcuni contenitori e con altre, più specifiche, permette un riposizionamento e adattamento dei contenitori e dei vari elementi. Alcuni contenuti, come immagini e font, vengono trattati in modo tale da essere "elastici", cosicchè possano ingrandirsi o rimpicciolirsi in base alla risoluzione del dispositivo con il quale si sta navigando il sito web.

Le media queries sono regole particolari, che scrivono un codice diverso per ogni range di risoluzione. Creano cioè dei punti di interruzione nei quali il codice interpreta in maniera differente alcuni elementi HTML. I vari punti di interruzione, in cui il codice cambia interpretazione degli elementi, si chiamano break points. Questi punti possono essere più o meno numerosi, in base alle scelte del web designer e alla complessità del design. Ma a grandi linee si possono identificare nei seguenti 6:

  • 320 pixel: per smartphone con orientamento verticale
  • 480 pixel: per smartphone con orientramento orizzontale
  • 600 pixel: per tablet di piccole dimensioni con orientamento verticale
  • 768 pixel: per tablet con schermi da 10 pollici con orientamento verticale
  • 1024 pixel: computer desktop o poratili o tablet con schermi ad alta risoluzione
  • 1200 o più pixel: computer desktop o portatili

design responsabile

Con l'unione di contenuti fluidi e regole media queries otteniamo un sito web responsivo. Ma è bene considerare anche il lato responsabile del design: fare sì che il sito web utilizzi le ultime tecnologie senza inficiare negativamente vecchi browsers o altri dispositivi.

Si adottano quindi particolari tecniche di progettazione e si sfruttano le possibilità offerte dai linguaggi HTML e CSS, facendo sì che i browsers più datati visualizzino comunque bene il sito web. Non mostreranno magari particolari effetti o forme di design (perchè non riescono a interpretare correttamente il codice), ma permetteranno comunque un ottimo visual design ed un'esperienza utente positiva.

Questa tipologia di progettazione introduce al miglioramento progressivo, una tecnica che si pone l'obiettivo di utilizzare tutte le ultime tecnologie web disponibili. I browsers moderni possono quindi mostrare il sito web per come è stato effettivamente progettato. I browsers datati, tralascieranno regole che non sono in grado di interpretare e leggeranno classiche regole con le quali renderanno comunque fruibile il sito web. Ovviamente è compito del web designer considerare questi metodi di progettazione nel realizzare siti web.

i vantaggi del design responsivo

Indiscusso e ovvio vantaggio derivante dal design responsivo è avere un sito web che si adatti a tutte le risoluzioni e a tutti i dispositivi. Realizzare siti web responsivi è ad oggi un esigenza di mercato. Gli utenti, e probabili clienti, visualizzeranno certamente il tuo sito web da vari dispositivi, quindi è bene che sia in grado di mostrarsi con il miglior layout possibile.

Se il progetto web non ha caratteristiche particolari non è necessario realizzare un sito web specifico per il mobile. In questo modo si può risparmiare sul budget e anche sul tempo di realizzazione, ottenendo comunque un sito web visibile correttamente sui dispositivi mobile.

Il contesto che ritengo più importante è sicuramente relativo alla SEO, che si differenzia tra desktop e mobile. Se vuoi ottenere più informazioni leggi la pagina del posizionamento siti web.