Retina Display: come cambia il web design

Dalla presentazione del nuovo iPhone 4 le speculazioni su come “ora tutto cambia, di nuovo” non hanno smesso di ronzarmi in testa.

All’inizio la mia prima considerazione è stata: “ok, la prima cosa che cambia è il saldo del mio conto corrente”, visto che il nuovo gioiellino costa un botto.

La seconda è stata “ma davvero dovrò impugnarlo solo con la mano destra ???”

…vabbè, tralascio le polemiche su quello che accadrà in questi giorni in merito a qualche “problema di gioventù” (e mi auguro che tutto si risolva per il meglio).

Ma aldilà di questi (poco trascurabili) dettagli …il primo vero elemento di innovazione di questo dispositivo, che non vedo l’ora di sperimentare di persona, è il display: il famigerato Retina Display, infatti, ha una risoluzione di 960×640 pixel, ovvero il DOPPIO dei pixel per ogni punto.

Cosa cambia, quindi, nella realizzazione di interfacce per questo dispositivo ?

Sostanzialmente tutto ciò che è realizzato con grafica vettoriale (quindi, elementi della gui per applicazioni native, font ed immagini vettoriali) avrà una migliore visualizzazione potendo contare, a parità di punti, di un numero doppio di pixel…e per questi elementi, tra l’altro, non è richiesta alcuna azione di ottimizzazione da parte dello sviluppatore (sia di applicazioni native che web).

Il discorso cambia, invece, per le immagini: per quest’ultime, infatti, il display dell’iPhone 4 tenderà a rappresentare immagini dalle dimensioni X,Y su un numero di pixel pari ad 2*X, 2*Y, ciò si traduce in una rappresentazione meno definita delle immagini rispetto alla risoluzione reale del display.

Per ovviare a questo problema:

• per lo sviluppo di app native basterà creare immagini con risoluzione doppia e rinominarle adeguatamente per far sì che XCode associ automaticamente l’immagine giusta al dispositivo su cui dovrà essere visualizzata (nella documentazione di Apple per gli sviluppatori ci sono tutti i dettagli)
• per lo sviluppo di applicazioni web, invece, lo scenario è un po’ più complesso: per ottimizzare la visualizzazione di immagini su dispositivi con risoluzione differente dai classici 72dpi, infatti, oltre che disporre delle immagini in alta risoluzione, bisognerà ricorrere all’utilizzo delle media queries del CSS3, specificando il rapporto di moltiplicazione tra il numero di punti ed il numero di pixel.

Cosa sono le media query ?
La semplifico parecchio: sono delle query ovvero dei filtri che restringono le condizioni entro cui applicare un foglio di stile (come nell’esempio che segue) o un blocco di codice CSS3.

Una buona pratica, secondo me, potrebbe essere quella di realizzare un foglio di stile ad hoc per ogni specifico dispositivo, come nel caso dell’iPhone, in cui il rapporto in questione è 2 ed includerlo nell’header della pagina, ad esempio, in questo modo:

<link rel="stylesheet" type="text/css" href="2x.css"
media="only screen and (-webkit-min-device-pixel-ratio: 2)" />

In questo modo, all’interno del file 2x.css andremo a ridefinire i riferimenti ad immagini per gli elementi della pagina, con immagini specifiche per un display con densità doppia di pixel per punti, rispetto ai monitor tradizionali.

Come vedete, avendo definito la media query a livello di riferimento al file da richiamare in quella circostanza, nel file CSS basterà inserire i blocchi di istruzioni senza applicare ulteriormente le media query.

Personalmente non credo che tutti i siti web o le applicazioni web in generale richiedano un simile intervento, magari Flickr o altri siti il cui contenuto principale è costituito da immagini, questo tipo di attenzione farà la differenza ma è anche vero che, nel frattempo, il web si evolve anche sul fronte del supporto ad immagini vettoriali, canvas, ecc…motivo per cui, secondo me, questi interventi “lato CSS” tenderanno a diminuire.

E’ anche vero, però, che il Retina Display ha solcato un terreno sinora poco battuto: immagino che nei prossimi mesi/anni inizieranno a fioccare display con densità di pixel per punti ben oltre i 72dpi (dei monitor tradizionali).

…vedremo