Siti ottimizzati per display Retina: le tecniche!

Ottimizzare siti web per Retina

Cos'è un display Retina?

La maggior parte dei nuovi dispositivi Apple (smartphone, tablet e pc) sono commercializzati con un display denominato "Retina".
Il display Retina è un display con densità molto superiore rispetto a quella nominalmente dichiarata: secondo alcuni studi una risoluzione vicina a quella realmente percepita dall'occhio umano.

Problemi per i siti web

L'aumento della densità effettiva dei display causa problemi alla visualizzazione dei siti web, se non appositamente ottimizzati.
Il problema deriva essenzialmente da immagini che risultano sfocate provocando, di conseguenza, una sensazione generale di scarsa qualità del sito web.
Le immagini raster (jpeg, png e gif) sono infatti dipendenti dalla risoluzione, il che significa che non possono essere ingrandite senza perdere la qualità di visualizzazione.

Soluzioni: come ottimizzare un sito per display retina

Esistono diverse tecniche che si possono impiegare, in base alla situazione specifiche:

Impiego di immagini con misura superiore a quella dichiarata.

La soluzione più semplice e immediata è quella di utilizzare immagini con misura superiore rispetto a quella dichiarata: la misura va forzata nel tag html per l'iserimento dell'immagine oppure nel foglio di stile CSS.
Questa soluzione ha però un'importante controindicazione: il tempo di caricamento delle immagini ovviamente aumenta e, di conseguenza, le prestazioni complessive del sito sono penalizzate.

Sostituzione delle immagini raster (jpg e png) con immagini in formato svg.

Svg è un formato di immagine vettoriale, questo significa che scalerà a qualsiasi risoluzione e dimensione mantenendo inalterata la propria qualità. Svg è ideale per le immagini di tipo grafico, ma non per quelle di tipo fotografico.

Utilizzo di font al posto di icone e simboli

Esistono ormai numerose librerie di simboli da inserire nel sito come font. Questi simboli mantengono la stessa qualità visiva ad ogni misura e risoluzione di monitor, con un comportamento identico a quello dei normali caratteri. Un esempio è fornito da Bootsrap, noto framework per la creazione di siti web, che ne mette a disposizione un set

Fogli di stile CSS

Per le immagini di sfondo si possono utilizzare le apposite regole dei fogli di stile CSS per visualizzare immagini diverse in base al display dove viene visualizzato il sito. Il nostro browser infatti è in grado di rilevare la densità del monitor e visualizzare l'immagine adatta.

Javascript

Esistono numerose librerie javascript che, in base alle esigenze, possono aiutarci a risolvere casistiche particolari. Eccone un esempio.

Come si può facilmente intuire il processo di ottimizzazione di un sito per display retina si ottiene mediante il MIX di diverse tecniche.
La cosa migliore è quindi effettuare un'analisi accurata delle problematiche specifiche del proprio sito ed applicare le tecnologie più adatte alle nostre esigenze!

Di:

Contattaci per informazioni e preventivi gratuiti!

Siamo disponibili ad un incontro presso la tua azienda per valutarne le esigenze ed effettuare gratuitamente preventivi siti web, cataloghi on-line e web marketing.

Privacy: Il presente form invia esclusivamente una mail al gestore del sito. Non si procederà a nessuna archiviazione od utilizzo dei dati.

Web Agency a Treviso, Vicenza e Venezia.

La sede della nostra Web Agency si trova tra le colline di Valdobbiadene (Treviso). Realizziamo siti web per aziende operanti nelle provincie di Treviso, Belluno, Vicenza e Venezia.

Info Line

347 2622618

Mail

Valdoweb di Dal Toè Marco

Via Erizzo, 263/A
Valdobbiadene
Treviso
P.I. 04236550267 - Reg. Imp. Treviso 333905