Responsive web design

Responsive web design, tradotto con “progettazione web responsiva”, è una tecnica di progettazione per far adattare il sito web alle dimensioni dello schermo, in modo automatico.

Puoi vederne gli effetti con i tuoi occhi ruotando il tuo telefono, o ridimensionando la finestra del browser; vedrai come il mio sito si adatti perfettamente alle dimensioni del display.

Come funziona il responsive web design?

L’aspetto di un sito web è definito da una serie di regole contenute in un file di testo chiamato CSS. Nel responsive web design, queste regole vengono suddivise in gruppi, i quali si attivano in base alle dimensioni del browser.

Per esempio, possiamo comandare al browser di visualizzare due paragrafi in due colonne affiancate nel caso in cui la larghezza della pagina sia maggiore di un determinato valore; un paragrafo sotto l’altro, invece, nel caso in cui la larghezza sia minore di quel valore.

Questo ci permette di ottimizzare l’aspetto del sito web, rendendolo leggibile e confortevole nella fruizione da tutti i dispositivi che decidiamo di supportare; solitamente ottimizziamo il sito per smartphone, tablet, PC con schermo piccolo e PC con schermo grande.

Il funzionamento è quello che si vede nel seguente estratto di codice. Applicando l’approccio mobile first al responsive web design, comandiamo al browser di visualizzare un titolo in rosso sui dispositivi con uno schermo largo più di 1024px, in blu su tutti gli altri:

/* Questa regola vale per tutti i dispositivi. */
.titolo {
  color: blue;
}

@media (min-width: 1024px) {
  /* Questa, più specifica, vale per i dispositivi
     con uno schermo largo almeno 1024 pixel. */
  .titolo {
    color: red;
  }
}

Che vantaggi ha il responsive web design?

Un sito web responsivo è accessibile e confortevole da navigare, perché è progettato per essere visualizzato su display di ogni dimensione. Chi accede al tuo sito potrà trovare le informazioni che cerca in modo semplice ed efficace.

Grazie al responsive web design non dovremo gestire contemporaneamente versioni diverse del sito (per esempio, www.example.com per i PC e mobile.example.com per i telefoni cellulari). Infatti, averne un’unica versione che si adatta automaticamente, piuttosto che una per ogni tipo di dispositivo, ne riduce i tempi, i costi e le difficoltà di manutenzione.