Page 137 - Guida tascabile HTML5

Appendice B

Media query: adattare il contenuto

al supporto

Nel tempo la Rete si è evoluta in maniera costante, e con essa sono cambiati i

metodi di connettersi e di fruire i contenuti, si sono moltiplicate le situazioni d’uso
e le esigenze degli utenti. Per offrire un’esperienza ottimale è auspicabile proporre

all’utente, caso per caso, contenuti specifici per il supporto su cui sono fruiti: per

esempio potrebbe essere poco indicato offrire all’utente un video in formato 4K
(allungando i tempi di download e appesantendo l’elaborazione) se il dispositivo

su cui lo sta visualizzando ha un display con risoluzione inferiore.
In generale la sensibilità degli utenti ai linguaggi della Rete è maggiore che in

passato, e le aspettative sono molto diverse. Esperienze più evolute, come detto

legate a situazioni d’uso più varie, rendono necessario un lavoro più attento legato
all’adattamento delle interfacce e dei metodi di interazione: navigando con uno

smartphone, un utente trarrà vantaggio da un’interfaccia pensata per un display
touch e sarà più interessato ad avere subito disponibili, per esempio, le

informazioni legate agli orari di proiezione di un film; da casa, navigando con un

computer desktop, potrà per esempio avere più interesse ad approfondire con più
comodità informazioni dettagliate come recensioni o altro.

Il web design ha recepito queste esigenze, e le moderne tecnologie consentono

di realizzare siti web reattivi, in grado di adattarsi a svariati scenari d’uso
attraverso la predisposizione di adeguate regole, definite media query (associate a

fogli di stile CSS ad hoc) e all’utilizzo in alcuni casi dell’attributo media per

specificare il tipo di contenuto associato a determinati tag multimediali.

ATTENZIONE Nel momento in cui si scrive il supporto all’attributo media è parziale e
fortemente demandato allo user agent utilizzato per la navigazione dei contenuti. È
importante però sottolineare che i principali browser supportano già oggi l’utilizzo delle
media query associate ai fogli di stile CSS.

Senza entrare nel merito della creazione dei fogli di stile CSS e di come le

regole in essi contenute influenzano l’aspetto e il layout delle pagine web, questo