È passato molto tempo da quando sono stati pubblicati i display Retina su dispositivi iOS, ma ci sono ancora molti siti web che non sono pronti per Retina, anche se i progettisti e gli sviluppatori si sono dati alla portata di un dispositivo completamente reattivo, mobile mondo amichevole.
Ecco quello che devi sapere sulle opzioni per rendere il tuo lavoro al meglio sui display Retina sempre più comuni. La buona notizia è che, per quanto possa sembrare scoraggiante, non è davvero così complicato.
$config[code] not foundPreparazione del sito Web per immagini retina-pronte
Raddoppia il tuo divertimento
Ci sono in realtà un certo numero di modi in cui puoi spellare questo gatto, per così dire. Nel primo caso, dovrai migliorare un po 'il tuo CSS e includere versioni delle tue immagini al doppio della loro risoluzione normale. Il CSS determinerà quale immagine visualizzare in base al dispositivo su cui viene visualizzato il tuo sito.
Gli aggiornamenti CSS necessari variano a seconda dei browser di destinazione, ma la buona notizia è che non è molto complicato ora e sta diventando più semplice. Lasciamo la codifica attuale a un altro giorno.
Una cosa da tenere a mente: potresti voler sviluppare una convenzione di denominazione per le tue immagini retina in modo da poter facilmente associare le due versioni di un'immagine nel caso in cui debbano essere modificate successivamente.
SVG
Un altro approccio è SVG o Scalable Vector Graphics. Come suggerisce il nome, questi sono limitati alla grafica vettoriale e non funzioneranno con le immagini fotografiche, ma la grafica SVG elimina la necessità di due file immagine per ogni immagine sul tuo sito. Anche in questo caso, ci sono variazioni dal browser al browser, quindi vorrete fare ulteriori ricerche a seconda delle vostre esigenze.
E come notato sopra, SVG probabilmente non funzionerà come la tua unica soluzione sulla maggior parte dei siti, a meno che il sito non contenga immagini di tipo fotografico.
Forza bruta
Ovviamente, è anche possibile scaricare semplicemente i file a bassa risoluzione e servire solo le immagini Retina-ready. Lo raccomandiamo solo per usi con un pubblico molto ristretto. Se sai che la larghezza di banda non sarà un problema, questa potrebbe essere la strada giusta, ma non è certamente una buona pratica
Altre soluzioni di codifica
All'altro estremo dello sforzo e dello spettro dell'eleganza ci sono i metodi di codifica che si basano su alcune modifiche sul lato server (come le voci dei file.htaccess) insieme alla codifica PHP e Javascript.
Questo potrebbe essere il tuo approccio migliore, anche se lo sforzo richiesto potrebbe non valerne la pena per progetti più piccoli.
Nel complesso, l'approccio che scegli dipenderà dal tuo pubblico, dalla natura delle immagini del tuo sito e dal livello di competenza tecnica del tuo team di sviluppo. C'è una buona soluzione per quasi tutte le situazioni. L'unica cattiva soluzione è ignorare completamente i display Retina.
Foto NASDAQ tramite Shutterstock
