Cos’è un design re­spon­si­ve?

Un design re­spon­si­ve è un approccio allo sviluppo di siti web che ne permette una vi­sua­liz­za­zio­ne ottimale su vari tipi di di­spo­si­ti­vi finali. Il termine design re­spon­si­ve è con­tem­po­ra­neo a quello di web mobile e ha acquisito maggiore im­por­tan­za a partire dal 2013.

Prima dell’arrivo del web mobile, il panorama dei di­spo­si­ti­vi finali abilitati a Internet era re­la­ti­va­men­te omogeneo. Questo com­pren­de­va computer portatili e desktop, i quali pre­sen­ta­va­no forti si­mi­li­tu­di­ni in relazione ai mezzi di input e output. Entrambi i tipi di di­spo­si­ti­vi mettevano a di­spo­si­zio­ne 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 ne­ces­sa­rio alcuno sforzo par­ti­co­la­re per svi­lup­pa­re un sito web che fosse vi­sua­liz­za­to cor­ret­ta­men­te su un qualsiasi di­spo­si­ti­vo. La soluzione più semplice prevedeva di limitare la larghezza di una pagina al minimo comune de­no­mi­na­to­re. Un approccio popolare era quello di vi­sua­liz­za­re le pagine web a 800 pixel di larghezza, centrate o giu­sti­fi­ca­te a sinistra. Nel caso di schermi più grandi, poteva ricorrere qualche spazio bianco in più, no­no­stan­te ciò, le pagine venivano lette fa­cil­men­te su ogni di­spo­si­ti­vo.

Questa si­tua­zio­ne è cambiata con l’arrivo dei di­spo­si­ti­vi mobili e la si­gni­fi­ca­ti­va di­ver­si­fi­ca­zio­ne dei di­spo­si­ti­vi finali. Ciò perché gli schermi di smart­pho­ne e tablet dif­fe­ri­sco­no da quelli desktop sotto diversi aspetti. Le di­men­sio­ni dei pixel svolgono ora un ruolo im­por­tan­te, inoltre con l’arrivo degli schermi retina è entrata in gioco la ri­so­lu­zio­ne fisica (pixel per pollice o ppi). Ol­tre­tut­to, su questi di­spo­si­ti­vi si naviga con le dita piuttosto che con il mouse. Oltre agli smart­pho­ne e ai tablet, sono arrivati sul mercato anche i grandi monitor ad alta ri­so­lu­zio­ne, il che significa che un sito web moderno deve fun­zio­na­re su schermi con larghezze che variano dai 320 pixel agli oltre 4.000 pixel.

Un sito web re­spon­si­ve si adatta allo spazio di­spo­ni­bi­le su un de­ter­mi­na­to schermo. Il termine “area libera uti­liz­za­bi­le” è spesso applicato in questo contesto. Un sito web dovrebbe avere una buona vi­sua­liz­za­zio­ne su tutti i di­spo­si­ti­vi e as­si­cu­ra­re un’espe­rien­za utente (UX) ottimale.

Il design re­spon­si­ve copre una vasta gamma di tec­no­lo­gie e approcci combinati che per­met­to­no lo sviluppo di un sito web com­ple­ta­men­te re­spon­si­ve. 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

Pro­get­ta­re un sito web re­spon­si­ve offre molti vantaggi. L’aspetto prin­ci­pa­le da con­si­de­ra­re è l’espe­rien­za utente (UX). In teoria, è possibile im­ple­men­ta­re una buona UX senza un design re­spon­si­ve, ma ciò ri­chie­de­reb­be un sito mobile apposito o l’uso di Ja­va­Script. Tuttavia, questo tipo di approccio è si­gni­fi­ca­ti­va­men­te più complesso rispetto al design re­spon­si­ve basato su CSS e richiede più ma­nu­ten­zio­ne.

Il design di un sito web gioca un ruolo im­por­tan­te nella per­ce­zio­ne dei vi­si­ta­to­ri riguardo alle in­for­ma­zio­ni pre­sen­ta­te sul sito. Un buon design riflette l’identità dell’or­ga­niz­za­zio­ne che si nasconde dietro il sito web e aiuta a creare una con­nes­sio­ne tra l’utente e il marchio. I vi­si­ta­to­ri do­vreb­be­ro avere un’espe­rien­za positiva quando visitano un sito web. Di seguito pre­sen­tia­mo due esempi che di­mo­stra­no l’im­por­tan­za del design re­spon­si­ve per l’espe­rien­za utente:

