Creare un sito: dimensioni per schermi e superfici adattative

Negli ultimi giorni la questione delle dimensioni è stata preponderante e tornando a proporre l’appuntamento con la creazione di siti web, non potevo che affrontare questo problema. Magari, state disegnando una bozza da tradurre in codice e non avete immaginato che il risultato sarà profondamente diverso a seconda del dispositivo utilizzato dall’utente. Quando parlo di dimensioni, non mi riferisco soltanto alla risoluzione dello schermo oppure della superficie capacitiva: le maggiori difficoltà derivano dalla densità dei pixel.

Pixel Per Inch (PPI) o pixel density è l’unità di misura più importante, nello sviluppo d’interfacce per i dispositivi mobili: il valore è proporzionale a quello della risoluzione ed è calcolabile con una semplice formula matematica, che comunque non siete obbligati ad applicare perché esistono principalmente quattro gruppi ai quali fare riferimento.

1. LDPI
2. MDPI
3. HDPI
4. XHDPI (Display Retina)

Questi gruppi, a prescindere dalle dimensioni “fisiche” dei device, presentano un rapporto stabile fra la risoluzione e la densità dei pixel.

La suddivisione ne riporta l’acronimo, ma non è affatto equivalente ai Dots Per Inch (DPI): poiché risoluzione, densità dei pixel e dei punti sono in proporzione tra loro, al valore dei PPI corrisponderà quello dei DPI a una determinata dimensione della superficie. Il discorso è complesso. Fortunatamente, a noi interessano giusto quattro numeri che rappresentano i coefficenti tra le dimensioni impostate negli stili coi CSS e quelle mostrate dai dispositivi al variare dei PPI. È l’unica soluzione per ideare un design responsivo.

I valori da ricordare sono 0.75, 1, 1.5 e 2. MDPI corrisponde a un rapporto di 1:1 cioè visualizza esattamente la stessa dimensione impostata coi CSS: tutti i monitor di desktop e laptop rientrano in questo gruppo, motivo per il quale le difficoltà sono subentrate con smartphone, phablet e tablet. LDPI è 0.75, HDPI 1.5 e XHDPI o Display Retina 2. Cosa significa? Semplice, dovete moltiplicare la dimensione in pixel delle immagini o degli elementi delle pagine web per quei valori nel determinare come saranno davvero visualizzati.

Per esempio, un’immagine di 48×48 pixel in MDPI sarà visualizzata a 36×36 pixel su LDPI, 72×72 pixel su HDPI e 96×96 pixel su XHDPI o Display Retina. Poiché i dispositivi riscalano automaticamente le dimensioni, è consigliabile prevedere vari formati della stessa per evitare che sia inguardabile se rimpicciolita o ingrandita: Apple prevede il suffisso _x2, da inserire nel nome dei file destinati ai Display Retina. Anziché riscalare l’immagine originale da 48×48 pixel, gli utenti visualizzano una versione dedicata a 96×96 pixel.

Il problema non riguarda, come accennavo, soltanto le immagini: la stessa proporzione è applicata ai font e agli altri elementi grafici delle pagine. Iniziate a capire perché è impossibile creare un sito in cinque minuti? Grazie ai CSS, potete utilizzare le media query che permettono d’associare ai singoli dispositivi l’immagine delle dimensioni adatte. La soluzione ideale sarebbe quella di creare delle icone vettoriali in SVG e definirne la grandezza coi CSS. Purtroppo, il browser di Android fino a Gingerbread non le supporta.

Potreste ignorare del tutto queste problematiche e lasciare che gli utenti rimpiccioliscano o ingrandiscano le pagine da sé grazie agli strumenti integrati nei browser di iOS, Android e Windows Phone. È la grande differenza tra un sito realizzato come si deve e uno creato in cinque minuti: disponendo gli elementi delle pagine, oltre a valutare i rapporti in base alla densità dei pixel, dovreste considerare la risoluzione massima dello schermo. Per esempio, uno smartphone da 240×320 pixel max. limita gli elementi visualizzabili.

Mi spiego meglio. Sistemati il logo, i font e le icone del sito perché siano visibili da qualunque dispositivo… resta il problema delle dimensioni “fisiche”. Non potete pretendere di mostrare un layout a due o più colonne sugli smartphone in 240 pixel: gli utenti dovrebbero guardarlo col microscopio. Sui tablet, invece, potrebbe risultare leggibile. Le variabili da tenere in considerazione sono molte perché sul mobile avete addirittura due orientamenti delle superfici, ovvero portrait (in verticale) e landscape (in orizzontale).

Tenendo come esempio lo stesso smartphone, impugnandolo in orizzontale il landscape mette a disposizione 320 pixel anziché 240 e gli elementi visibili possono aumentare. Coi CSS potete nasconderli o riposizionarli affinché siano sempre consultabili a una dimensione accettabile. Ovviamente, più grande è il device e maggiori sono le informazioni che l’utente potrà visualizzare: se ho suggerito il Software Development Kit (SDK) di Android fra gli strumenti essenziali del web design è stato proprio per avere un riscontro immediato.