Fa molt de temps que es mostra la pantalla de Retina en dispositius iOS, però encara hi ha molts llocs web que no estan preparats per Retina, tot i que els dissenyadors i desenvolupadors han arribat a la realitat d'un dispositiu mòbil completament receptiu. món amistós.
A continuació us indiquem què heu de saber sobre les opcions per fer que el vostre treball es vegi millor en les pantalles Retina cada cop més habituals. La bona notícia és que, tan desorientat com sembla, no és tan complicat.
$config[code] not foundS'està preparant el vostre lloc web per a imatges preparades per Retina
Doble la teva diversió
De fet, hi ha diverses formes en què es pot cuinar aquest gat, per dir-ho així. A la primera, haureu d'intensificar el vostre CSS una mica i incloure versions de les vostres imatges al doble de la seva resolució normal. El CSS determinarà quina imatge es mostrarà en funció del dispositiu en què es visualitzi el vostre lloc.
Les actualitzacions de CSS que necessiteu variaran segons els vostres cercadors de destinació, però la bona notícia és que ara no és complicadament complicat i es fa més fàcil. Deixarem la codificació real a un altre dia.
Una cosa a tenir en compte: és possible que vulgueu desenvolupar una convenció de nomenclatura per a les imatges de la retina perquè pugueu associar fàcilment les dues versions d'una imatge si cal editar-les més tard.
SVG
Un altre enfocament és SVG, o gràfics vectorials escalables. Com el seu nom indica, aquests es limiten als gràfics vectorials i no funcionaran amb imatges fotogràfiques, però els gràfics SVG eliminen la necessitat de dos fitxers d'imatge per a cada gràfic al vostre lloc. Una vegada més, hi ha variacions de navegador a navegador, de manera que voldreu fer una investigació addicional en funció de les vostres necessitats.
I com s'ha indicat anteriorment, probablement SVG no funcionarà com la vostra única solució a la majoria de llocs, tret que el lloc no contingui cap tipus d'imatge fotogràfica.
Força bruta
Per descomptat, també podeu abocar els fitxers de baixa resolució i només mostrar les imatges preparades per Retina. Només vam recomanar això per als usos amb un públic molt definit. Si sabeu que l'ample de banda no serà un problema, aquesta podria ser la ruta correcta, però certament no és una bona pràctica
Altres solucions de codificació
A l'altre extrem de l'esforç i l'espectre d'elegància es troben mètodes de codificació que es basen en alguns canvis del servidor (com ara entrades de fitxers.htaccess) juntament amb la codificació PHP i Javascript.
Aquest podria ser el vostre millor enfocament, tot i que l'esforç possible no val la pena per a projectes més reduïts.
En general, l'enfocament que feu dependrà del vostre públic, la naturalesa de les visualitzacions del vostre lloc i el nivell d'experiència tècnica del vostre equip de desenvolupament. Hi ha una bona solució per a gairebé totes les situacions. L'única solució mala és ignorar completament les pantalles de Retina.
NASDAQ Photo via Shutterstock