• Im­ma­gi­na­te che un titolo riempia l’intero schermo su un di­spo­si­ti­vo mobile. Tuttavia, nella versione desktop, lo stesso titolo avente la stessa di­men­sio­ne di carattere non risalta affatto. Per poter attirare l’at­ten­zio­ne del vi­si­ta­to­re, sul desktop il titolo dovrebbe essere vi­sua­liz­za­to in una di­men­sio­ne maggiore.
• Im­ma­gi­na­te 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 di­spo­si­ti­vo mobile, la barra laterale oc­cu­pe­reb­be quasi la metà dello schermo. Il layout deve quindi essere diverso sui di­spo­si­ti­vi mobili sui quali la barra laterale dovrà apparire sotto gli articoli.

Ge­ne­ral­men­te un sito web non re­spon­si­ve verrà vi­sua­liz­za­to sullo schermo di un di­spo­si­ti­vo mobile esat­ta­men­te come è vi­sua­liz­za­to su un desktop, sarà sem­pli­ce­men­te più piccolo. Ciò costringe l’utente a in­gran­di­re parti in­di­vi­dua­li della pagina per vi­sua­liz­zar­le cor­ret­ta­men­te. Offrire una versione ot­ti­miz­za­ta permette quindi un’espe­rien­za utente migliore. Vi ri­por­tia­mo alcuni esempi:

• Nella versione desktop, una voce su un sito web può essere se­le­zio­na­ta usando il mouse. Tuttavia, sui di­spo­si­ti­vi mobili si naviga con le dita. La voce da se­le­zio­na­re deve quindi essere più grande sulla versione mobile e bisognerà lasciare più spazio tra gli elementi.
• Im­ma­gi­na­te di avere un modulo sul vostro sito. Nor­mal­men­te grazie alla proprietà del padding, il testo contenuto nel modulo è fa­cil­men­te 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, espor­tan­do questo formato sui di­spo­si­ti­vi mobili, aventi una larghezza schermo di 320 pixel, si perde un ottavo dello spazio di­spo­ni­bi­le sullo schermo. Per evitare questo il padding dovrebbe essere ridotto sui di­spo­si­ti­vi mobili.

Sempre più utenti navigano su Internet usando un di­spo­si­ti­vo mobile. Scegliere di non uti­liz­za­re un sito web re­spon­si­ve comporta degli svantaggi si­gni­fi­ca­ti­vi. I più noti sono:

• Tassi di con­ver­sio­ne sfa­vo­re­vo­li e alta frequenza di rimbalzo a causa di un design su­bot­ti­ma­le e di una pessima espe­rien­za utente.
• Un po­si­zio­na­men­to svan­tag­gio­so nei motori di ricerca dovuta al fatto che Google riconosce quando, ad esempio, gli elementi del sito sono situati troppo vicini tra loro.
• Pre­sta­zio­ni su­bot­ti­ma­li a causa dei lunghi tempi di ca­ri­ca­men­to delle risorse non ot­ti­miz­za­te.

Un design re­spon­si­ve include vari approcci e tec­no­lo­gie. Di norma esistono varie soluzioni per diversi scenari che possono sorgere. Lo sviluppo è ancora in una fase tran­si­to­ria.

Fin dagli inizi di Internet, l’im­ple­men­ta­zio­ne di layout complessi sui siti web ha co­sti­tui­to una scienza. L’HTML ha vari tipi di elementi che assumono com­por­ta­men­ti diversi a seconda del layout. In par­ti­co­la­re, ci sof­fer­mia­mo sui tipi di elemento block, inline e inline-block. Gli elementi block occupano tutta l’ampiezza di­spo­ni­bi­le e appaiono uno sopra l’altro. Gli elementi inline occupano solo lo spazio ne­ces­sa­rio per il loro contenuto e appaiono uno accanto all’altro. Nella tabella riportata di seguito troverete una pa­no­ra­mi­ca degli elementi rilevanti nel design re­spon­si­ve:

L’im­ple­men­ta­zio­ne di un layout richiede di norma che gli elementi block vengano disposti uno di fianco all’altro. Vi sono vari modi per rag­giun­ge­re questo risultato. Prima dell’arrivo di CSS, i layout basati su tabelle erano la norma, ma con l’avvento di CSS sono stati in­tro­dot­ti i layout basati sui float. Al giorno d’oggi è possibile uti­liz­za­re CSS Flexbox per dei layout semplici basati su riga o su colonna, mentre per layout più complessi è ne­ces­sa­rio ricorrere a CSS Grid.

