Cos’è un design responsive?

Un design responsive è un approccio allo sviluppo di siti web che ne permette una visualizzazione ottimale su vari tipi di dispositivi finali. Il termine design responsive è contemporaneo a quello di web mobile e ha acquisito maggiore importanza a partire dal 2013.

Prima dell’arrivo del web mobile, il panorama dei dispositivi finali abilitati a Internet era relativamente omogeneo. Questo comprendeva computer portatili e desktop, i quali presentavano forti similitudini in relazione ai mezzi di input e output. Entrambi i tipi di dispositivi mettevano a disposizione dell’utente una tastiera, un mouse o un trackpad, e uno schermo con una larghezza di 1.000-2.000 pixel.

In questo contesto, non era necessario alcuno sforzo particolare per sviluppare un sito web che fosse visualizzato correttamente su un qualsiasi dispositivo. La soluzione più semplice prevedeva di limitare la larghezza di una pagina al minimo comune denominatore. Un approccio popolare era quello di visualizzare le pagine web a 800 pixel di larghezza, centrate o giustificate a sinistra. Nel caso di schermi più grandi, poteva ricorrere qualche spazio bianco in più, nonostante ciò, le pagine venivano lette facilmente su ogni dispositivo.

Questa situazione è cambiata con l’arrivo dei dispositivi mobili e la significativa diversificazione dei dispositivi finali. Ciò perché gli schermi di smartphone e tablet differiscono da quelli desktop sotto diversi aspetti. Le dimensioni dei pixel svolgono ora un ruolo importante, inoltre con l’arrivo degli schermi retina è entrata in gioco la risoluzione fisica (pixel per pollice o ppi). Oltretutto, su questi dispositivi si naviga con le dita piuttosto che con il mouse. Oltre agli smartphone e ai tablet, sono arrivati sul mercato anche i grandi monitor ad alta risoluzione, il che significa che un sito web moderno deve funzionare su schermi con larghezze che variano dai 320 pixel agli oltre 4.000 pixel.

Un sito web responsive si adatta allo spazio disponibile su un determinato schermo. Il termine “area libera utilizzabile” è spesso applicato in questo contesto. Un sito web dovrebbe avere una buona visualizzazione su tutti i dispositivi e assicurare un’esperienza utente (UX) ottimale.

Il design responsive copre una vasta gamma di tecnologie e approcci combinati che permettono lo sviluppo di un sito web completamente responsive. Questi includono:

• Elementi HTML5 quali picture e attributi quali srcset e sizes
• Media query di CSS
• Unità CSS
• L’utilizzo di diversi asset da un’unica fonte
• L’approccio mobile first

Progettare un sito web responsive offre molti vantaggi. L’aspetto principale da considerare è l’esperienza utente (UX). In teoria, è possibile implementare una buona UX senza un design responsive, ma ciò richiederebbe un sito mobile apposito o l’uso di JavaScript. Tuttavia, questo tipo di approccio è significativamente più complesso rispetto al design responsive basato su CSS e richiede più manutenzione.

Il design di un sito web gioca un ruolo importante nella percezione dei visitatori riguardo alle informazioni presentate sul sito. Un buon design riflette l’identità dell’organizzazione che si nasconde dietro il sito web e aiuta a creare una connessione tra l’utente e il marchio. I visitatori dovrebbero avere un’esperienza positiva quando visitano un sito web. Di seguito presentiamo due esempi che dimostrano l’importanza del design responsive per l’esperienza utente:

• Immaginate che un titolo riempia l’intero schermo su un dispositivo mobile. Tuttavia, nella versione desktop, lo stesso titolo avente la stessa dimensione di carattere non risalta affatto. Per poter attirare l’attenzione del visitatore, sul desktop il titolo dovrebbe essere visualizzato in una dimensione maggiore.
• Immaginate un sito web per un blog, in cui appare una barra laterale accanto agli articoli. La barra laterale contiene dei link ad altri articoli con delle miniature. Nella versione desktop, la barra laterale limita la larghezza degli articoli, rendendo la pagina più facile da leggere. Tuttavia, su un dispositivo mobile, la barra laterale occuperebbe quasi la metà dello schermo. Il layout deve quindi essere diverso sui dispositivi mobili sui quali la barra laterale dovrà apparire sotto gli articoli.

Generalmente un sito web non responsive verrà visualizzato sullo schermo di un dispositivo mobile esattamente come è visualizzato su un desktop, sarà semplicemente più piccolo. Ciò costringe l’utente a ingrandire parti individuali della pagina per visualizzarle correttamente. Offrire una versione ottimizzata permette quindi un’esperienza utente migliore. Vi riportiamo alcuni esempi:

• Nella versione desktop, una voce su un sito web può essere selezionata usando il mouse. Tuttavia, sui dispositivi mobili si naviga con le dita. La voce da selezionare deve quindi essere più grande sulla versione mobile e bisognerà lasciare più spazio tra gli elementi.
• Immaginate di avere un modulo sul vostro sito. Normalmente grazie alla proprietà del padding, il testo contenuto nel modulo è facilmente leggibile e non tocca i bordi del modulo stesso. Un padding di 20 pixel a sinistra e a destra è la norma e si presenta bene su degli schermi grandi. Tuttavia, esportando questo formato sui dispositivi mobili, aventi una larghezza schermo di 320 pixel, si perde un ottavo dello spazio disponibile sullo schermo. Per evitare questo il padding dovrebbe essere ridotto sui dispositivi mobili.

