HTML5 e CSS3: come usare i nuovi standard per realizzare siti web adattabili a qualsiasi display

I nuovi standard di linguaggio per la composizione di pagine web (HTML5 e CSS3) trasformano in risorsa l’assenza di limiti fisici.

C’era una volta l’antico mestiere del web designer, leggermente più evoluto rispetto all’era glaciale del web master, ma ancora alle prese con arnesi e attrezzi di caccia dell’ età della tabella e del layout fisso.
I nuovi standard di linguaggio per la composizione di pagine web (HTML5 e CSS3) finalmente permettono di vedere il web come uno spazio aperto, dove l’assenza di limiti fisici non sia una costrizione, ma una risorsa.

Ad aprire gli occhi al mondo come un moderno Prometeo è stato Ethan Marcotte, poco prima dell’estate (Responsive Web Design, anche in italiano). Un po’ per il modo rumoroso e sensazionale con cui il fondatore di A List Apart (Jeffrey Zeldman) propone le sue uscite, ma anche per aver gettato un raggio di luce su schiere di web designer, ancora proni ai vecchi riti: la sua proposta è chiara e spiega come si può rendere un layout reattivo a qualsiasi tipo di display.
L’esigenza è quella di sviluppare un unico contenitore per un sito che potrebbe adattarsi di volta in volta alle specifiche del display sul quale viene visualizzato: in parte questo risultato potrebbe essere raggiunto anche seguendo quella teoria elitaria (e anche un po’ radical) dei layout liquidi: ovvero fornendo misure percentuali o di relazione tra elementi contenitore e elementi contenuto (esempio in figura 1). Teoria che si scontra, però con qualche problema nella tenuta di immagini a proporzioni fisse e con risultati che spesso si traducono in illustrazioni tagliate e in testi che si interrompono senza controllo.

La svolta incomincia con una recente specifica CSS, cosiddetta media query che permette finalmente di gestire in modo accettabile l’attributo media di un foglio di stile. Attributo introdotto già nella versione 2.1 di CSS, ma rimasto pressochè inutilizzato, se non per il valore print (ovvero per differenziare lo stile di uno stampato rispetto allo stile a video).
La specifica media query, introdotta con la versione CSS3, consente invece di fornire più indicazioni rispetto alle caratteristiche di un video o dello stesso dispositivo e quindi elaborare, in funzione queste, risposte diverse.

Nella figura 2 si mostra l’utilizzo dell’attributo media: nel primo caso senza una specifica query, solo per distinguere lo schermo generico da una stampante. Nel secondo caso invece viene unito all’indicazione di una risoluzione del dispositivo uguale o inferiore a 480px (pari, guarda caso all’estensione in orrizzontale di un IPhone sdraiato). Se l’interrogazione riscontrerà quindi le condizioni indicate, verrà applicato un foglio di stile specifico per quella tipologia di video.

Nella terza figura, invece, vi forniamo un estratto diretto dal foglio di stile collegato a questo sito per mostrare come sia possibile integrare diverse interrogazioni (appunto query) in un unico foglio di stile: con un costrutto condizionale, tipico dei più comuni linguaggi di programmazione, si possono indicare diverse condizioni di risoluzione laterale minima e massima (nel foglio esteso si considerano tutte le risoluzioni, da quelle superiori a 240px, fino a quelle comprese entro i 1440px).
La sintassi ricorda Javascript, ma a differenza di questo non necessita di un’interprete locale (potenzialmente non accessibile) terzo rispetto al browser.

Naturalmente, come tutte le novità, le specifiche di CSS3 non sono ancora state implementate da tutti i browser: i primi della classe sono quelli basati sul motore WebKit (Safari e Chrome) e Gecko (Firefox), mentre per Internet Explorer bisogna aspettare la versione 9 (che nel momento in cui scriviamo si trova ancora in versione beta).

Per un ulteriore approfodimento vi segnalo un’altra discussione in corso sul blog di alistapart: Smartphone Browser Landscape. Inoltre, in tempi recentissimi anche il W3C ha pubblicato una nuova raccomandazione proprio sulle migliori pratiche per sviluppare applicazioni web per dispositivi mobili.

Per approfondire e conoscere tutti gli aspetti del web design scopri tutti i dettagli dei nostri corsi.