Vi pro­po­nia­mo un esempio: im­ma­gi­na­te una pagina con quattro elementi di anteprima per i post di un blog. Gli elementi di anteprima con­ten­go­no ciascuno un’immagine, un’in­te­sta­zio­ne, un teaser e il pulsante “continua a leggere”. Con Flexbox, è possibile im­ple­men­ta­re fa­cil­men­te il seguente layout re­spon­si­ve:

• Vi­sua­liz­za­zio­ne su uno schermo grande: tutti gli elementi dell’anteprima appaiono uno accanto all’altro in una fila. Ogni elemento occupa il 25% dello spazio di­spo­ni­bi­le.
• Vi­sua­liz­za­zio­ne su uno schermo medio: gli elementi appaiono uno accanto all’altro in due file con­te­nen­ti ciascuno due elementi. Ogni elemento occupa il 50% dello spazio di­spo­ni­bi­le.
• Vi­sua­liz­za­zio­ne su uno schermo piccolo: tutti gli elementi appaiono uno sotto l’altro in una riga. Ogni elemento occupa il 100% dello spazio di­spo­ni­bi­le.

Di seguito ri­por­tia­mo un esempio di im­ple­men­ta­zio­ne con le classi del framework CSS re­spon­si­ve Tachyons. Per ogni con­te­ni­to­re di anteprima definiamo le classi “w-100 w-50-m w-25-l”. Tutti e quattro i con­te­ni­to­ri di anteprima sono in un con­te­ni­to­re eti­chet­ta­to “flex flex-wrap”.

Di seguito ri­por­tia­mo un esempio visivo:

A volte è più opportuno mostrare un elemento solo su schermi di una certa di­men­sio­ne. Per esempio, i dati tabulari sono vi­sua­liz­za­ti come una tabella in HTML usando il tag <table>. Tuttavia, a seconda delle di­men­sio­ni della tabella, può essere difficile adattarla cor­ret­ta­men­te a un piccolo schermo. È qui che entra in gioco un semplice trucco: indicate all’utente di ruotare il proprio di­spo­si­ti­vo per creare ab­ba­stan­za spazio per la vi­sua­liz­za­zio­ne della tabella. Questo testo, na­tu­ral­men­te, dovrebbe apparire solo su di­spo­si­ti­vi dallo schermo piccolo quando il di­spo­si­ti­vo viene tenuto in verticale.

Gli elementi possono essere fa­cil­men­te nascosti usando la proprietà di CSS display: none. Con una media query di CSS apposita, è possibile ri­chie­de­re sia la larghezza dello schermo che l’orien­ta­men­to del di­spo­si­ti­vo usato. Il testo so­pra­ci­ta­to apparirà solo se la larghezza dello schermo è inferiore a 640 pixel quando il contenuto viene vi­sua­liz­za­to ver­ti­cal­men­te. Al­tri­men­ti, l’elemento dovrebbe essere nascosto:

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

Per un’espe­rien­za utente ottimale, la di­men­sio­ne del carattere degli elementi di testo dovrebbe essere adattata allo schermo uti­liz­za­to. Esistono diverse tecniche per il design re­spon­si­ve che con­sen­to­no l’im­ple­men­ta­zio­ne di questa funzione.

La com­po­nen­te di base è l’elemento rem (“root element”) di CSS, che collega pro­por­zio­nal­men­te la di­men­sio­ne del carattere di un elemento all’elemento HTML “root”. Per scalare coe­ren­te­men­te il testo, potete sem­pli­ce­men­te adattare la di­men­sio­ne del carattere dell’elemento “root” usando i brea­k­point di CSS.

Ancora una volta, vi pro­po­nia­mo un esempio. Per prima cosa, in con­for­mi­tà con l’approccio mobile first, bisognerà impostare le di­men­sio­ni dei caratteri per i piccoli schermi:

A questo punto, sarà ne­ces­sa­rio adattare la di­men­sio­ne del carattere dell’elemento HTML a degli schermi più grandi. Dato che la di­men­sio­ne delle in­te­sta­zio­ni H1 è definita tramite rem, sarà scalata au­to­ma­ti­ca­men­te:

Un altro approccio molto diffuso consiste nell’uti­liz­za­re le unità vh e vw di CSS per poter adattare in maniera più fluida la di­men­sio­ne del carattere all’altezza o alla larghezza dello schermo. In teoria, quest’approccio non richiede dei brea­k­point, tuttavia, alle volte può com­por­ta­re la vi­sua­liz­za­zio­ne del testo con di­men­sio­ni minuscole su schermi piccoli. In questo caso, è possibile im­ple­men­ta­re brea­k­point selettivi o uti­liz­za­re la funzione calc di CSS per impostare una di­men­sio­ne minima del carattere.

