Con la línea cada vez mayor de productos de visualización de retina actualmente solo de Apple, es hora de que se asegure de que su tema de WordPress se vea atractivo en esos dispositivos. En este artículo, repasaré las diferentes opciones que tiene para agregar soporte de retina a sus temas.
¿Qué es Retina?
Retina Display es una marca utilizada por Apple para pantallas de cristal líquido que tienen una densidad de píxeles lo suficientemente alta como para que el ojo humano no pueda notar la pixelación a una distancia de visualización típica (http://en.wikipedia.org/wiki/Retina_Display).
¿CÓMO AFECTA ESTO A LAS IMÁGENES DE TUS TEMAS?
Un monitor típico es de 72ppi o píxeles por pulgada, una pantalla Retina, por otro lado, varía de 135 a 300ppi. ¿Qué significa esto para las imágenes en su tema? Bueno, ver una imagen de 72ppi en su monitor LCD estándar se ve bien y bien, pero coloque esa misma imagen en un dispositivo de pantalla Retina y parecerá muy borrosa. ¿Cómo solucionamos esta situación? Sigue leyendo, amigo …
1. CSS3> Imágenes
Probablemente la opción más obvia es usar CSS3, con el soporte del navegador mejorando y mejorando día a día; usar las propiedades de CSS3 es una obviedad. Cosas como degradados lineales de fondo, radio de borde, sombra de cuadro y sombra de texto junto con RGBA cuando se usan juntos, por ejemplo, pueden crear hermosos botones como el siguiente ejemplo. Sin el uso de imágenes, cuantas menos solicitudes HTTP, más rápido se carga su sitio.
2. @ 2x Imágenes
@ 2x, ¿¡QUÉ es eso !? Piense en imágenes de 72ppi, el estándar actual como @ 1x, que se ve muy bien en pantallas normales. Ahora, con las pantallas Retina, su mirada es básicamente el doble de resolución, aquí es donde entra en juego @ 2x, ¿tiene sentido, verdad? Básicamente, @ 2x es el estándar para imágenes y gráficos Retina que fue implementado por Apple.
Cuando se ponga en uso, tendrá su archivo de 72ppi algo como logo.png y otro logo@2x.png, bastante simple.
¿CÓMO SIRVE ESA IMAGEN @ 2X A LOS DISPOSITIVOS RETINA?
Un impresionante script de código abierto Retina.js hace que sea increíblemente fácil servir imágenes de alta resolución en dispositivos Retina. Si existe una variante de alta resolución de esa imagen, en este caso logo@2x.png, el script intercambiará automáticamente esa imagen en el lugar. Simple como eso.
Si está usando imágenes de fondo en CSS, deberá usar una consulta de medios simple, algo como:
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
#menu-icon { background-image: url(../images/icons/menu@2x.png);}
}
3. Elementos img integrados
Digamos que tienes una gran galería de fotos, y hacer dos versiones de cada imagen está fuera de discusión. Otro gran script de código abierto es Foresight.js, le da a su tema la capacidad de saber si el dispositivo del usuario es capaz de ver imágenes de alta resolución antes de que sea solicitado por el servidor. También comprueba si el dispositivo del usuario tiene actualmente una conexión de red lo suficientemente rápida para imágenes de alta resolución. Dependiendo de la pantalla del dispositivo y la conectividad de la red, foresight.js solicitará la imagen adecuada para mostrar.
4. Fuentes de iconos
Las fuentes de iconos son impresionantes, infinitamente escalables, se pueden cambiar a cualquier color, tienen nocauts transparentes, cambian la opacidad, animan con CSS3, ¡y mucho más! Hay bastantes soluciones de código abierto y de pago. Personalmente, prefiero el paquete Font Awesome de código abierto, hay más de 220 íconos actualmente, es absolutamente gratuito para uso comercial y es muy fácil de usar.
¿Entonces, Qué esperas? ¡Empiece a aplicar estas prácticas hoy mismo!