Sempre più utenti navigano su Internet usando un dispositivo mobile. Scegliere di non utilizzare un sito web responsive comporta degli svantaggi significativi. I più noti sono:

• Tassi di conversione sfavorevoli e alta frequenza di rimbalzo a causa di un design subottimale e di una pessima esperienza utente.
• Un posizionamento svantaggioso nei motori di ricerca dovuta al fatto che Google riconosce quando, ad esempio, gli elementi del sito sono situati troppo vicini tra loro.
• Prestazioni subottimali a causa dei lunghi tempi di caricamento delle risorse non ottimizzate.

Un design responsive include vari approcci e tecnologie. Di norma esistono varie soluzioni per diversi scenari che possono sorgere. Lo sviluppo è ancora in una fase transitoria.

Fin dagli inizi di Internet, l’implementazione di layout complessi sui siti web ha costituito una scienza. L’HTML ha vari tipi di elementi che assumono comportamenti diversi a seconda del layout. In particolare, ci soffermiamo sui tipi di elemento block, inline e inline-block. Gli elementi block occupano tutta l’ampiezza disponibile e appaiono uno sopra l’altro. Gli elementi inline occupano solo lo spazio necessario per il loro contenuto e appaiono uno accanto all’altro. Nella tabella riportata di seguito troverete una panoramica degli elementi rilevanti nel design responsive:

L’implementazione di un layout richiede di norma che gli elementi block vengano disposti uno di fianco all’altro. Vi sono vari modi per raggiungere questo risultato. Prima dell’arrivo di CSS, i layout basati su tabelle erano la norma, ma con l’avvento di CSS sono stati introdotti i layout basati sui float. Al giorno d’oggi è possibile utilizzare CSS Flexbox per dei layout semplici basati su riga o su colonna, mentre per layout più complessi è necessario ricorrere a CSS Grid.

Vi proponiamo un esempio: immaginate una pagina con quattro elementi di anteprima per i post di un blog. Gli elementi di anteprima contengono ciascuno un’immagine, un’intestazione, un teaser e il pulsante “continua a leggere”. Con Flexbox, è possibile implementare facilmente il seguente layout responsive:

• Visualizzazione su uno schermo grande: tutti gli elementi dell’anteprima appaiono uno accanto all’altro in una fila. Ogni elemento occupa il 25% dello spazio disponibile.
• Visualizzazione su uno schermo medio: gli elementi appaiono uno accanto all’altro in due file contenenti ciascuno due elementi. Ogni elemento occupa il 50% dello spazio disponibile.
• Visualizzazione su uno schermo piccolo: tutti gli elementi appaiono uno sotto l’altro in una riga. Ogni elemento occupa il 100% dello spazio disponibile.

Di seguito riportiamo un esempio di implementazione con le classi del framework CSS responsive Tachyons. Per ogni contenitore di anteprima definiamo le classi “w-100 w-50-m w-25-l”. Tutti e quattro i contenitori di anteprima sono in un contenitore etichettato “flex flex-wrap”.

Di seguito riportiamo un esempio visivo:

A volte è più opportuno mostrare un elemento solo su schermi di una certa dimensione. Per esempio, i dati tabulari sono visualizzati come una tabella in HTML usando il tag <table>. Tuttavia, a seconda delle dimensioni della tabella, può essere difficile adattarla correttamente a un piccolo schermo. È qui che entra in gioco un semplice trucco: indicate all’utente di ruotare il proprio dispositivo per creare abbastanza spazio per la visualizzazione della tabella. Questo testo, naturalmente, dovrebbe apparire solo su dispositivi dallo schermo piccolo quando il dispositivo viene tenuto in verticale.

Gli elementi possono essere facilmente nascosti usando la proprietà di CSS display: none. Con una media query di CSS apposita, è possibile richiedere sia la larghezza dello schermo che l’orientamento del dispositivo usato. Il testo sopracitato apparirà solo se la larghezza dello schermo è inferiore a 640 pixel quando il contenuto viene visualizzato verticalmente. Altrimenti, l’elemento dovrebbe essere nascosto:

Quando questo viene combinato con il seguente codice HTML, la funzione è completa:

Per un’esperienza utente ottimale, la dimensione del carattere degli elementi di testo dovrebbe essere adattata allo schermo utilizzato. Esistono diverse tecniche per il design responsive che consentono l’implementazione di questa funzione.

La componente di base è l’elemento rem (“root element”) di CSS, che collega proporzionalmente la dimensione del carattere di un elemento all’elemento HTML “root”. Per scalare coerentemente il testo, potete semplicemente adattare la dimensione del carattere dell’elemento “root” usando i breakpoint di CSS.