Per ot­ti­miz­za­re le in­te­sta­zio­ni che riempiono l’intero schermo sui piccoli di­spo­si­ti­vi è di­spo­ni­bi­le un approccio che non usa i CSS. Le in­te­sta­zio­ni do­vreb­be­ro attirare l’at­ten­zio­ne. Ciò aiuta l’utente a intuire il contenuto di una data pagina in modo veloce e chiaro. Tuttavia, può a volte com­por­ta­re dei problemi di vi­sua­liz­za­zio­ne, so­prat­tut­to 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 ti­po­gra­fia, un’altra com­po­nen­te im­por­tan­te del design re­spon­si­ve sono le immagini re­spon­si­ve. Ov­via­men­te non avrebbe senso caricare un’immagine con una lunghezza di 1.920 pixel su uno schermo largo solo 400 pixel. Per questo motivo, in­nan­zi­tut­to l’immagine deve essere ri­di­men­sio­na­ta nel browser, uti­liz­zan­do una discreta quantità di potenza di calcolo. Per di più, la di­men­sio­ne del file dell’immagine aumenta qua­dra­ti­ca­men­te con la di­men­sio­ne del suo lato più lungo.

Un’immagine di di­men­sio­ni 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à ne­ces­sa­rio molto più tempo per caricare l’immagine su un di­spo­si­ti­vo mobile. In con­clu­sio­ne, è chiaro che le immagini non re­spon­si­ve hanno un effetto si­gni­fi­ca­ti­va­men­te negativo sulle pre­sta­zio­ni e l’usabilità di un sito web.

L’in­tro­du­zio­ne 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 ca­rat­te­ri­sti­ca di CSS media. In questo modo il browser può caricare un’immagine dalla lista degli asset di­spo­ni­bi­li, ottimale per il di­spo­si­ti­vo a portata di mano.

Di seguito vi pre­sen­tia­mo 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 de­ter­mi­na­to che l’immagine da 480 pixel dovrebbe essere usata su schermi con una larghezza fino a 600 pixel. Al­tri­men­ti, il browser dovrebbe caricare l’immagine da 800 pixel.

Tra­di­zio­nal­men­te, gli schermi si pre­sen­ta­va­no con una larghezza maggiore dell’altezza. Al giorno d’oggi invece, gli schermi degli smart­pho­ne sono più alti che larghi. Pertanto, le immagini in formato oriz­zon­ta­le appaiono re­la­ti­va­men­te piccole su questi schermi o su qualsiasi altro schermo in formato verticale. Per un risultato migliore, sarebbe opportuno uti­liz­za­re un’immagine quadrata o verticale ri­ta­glia­ta da voi. La scelta dei vari tagli di un’immagine si chiama “art direction”. Può essere im­ple­men­ta­ta con l’elemento HTML5 <picture>, il quale permette di definire diverse immagini equi­va­len­ti per vari casi d’uso.

Di seguito ri­por­tia­mo un ultimo esempio. Il seguente codice HTML definisce un elemento <picture> che imposta vari asset sia per il formato oriz­zon­ta­le che per quello verticale. In entrambi i casi, esistono diverse versioni ot­ti­miz­za­te per ri­spon­de­re a delle di­men­sio­ni di schermo variabili:

Tra­di­zio­nal­men­te, la na­vi­ga­zio­ne di un sito è mostrata nella parte superiore della pagina, di solito sotto forma di lista oriz­zon­ta­le dei menu con dei sottomenu che si aprono al passaggio del mouse. Questo tipo di na­vi­ga­zio­ne è chia­ra­men­te inadatto per i di­spo­si­ti­vi mobili, dato che non vi è ab­ba­stan­za spazio e non è possibile uti­liz­za­re il mouse.

Ci sono vari approcci per af­fron­ta­re la na­vi­ga­zio­ne sui di­spo­si­ti­vi mobili. Sono tutti poco in­gom­bran­ti e non ri­chie­do­no l’utilizzo di un mouse. L’at­ten­zio­ne dell’utente è spesso diretta alla na­vi­ga­zio­ne con un’ani­ma­zio­ne. Gli approcci più popolari per una na­vi­ga­zio­ne re­spon­si­ve includono:

• L’icona del “menu hamburger” (le tre linee oriz­zon­ta­li parallele): questo elemento viene se­le­zio­na­to per attivare il menu.
• La na­vi­ga­zio­ne “off canvas”: il menu scorre dal bordo dello schermo e spinge il contenuto corrente dello schermo su un lato.

Di seguito ri­por­tia­mo un esempio visivo: