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 si è affermato come approccio standard nel web design.

Design re­spon­si­ve: una pa­no­ra­mi­ca

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. 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. Mentre gli schermi dei primi di­spo­si­ti­vi con accesso a internet erano simili tra loro, gli schermi delle tec­no­lo­gie moderne come smart­pho­ne, tablet e simili dif­fe­ri­sco­no sotto molti aspetti: i di­spo­si­ti­vi attuali coprono larghezze dello schermo da 320 pixel fino a ben oltre 4.000 pixel. Oltre alle semplici di­men­sio­ni in pixel, è però ne­ces­sa­rio con­si­de­ra­re anche la singola ri­so­lu­zio­ne fisica in “pixels per inch” (ppi) dei display Retina, così come il rapporto dei pixel in base al di­spo­si­ti­vo, device pixel ratio (DPR). Inoltre, la na­vi­ga­zio­ne non avviene ne­ces­sa­ria­men­te con il mouse, ma anche con il dito.

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

Oltre ai classici smart­pho­ne e tablet, stanno ac­qui­sen­do sempre più im­por­tan­za i di­spo­si­ti­vi pie­ghe­vo­li e con doppio schermo. Questi di­spo­si­ti­vi possono mo­di­fi­ca­re di­na­mi­ca­men­te la su­per­fi­cie del display, ad esempio quando vengono aperti o quando si passa da una vi­sua­liz­za­zio­ne a singolo schermo a una a schermo diviso. Per il web design re­spon­si­ve questo significa che i layout non devono solo adattarsi a diverse di­men­sio­ni dello schermo, ma anche a im­prov­vi­si cam­bia­men­ti dell’area di­spo­ni­bi­le durante l’utilizzo. I siti web moderni e re­spon­si­ve do­vreb­be­ro quindi essere ab­ba­stan­za fles­si­bi­li da pre­sen­ta­re i contenuti in modo coerente e facile da usare anche al variare dei formati fisici del di­spo­si­ti­vo.

Perché si dovrebbe pro­get­ta­re un sito web re­spon­si­ve?

Lo sviluppo di 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 delle diverse versioni del sito.

Un sito web re­spon­si­ve per un design ottimale

Il design di un sito web gioca un ruolo im­por­tan­te nella per­ce­zio­ne dei vi­si­ta­to­ri e delle vi­si­ta­tri­ci 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 e le vi­si­ta­tri­ci 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:

• Immagina 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 o della vi­si­ta­tri­ce, sul desktop il titolo dovrebbe essere vi­sua­liz­za­to in una di­men­sio­ne maggiore.
• Immagina 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, questo elemento 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.

Un sito web re­spon­si­ve per un’espe­rien­za utente (UX) ottimale

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 alcune parti 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. Di seguito 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.
• Immagina di avere un modulo sul tuo sito. Nor­mal­men­te grazie alla proprietà CSS del margine interno (padding), il testo contenuto nel modulo è fa­cil­men­te leggibile e non tocca i bordi del modulo stesso. Un margine interno di 20 pixel a sinistra e a destra è la norma e si presenta bene su degli schermi grandi. Tuttavia, su un di­spo­si­ti­vo mobile con soli 320 pixel di larghezza dello schermo si perdono 40 dei 320 pixel (cioè un ottavo della larghezza). Se il modulo ha anche un margine esterno (margin), diciamo altri 20 pixel per lato, sul di­spo­si­ti­vo mobile va perso il 25 percento dello spazio di­spo­ni­bi­le. Per evitarlo, sui di­spo­si­ti­vi mobili i margini an­dreb­be­ro ridotti.

