Creare siti web adatti al Retina display



grafica web retina

Realizzare siti web con una grafica ottimizzata per essere visti da dispositivi mobile dotati della tecnologia Retina, come nell’Ipad

Molti dei prodotti Apple rilasciati utilizzano ormai la recente tecnologia del Retina display: uno schermo ad altissima qualità e una risoluzione così elevata che non è possibile distinguere il singolo pixel ad occhio nudo. L’articolo ha lo scopo di dare alcune indicazioni per creare una grafica adatta a questa speciale tecnologia, con un design fresco e chiaro per questi potenti display.

Come creare una grafica Retina display

Ci si potrebbe aspettare di dover salvare la propria grafica web con una maggiore risoluzione PPI, ma non è questa la soluzione corretta: tutto quello che è necessario fare è salvare una serie di versioni Retina delle immagini con dimensioni raddoppiate, in modo che un’immagine 200×200 px diventi 400×400 px. Queste immagini sovradimensionate vengono visualizzate nelle dimensioni originali, in modo che assumano un aspetto più luminoso e fresco su schermi ad alta densità di pixel.

 


Loghi e icone in Illustrator

Le immagini vettoriali sono la soluzione perfetta per creare loghi e icone perfetti per un Retina display. Se si dispone di un’immagine in EPS o Ai può essere scalata in qualsiasi dimensione prima di essere esportati o copiati in Photoshop. È necessario incollare l’elemento come oggetto avanzato in modo che possa mantenere le proprie radici vettoriali e possa essere raddoppiato e salvato come immagine speciale.

Codificare le immagini per il Retina display

Una volta create ed esportate le copie di tutte le immagini standard al doppio delle dimensioni originali, è possibile iniziare a codificarle per inserirle nel proprio sito. Una breve nota di denominazione: si consiglia di salvare le immagini sovradimensionate nella stessa cartella contenente le immagini del sito con il nome originale, ma con l’aggiunta di 02x alla fine.

Metodo automatico: Javascript

Il modo più semplice in assoluto per codificare le immagini per il retina display è quello di collegare il retina.js script: esso controlla la presenza di immagini 02x nella directory delle immagini e automaticamente le ridimensiona.

-------------
-------------

Metodo manuale: CSS

In alternativa è possibile aggiungere la grafica per il retina display manualmente per mantenere lo stile andando a modificare il file CSS con l’utilizzo dell’aggettivo min-device-pixel-ratio=2.

GD Star Rating
loading...
Creare siti web adatti al Retina display, 10.0 out of 10 based on 1 rating

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Altro... design, grafica web, javascript, realizzazione siti web, retina
timeline facebook nuova versione
La nuova Timeline di Facebook in arrivo in Italia

Nuovi cambiamenti nell'aspetto grafico di Facebook: in arrivo la Timeline nuova versione Nel corso degli...

Chiudi