Cos'è il design reattivo?

Non è passato molto tempo da quando i designer non avevano davvero bisogno di preoccuparsi dell'aspetto dei siti Web su telefoni cellulari e tablet. I telefoni non erano ancora molto pratici per la visualizzazione sul Web e, prima dell'iPad, i tablet erano più una novità che un elemento essenziale.

Ovviamente, tutto ciò è cambiato e la maggior parte degli esperti di tecnologia prevede che nei prossimi anni, probabilmente prima piuttosto che dopo, la navigazione mobile supererà la navigazione desktop come modo dominante di visualizzare il Web.

Con una gamma in continua evoluzione di dimensioni dello schermo e dispositivi, tra cui console per videogiochi e Internet TV, i vecchi metodi di progettazione web semplicemente non sono più all'altezza del compito. E con le aziende che si rendono conto della necessità di ottimizzare la propria esperienza online per gli utenti mobili, i designer che non si adattano rimarranno indietro.

Nota del redattore: quella che segue è un'introduzione per principianti al design reattivo, non destinata ai web designer più esperti.

I componenti principali del design reattivo

È qui che entra in gioco Responsive Web Design, contenuto e/o layout che si adatta automaticamente alle dimensioni dello schermo su cui viene visualizzato. Nella sua forma più basilare, i tre elementi principali del Responsive Design sono una griglia flessibile, immagini flessibili e Media Query, quest'ultima introdotta come parte dei CSS3. Di più su quelli in un momento.

Griglie flessibili

Le griglie flessibili sono fondamentalmente temi e modelli in cui gli elementi di design sono impostati in percentuali anziché in pixel. Con le percentuali come unità di misura, ciò significa che un elemento progettato al 50% occuperà sempre metà dello schermo, non importa quanto grande o piccolo sia lo schermo.

Immagini flessibili

Nella loro forma più semplice, immagini flessibili non potrebbero essere più facili da creare scrivendo una semplice regola che afferma:

 img { max-width: 100%; }

In sostanza, ciò significa che se un elemento è più grande del suo contenitore, la regola lo costringe a corrispondere alla larghezza di quel contenitore. E poiché i browser moderni ridimensionano le immagini in modo proporzionale, anche le proporzioni dell'immagine vengono preservate. Inoltre, la regola del 100% può essere utilizzata anche per quasi tutti gli altri elementi, come i video incorporati.

La domanda sui media

Dall'introduzione dei tipi di media in CSS 2.1, i fogli di stile sono stati molto più comprensivi di dispositivi mobili e di altro tipo. I tipi di media consentono essenzialmente lo stile per indirizzare classi specifiche di dispositivi Web, con quei tipi che includono palmare, schermo e TV. Ma con poca standardizzazione tra i dispositivi e scarso supporto da parte dei produttori di dispositivi, i tipi di media non sono mai stati all'altezza del loro potenziale.

Le Media Query sono all'altezza di questo potenziale e poi di alcuni. Ma invece di occuparsi del tipo di dispositivo come fanno i tipi di media, Media Query esamina invece le capacità del dispositivo.

Una semplice Media Query potrebbe essere simile a questa:

I due componenti della query sono il tipo di supporto, impostato come schermo, e quindi la query effettiva - (max-device-width: 480px) - che essenzialmente chiede se la larghezza del dispositivo è 480 px o inferiore. In tal caso, il dispositivo carica generic.css. In caso contrario, il collegamento viene ignorato, come altri, fino a quando non viene identificata la risoluzione corretta e non viene caricato il foglio di stile appropriato.

Più di una semplice risoluzione

Ma la risoluzione non è affatto l'unico elemento di progettazione che può essere controllato attraverso l'uso di Media Query. Larghezza e altezza della finestra del browser, orientamento orizzontale e verticale e persino il layout sono alcuni degli altri parametri che possono essere impostati.

Ad esempio, se una Media Query rileva che un dispositivo è uno smartphone, un design che potrebbe essere caricato mostrando tre colonne con un'area di testo e due barre laterali verticali sullo schermo di un computer potrebbe essere caricato sullo schermo dello smartphone come un'area di testo a larghezza intera con il due barre laterali come elementi orizzontali sotto.

Una mentalità flessibile

Naturalmente, un requisito fondamentale per un design flessibile è rappresentato dai designer con una mentalità progettuale flessibile. Sfortunatamente, la maggior parte delle pagine Web non è ancora così amichevole sui dispositivi mobili, principalmente perché la maggior parte dei designer in genere progetta ancora solo per il desktop con smartphone e tablet come ripensamento. Pochi designer si avvicinano al design pensando a più piattaforme.

Mentre c'è una curva di apprendimento nell'incorporare le Media Query nei fogli di stile, è il passaggio dalla progettazione con pixel alla progettazione con percentuali che blocca alcuni web designer. In realtà, però, non c'è molta differenza nel progettare con le percentuali, ed è anche più facile.

Si consideri, ad esempio, la differenza tra l'assegnazione di larghezze del 100% e 100 pixel a due elementi identici. In uno, puoi essere certo che l'elemento riempirà lo schermo, sia che si tratti dello schermo di un desktop, di un laptop o di un iPhone. Ma un elemento largo 100 pixel sarebbe grande su uno schermo iPhone da 480 pixel ma relativamente piccolo su uno schermo desktop con risoluzione 1600×900.

Design reattivo significa affari

Per le aziende, il motivo principale per implementare il design reattivo è ovvio. Più facile è per i potenziali clienti navigare e trovare ciò che stanno cercando, maggiore è il tasso di conversione. Ma per molti designer, il design reattivo per un sito Web aziendale in genere significava semplicemente ridurre le dimensioni del contenuto per adattarlo a uno schermo più piccolo. Chiunque abbia passato del tempo a scorrere e ingrandire e rimpicciolire per trovare le informazioni che stanno cercando sa che una versione in miniatura di un sito Web non è la risposta.

Un altro modo in cui aziende e designer hanno affrontato il problema della progettazione per un dispositivo mobile è stato quello di creare un sito separato per dispositivi diversi con reindirizzamenti automatici in base al dispositivo. Ciò consente di fornire la migliore interfaccia ed evitare il caricamento lento causato da JavaScript e immagini di grandi dimensioni.

Ma ci sono diversi inconvenienti in questo approccio. Certamente, uno di questi è la spesa per la creazione e il mantenimento di più siti e il coordinamento dei contenuti tra quei siti. E, naturalmente, c'è ancora un altro nuovo sito da costruire quando uscirà un nuovo dispositivo. Fortunatamente, Responsive Design, se eseguito correttamente, può risolvere quasi tutti i problemi nella progettazione per dispositivi mobili.