Sito web non re­spon­si­ve: quali sono le possibili con­se­guen­ze?

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 poiché Google valuta, tra le altre cose, la facilità d’uso dai di­spo­si­ti­vi mobili, i segnali web es­sen­zia­li e le di­men­sio­ni degli elementi touch.
• Pre­sta­zio­ni scarse dovute al ca­ri­ca­men­to di risorse non ot­ti­miz­za­te (mi­su­ra­bi­li, ad esempio, tramite Largest Con­tent­ful Paint (LCP) e In­te­rac­tion to Next Paint (INP).

Segnali web es­sen­zia­li: metriche dell’espe­rien­za utente

Per valutare in modo oggettivo la reale espe­rien­za utente, Google utilizza i co­sid­det­ti Segnali web es­sen­zia­li. Si tratta di metriche di per­for­man­ce stan­dar­diz­za­te che misurano la velocità di ca­ri­ca­men­to dei contenuti, la stabilità del layout e la reat­ti­vi­tà di un sito web agli input dell’utente. I prin­ci­pa­li segnali web es­sen­zia­li sono:

• Largest Con­tent­ful Paint (LCP): misura quanto tempo impiega il più grande elemento di contenuto visibile a essere ren­de­riz­za­to (obiettivo: ≤ 2,5 s)
• In­te­rac­tion to Next Paint (INP): misura la reat­ti­vi­tà di una pagina alle in­te­ra­zio­ni degli utenti (obiettivo: ≤ 200 ms)
• Cu­mu­la­ti­ve Layout Shift (CLS): valuta se i contenuti si spostano in modo im­pre­vi­sto durante il ca­ri­ca­men­to (obiettivo: ≤ 0,1)

I siti web non pro­get­ta­ti in modo re­spon­si­ve ottengono spesso risultati peggiori in questi valori, ad esempio a causa di file di immagini troppo grandi, contenuti caricati in un secondo momento o adat­ta­men­ti del layout che non sono ot­ti­miz­za­ti per i di­spo­si­ti­vi mobili.

Strumenti per l’analisi dei segnali web es­sen­zia­li

I segnali web es­sen­zia­li possono essere misurati con diversi strumenti. I seguenti sono par­ti­co­lar­men­te diffusi:

• Google PageSpeed Insights: analizza singole pagine e combina i dati sul campo degli utenti reali con i dati di la­bo­ra­to­rio
• Google Lighthou­se: integrato negli Strumenti per svi­lup­pa­to­ri di Chrome e adatto ad analisi det­ta­glia­te delle pre­sta­zio­ni
• Google Search Console: mostra dati aggregati dei segnali web es­sen­zia­li per interi siti web e iden­ti­fi­ca gli URL pro­ble­ma­ti­ci

Questi strumenti aiutano a in­di­vi­dua­re in modo mirato i punti deboli e a ve­ri­fi­ca­re come gli adat­ta­men­ti re­spon­si­ve in­flui­sca­no con­cre­ta­men­te sull’espe­rien­za utente.

Quali aspetti dello sviluppo web sono in­fluen­za­ti da un design re­spon­si­ve?

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 continua evo­lu­zio­ne.

Layout re­spon­si­ve

Fin dagli albori di internet, l’im­ple­men­ta­zio­ne di layout complessi sui siti web ha co­sti­tui­to una scienza. HTML ha vari tipi di elementi: block, inline e inline-block. Gli elementi a blocco occupano l’intera larghezza di­spo­ni­bi­le e si di­spon­go­no uno sotto l’altro. Gli elementi inline occupano solo la larghezza ef­fet­ti­va­men­te richiesta dal loro contenuto e si po­si­zio­na­no uno accanto all’altro. Di seguito una pa­no­ra­mi­ca dei tipi di elementi più im­por­tan­ti per un web design re­spon­si­ve:

In passato, per disporre i contenuti uno accanto all’altro si uti­liz­za­va­no layout basati su tabelle o float. Oggi questi approcci sono con­si­de­ra­ti superati. I layout re­spon­si­ve moderni si basano quasi esclu­si­va­men­te su Flexbox CSS e CSS Grid. Flexbox è par­ti­co­lar­men­te adatto a layout mo­no­di­men­sio­na­li, come liste oriz­zon­ta­li o verticali, mentre CSS Grid viene uti­liz­za­to per strutture di pagina complesse e bi­di­men­sio­na­li.

Un esempio al riguardo: immagina 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.

Layout re­spon­si­ve con CSS Grid e media query

I layout moderni e re­spon­si­ve oggi possono essere rea­liz­za­ti in molti casi senza ricorrere a framework CSS ag­giun­ti­vi. I moduli di layout nativi come CSS Grid e Flexbox sono am­pia­men­te sup­por­ta­ti e per­met­to­no strutture fles­si­bi­li e facili da ma­nu­te­ne­re. Uno strumento centrale in questo contesto sono le CSS media queries. Grazie a queste è possibile applicare regole CSS in base alle ca­rat­te­ri­sti­che del di­spo­si­ti­vo di output, in par­ti­co­la­re alla larghezza del viewport. Le media query ri­spon­do­no quindi alla domanda in quali con­di­zio­ni un de­ter­mi­na­to layout debba essere attivo, ad esempio a partire da una certa di­men­sio­ne dello schermo o con un par­ti­co­la­re orien­ta­men­to del di­spo­si­ti­vo.

Con­si­de­ria­mo l’esempio di una pagina con quattro elementi di anteprima per gli articoli del blog. Ogni elemento contiene un’immagine di anteprima, un titolo, un breve testo e un link all’articolo completo. L’obiettivo è variare il numero di elementi af­fian­ca­ti in base alla larghezza di­spo­ni­bi­le dello schermo.

Struttura HTML:

<div class="blog-grid">
    <article class="blog-preview">…</article>
    <article class="blog-preview">…</article>
    <article class="blog-preview">…</article>
    <article class="blog-preview">…</article>
</div>

Im­ple­men­ta­zio­ne CSS con CSS Grid:

.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
/ *Schermi di medie dimensioni* /
@media screen and (min-width: 600px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/ *Schermi di grandi dimensioni* /
@media screen and (min-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

Senza media query viene in­nan­zi­tut­to definito un layout semplice per i piccoli schermi. A partire da una larghezza di 600 pixel vengono vi­sua­liz­za­te due colonne, da 1.024 pixel su quattro. Questo approccio segue il principio mobile first e ga­ran­ti­sce che i contenuti restino chiari sui display ridotti e siano sfruttati al meglio sugli schermi più grandi. Le media queries rea­gi­sco­no sempre al viewport, cioè alla di­men­sio­ne della finestra del browser o dello schermo.

Container Queries: re­spon­si­ve design a livello di com­po­nen­te

Mentre le media query rea­gi­sco­no alla di­men­sio­ne del viewport, le CSS container query in­ter­ven­go­no in un altro punto. Per­met­to­no di applicare gli stili in base alla di­men­sio­ne di un con­te­ni­to­re cir­co­stan­te, in­di­pen­den­te­men­te dalla reale di­men­sio­ne dello schermo. In questo modo gli elementi non rea­gi­sco­no più all’intera finestra del browser, ma allo spazio che hanno ef­fet­ti­va­men­te a di­spo­si­zio­ne all’interno di un layout. Questo è par­ti­co­lar­men­te rilevante nei layout modulari, in cui i com­po­nen­ti vengono uti­liz­za­ti più volte e in contesti dif­fe­ren­ti, ad esempio sia nella stretta barra laterale sia nell’ampio contenuto prin­ci­pa­le. Con le sole media query è possibile rap­pre­sen­ta­re questi scenari solo in modo limitato.

Un esempio tipico è un elemento di anteprima per articoli. Se si trovano in una barra laterale stretta, immagine e testo devono essere vi­sua­liz­za­ti uno sotto l’altro. Nell’area prin­ci­pa­le, con più spazio, immagine e testo possono invece essere mostrati af­fian­ca­ti. Le container queries con­sen­to­no proprio questo adat­ta­men­to in base al contesto, senza dover definire brea­k­point ag­giun­ti­vi per ogni variante di layout. Per prima cosa il con­te­ni­to­re padre viene definito come co­sid­det­to “query container”:

Im­ple­men­ta­zio­ne CSS con CSS Grid:

.preview-container {
    container-type: inline-size;
}

Il com­po­nen­te di anteprima riceve un layout di base semplice, ot­ti­miz­za­to per spazi ridotti:

.article-preview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

Suc­ces­si­va­men­te, tramite una container query, viene definito che il layout cambia non appena il con­te­ni­to­re supera una de­ter­mi­na­ta larghezza:

@container (min-width: 500px) {
    .article-preview {
        flex-direction: row;
    }
}

Il com­po­nen­te si adatta così au­to­ma­ti­ca­men­te allo spazio di­spo­ni­bi­le del suo con­te­ni­to­re. Che si trovi in una barra laterale o nell’area prin­ci­pa­le non ha più im­por­tan­za. Ciò che conta è solo la larghezza del con­te­ni­to­re, non quella del viewport. Le container query sup­por­ta­no quindi un approccio basato sui com­po­nen­ti nel design re­spon­si­ve e integrano in modo sensato le classiche media query. Nei progetti moderni le due tecniche vengono spesso combinate, per rea­liz­za­re sia cambi di layout globali sia adat­ta­men­ti molto granulari delle singole com­po­nen­ti.

Ti­po­gra­fia e contenuto del testo re­spon­si­ve

Per un’espe­rien­za utente ottimale, la di­men­sio­ne dei caratteri degli elementi testuali di un sito web deve essere adattata alla su­per­fi­cie dello schermo di­spo­ni­bi­le e ai contesti d’uso. Oltre alla pura leg­gi­bi­li­tà, svolgono un ruolo centrale anche fattori come sca­la­bi­li­tà, ac­ces­si­bi­li­tà e stabilità del layout. A questo scopo, nel web design re­spon­si­ve vengono uti­liz­za­te diverse tecniche ti­po­gra­fi­che.

La com­po­nen­te di base è l’elemento CSS rem (“root element”), 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, puoi sem­pli­ce­men­te adattare la di­men­sio­ne del carattere dell’elemento root usando i brea­k­point di CSS.

html {
    font-size: 16px;
}
h1 {
    font-size: 3rem;
}

Questo approccio mobile first si può combinare in modo efficace con le media query per aumentare mo­de­ra­ta­men­te la di­men­sio­ne base del testo sugli schermi più grandi:

@media screen and (min-width: 30em) {
    html {
        font-size: 18px;
    }
}

Nei layout moderni si utilizza sempre più spesso una ti­po­gra­fia fluida, che si adatta in modo continuo allo spazio di­spo­ni­bi­le. A questo scopo oggi si pre­fe­ri­sce usare la funzione CSS clamp(). Essa consente di definire una di­men­sio­ne minima, una preferita e una massima del font, senza bisogno di brea­k­point ag­giun­ti­vi.

h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
}

In questo modo il testo rimane ben leggibile sui display piccoli, cresce di­na­mi­ca­men­te sugli schermi più grandi e non supera mai i limiti definiti. clamp() è oggi con­si­de­ra­ta la soluzione migliore per la ti­po­gra­fia re­spon­si­ve.

Immagini re­spon­si­ve

Oltre al layout e alla ti­po­gra­fia, nel design re­spon­si­ve l’at­ten­zio­ne è rivolta in par­ti­co­la­re anche alla vi­sua­liz­za­zio­ne ot­ti­miz­za­ta delle immagini. 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. D’altra parte, la di­men­sio­ne del file di un’immagine aumenta in base ai pixel contenuti nell’immagine.

Un’immagine di di­men­sio­ni di circa 1.920x1.080 pixel occuperà uno spazio quattro volte superiore rispetto a una di 960x540 pixel. Di con­se­guen­za, anche il download di un’immagine di questo tipo su un di­spo­si­ti­vo mobile richiede più tempo. Nel complesso, questo ha un effetto molto negativo sulle pre­sta­zio­ni e sulla facilità d’uso di un sito web, se le immagini non sono ot­ti­miz­za­te in modo re­spon­si­ve.

Per le immagini re­spon­si­ve sono stati in­tro­dot­ti gli attributi srcset e sizes, con i quali il browser può scegliere la risorsa d’immagine più adatta a seconda del contesto. In questo caso si parla anche di “asset”. Ogni singolo file è collegato alla verifica di una media feature CSS. In questo modo il browser può caricare, dall’elenco di asset di­spo­ni­bi­li, quello più ottimale per il singolo di­spo­si­ti­vo.

Di seguito ti 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.

<img
    src="bild-800w.jpg"
    srcset="bild-480w.jpg 480w,
                    bild-800w.jpg 800w"
    sizes="(max-width: 600px) 480px,
                 800px"
    alt="Descrizione dell’immagine">

Il vantaggio decisivo di questo approccio è che è il browser a decidere quale variante dell’immagine caricare. Gli svi­lup­pa­to­ri e le svi­lup­pa­tri­ci devono solo mettere a di­spo­si­zio­ne di­men­sio­ni di immagine adeguate, senza però con­trol­la­re ma­nual­men­te la selezione.

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 ottenere un risultato migliore, è con­si­glia­bi­le uti­liz­za­re un’immagine quadrata o verticale ap­po­si­ta­men­te adatta. La scelta di diversi tagli di un’immagine viene definita “art direction”. Questo si può rea­liz­za­re con l’elemento <picture>. L’elemento <picture> consente la de­fi­ni­zio­ne complessa di più immagini equi­va­len­ti per diversi 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:

<picture>
<source
media="(orientation: landscape)"
srcset="image-small-landscape.png 320w,
image-large-landscape.png 1200w"
sizes="(min-width: 60rem) 80vw,
(min-width: 40rem) 90vw,
100vw">
<source
media="(orientation: portrait)"
srcset="image-small-portrait.png 160w,
image-large-portrait.png 600w"
sizes="(min-width: 60rem) 80vw,
(min-width: 40rem) 90vw,
100vw">
<img src="image-small.png" alt="Image description">
</picture>

In questo modo puoi as­si­cu­rar­ti che un soggetto venga mostrato con la stessa efficacia sia sui piccoli display verticali sia sugli schermi di grandi di­men­sio­ni.

Na­vi­ga­zio­ne re­spon­si­ve

La na­vi­ga­zio­ne è uno degli elementi di controllo prin­ci­pa­li di un sito web e rap­pre­sen­ta una sfida par­ti­co­la­re nel design re­spon­si­ve. 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 inadatta 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.

Nella pratica vengono però uti­liz­za­ti anche altri modelli di na­vi­ga­zio­ne con­so­li­da­ti, che offrono vantaggi diversi a seconda del contesto d’uso. Tra questi c’è la bottom na­vi­ga­tion, in cui i punti di na­vi­ga­zio­ne prin­ci­pa­li sono collocati nella parte inferiore dello schermo e risultano così fa­cil­men­te rag­giun­gi­bi­li con il pollice. I menu “Priority+“ danno priorità ai punti di na­vi­ga­zio­ne im­por­tan­ti e spostano in modo dinamico le voci meno rilevanti in un sottomenu. Per i siti web di grandi di­men­sio­ni si uti­liz­za­no inoltre mega menu ot­ti­miz­za­ti per il touch, che ga­ran­ti­sco­no una struttura chiara anche su tablet più grandi e di­spo­si­ti­vi ibridi.