Chi non ha mai sentito parlare di Retina Display? Ormai credo in pochi, considerata la diffusione planetaria dell’ultima generazione di dispositivi Apple (iPhone, iPad, iPod e MacBook Pro) che implementano proprio questo tipo di tecnologia che è anche un brand proprietario del colosso informatico di Cupertino. Ma che cosa si nasconde dietro questa enigmatica espressione e soprattutto in che cosa consiste? In questo articolo vedremo in maniera molto sintetica i principi fondanti di questa tecnologia applicata al web design nella speranza che tali informazioni possano essere utili nel momento in cui vi accingete a lavorare sui contest e i job di TalentGo.
Che cos’è il Retina Display
Il termine Retina Display è utilizzato per definire gli schermi dell’ultima generazione di dispositivi Apple che sono caratterizzati da una densità di pixel di circa 300 PPI. Non si tratta di un valore fisso ma di una media approssimativa tra i pixel utilizzati sugli schermi dei dispositivi più piccoli come l’iPhone (326 PPI) e di quelli più grandi come il MacBookPro (220 PPI). L’obiettivo finale è quello di rendere la visualizzazione dei siti web più nitida, chiara, definita. Per ottenere ciò è quindi indispensabile che i web designer utilizzino immagini e grafiche ottimizzate per i Retina Display.
Come creare immagini ottimizzate per Retina Display
Istintivamente viene da pensare che sia sufficiente salvare le immagini e le grafiche a una risoluzione più alta per essere ottimizzate per i Retina Display. Ma così non è. Infatti la risoluzione rimane la stessa, ma occorre invece raddoppiare le dimensioni rispetto a come vogliamo che appaiano sul sito. Questo significa che un’immagine 200×200 pixel dovrà essere salvata a 400×400 pixel. La cosa migliore dunque è quella di utilizzare oggetti vettoriali che possono essere ingranditi a piacimento senza perdita di risoluzione.
Restyling sito web: come risolvere il problema dello “scale up”
Semplice no? Più o meno. Infatti molto spesso ai web designer è richiesto il restyling di un sito con l’obiettivo di ottimizzarlo per il Retina Display ma mantenendo al tempo stesso alcune parti grafiche della vecchia versione. Questo rappresenta un problema perchè lo “scale up” di quelle parti non può dare risultati soddisfacenti; a meno che la cosa non sia limitata agli oggetti più piccoli e non si utilizzi un particolare tool di Photoshop chiamato Nearest Neighbor che permette appunto di eseguire questa operazione con una perdita di qualità accettabile.
Dopo la fase di ottimizzazione delle immagine occorre ovviamente implementarle all’interno del codice di sviluppo del sito. Per questo vi rimandiamo a un paio di interessanti tutorial che vi spiegano come farlo utilizzando i fogli di stile, ma non prima di avervi ricordato di dare un’occhiata ai job di web design aperti su TalentGo.
photo credit: Brett Jordan via photopin cc