Ancora una volta, vi proponiamo un esempio. Per prima cosa, in conformità con l’approccio mobile first, bisognerà impostare le dimensioni dei caratteri per i piccoli schermi:

A questo punto, sarà necessario adattare la dimensione del carattere dell’elemento HTML a degli schermi più grandi. Dato che la dimensione delle intestazioni H1 è definita tramite rem, sarà scalata automaticamente:

Un altro approccio molto diffuso consiste nell’utilizzare le unità vh e vw di CSS per poter adattare in maniera più fluida la dimensione del carattere all’altezza o alla larghezza dello schermo. In teoria, quest’approccio non richiede dei breakpoint, tuttavia, alle volte può comportare la visualizzazione del testo con dimensioni minuscole su schermi piccoli. In questo caso, è possibile implementare breakpoint selettivi o utilizzare la funzione calc di CSS per impostare una dimensione minima del carattere.

Per ottimizzare le intestazioni che riempiono l’intero schermo sui piccoli dispositivi è disponibile un approccio che non usa i CSS. Le intestazioni dovrebbero attirare l’attenzione. Ciò aiuta l’utente a intuire il contenuto di una data pagina in modo veloce e chiaro. Tuttavia, può a volte comportare dei problemi di visualizzazione, soprattutto quando si tratta di parole più lunghe. Con le entità HTML “non-breaking space” (&nbsp;) e “soft hyphen” (&shy;­), è possibile definire il punto in cui una data parola dovrebbe essere divisa.

In aggiunta al layout e alla tipografia, un’altra componente importante del design responsive sono le immagini responsive. Ovviamente non avrebbe senso caricare un’immagine con una lunghezza di 1.920 pixel su uno schermo largo solo 400 pixel. Per questo motivo, innanzitutto l’immagine deve essere ridimensionata nel browser, utilizzando una discreta quantità di potenza di calcolo. Per di più, la dimensione del file dell’immagine aumenta quadraticamente con la dimensione del suo lato più lungo.

Un’immagine di dimensioni di 1.920x1.080 pixel occuperà uno spazio di quattro volte superiore rispetto a una di 960x540 pixel. Questo, a sua volta, significa che sarà necessario molto più tempo per caricare l’immagine su un dispositivo mobile. In conclusione, è chiaro che le immagini non responsive hanno un effetto significativamente negativo sulle prestazioni e l’usabilità di un sito web.

L’introduzione di HTML5 ha portato con sé due nuovi attributi per il tag . Gli attributi srcset e sizes sono usati per definire diversi file per un’immagine, chiamati anche “asset”. Ogni singolo file è collegato alla query di una caratteristica di CSS media. In questo modo il browser può caricare un’immagine dalla lista degli asset disponibili, ottimale per il dispositivo a portata di mano.

Di seguito vi presentiamo un breve esempio. Il codice HTML qui riportato definisce un’immagine per la quale vi sono due asset definiti tramite srcset: uno con una lunghezza di 480 pixel e l’altro con una lunghezza di 800 pixel. Tramite l’utilizzo di sizes viene anche determinato che l’immagine da 480 pixel dovrebbe essere usata su schermi con una larghezza fino a 600 pixel. Altrimenti, il browser dovrebbe caricare l’immagine da 800 pixel.

Tradizionalmente, gli schermi si presentavano con una larghezza maggiore dell’altezza. Al giorno d’oggi invece, gli schermi degli smartphone sono più alti che larghi. Pertanto, le immagini in formato orizzontale appaiono relativamente piccole su questi schermi o su qualsiasi altro schermo in formato verticale. Per un risultato migliore, sarebbe opportuno utilizzare un’immagine quadrata o verticale ritagliata da voi. La scelta dei vari tagli di un’immagine si chiama “art direction”. Può essere implementata con l’elemento HTML5 <picture>, il quale permette di definire diverse immagini equivalenti per vari casi d’uso.

Di seguito riportiamo un ultimo esempio. Il seguente codice HTML definisce un elemento <picture> che imposta vari asset sia per il formato orizzontale che per quello verticale. In entrambi i casi, esistono diverse versioni ottimizzate per rispondere a delle dimensioni di schermo variabili:

Tradizionalmente, la navigazione di un sito è mostrata nella parte superiore della pagina, di solito sotto forma di lista orizzontale dei menu con dei sottomenu che si aprono al passaggio del mouse. Questo tipo di navigazione è chiaramente inadatto per i dispositivi mobili, dato che non vi è abbastanza spazio e non è possibile utilizzare il mouse.

Ci sono vari approcci per affrontare la navigazione sui dispositivi mobili. Sono tutti poco ingombranti e non richiedono l’utilizzo di un mouse. L’attenzione dell’utente è spesso diretta alla navigazione con un’animazione. Gli approcci più popolari per una navigazione responsive includono:

• L’icona del “menu hamburger” (le tre linee orizzontali parallele): questo elemento viene selezionato per attivare il menu.
• La navigazione “off canvas”: il menu scorre dal bordo dello schermo e spinge il contenuto corrente dello schermo su un lato.

Di seguito riportiamo un esempio visivo: