Adición de compatibilidad con Retina Display a temas de WordPress

Adición de compatibilidad con Retina Display a temas de WordPress

Con la gama cada vez mayor de productos de pantalla Apple Retina actualmente solo, es hora de asegurarse de que su tema de WordPress se vea atractivo en estos dispositivos. En este artículo, repasaré las diferentes opciones que tiene para agregar soporte de retina a sus temas.
¿Qué es la 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).

Entonces, ¿cómo afecta esto a las imágenes de tus temas?

Un monitor típico es de 72ppi o píxeles por pulgada, mientras que una pantalla Retina varía de 135 a 300ppi. ¿Qué significa esto para las imágenes de su tema, aunque ver una imagen de 72ppi en su pantalla LCD estándar se ve absolutamente bien, pero tome la misma imagen en un dispositivo de pantalla Retina y aparecerá borrosa para siempre? ¿Cómo remediar esta situación? Leer sobre mi amigo …

1. CSS3> Imágenes

Probablemente la opción más obvia es usar CSS3, con la compatibilidad del navegador mejorando día a día; el uso de las propiedades de CSS3 es una obviedad. Elementos como degradados lineales de fondo, radio de borde, sombra de cuadro y sombra de texto asociados 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 cargará su sitio.

2. @ 2x imágenes

@ 2x, ¿¡QUÉ ES !? Piense en imágenes de 72ppi, el estándar actual como @ 1x que se ven muy bien en pantallas normales. Ahora, con las pantallas Retina, básicamente estás viendo el doble de resolución, ahí es donde entra @ 2x, ¿no tiene sentido? Básicamente, @ 2x es el estándar para imágenes y gráficos Retina que ha sido implementado por Apple.

Una vez que esté en funcionamiento, tendrá un archivo de 72ppi similar a logo.png y otro logo@2x.png, bastante sencillo.

¿CÓMO USAS ESTA IMAGEN @ 2X PARA LOS DISPOSITIVOS DE RETINA?

Impresionante script de código abierto Retina.js hace que sea increíblemente fácil transmitir imágenes de alta resolución a dispositivos Retina. Si existe una variante de alta resolución de esta imagen, en este caso logo@2x.png, el script intercambiará automáticamente esta imagen en su lugar. Tan fácil 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. img elementos en línea

Digamos que tiene una gran galería de fotos y está fuera de discusión crear dos versiones de cada imagen. Otro gran script de código abierto es Foresight.js, le da a su tema la opción de saber si el dispositivo del usuario es capaz de ver imágenes de alta resolución antes de que se solicite al 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 simplemente increíbles, son infinitamente escalables, se pueden cambiar a cualquier color, tienen máscaras transparentes, cambian la opacidad, animan con CSS3, ¡y mucho más! Hay muchas soluciones de código abierto y de pago. Personalmente prefiero el código abierto Fuente impresionante pack, hay más de 220 iconos en este momento, es absolutamente gratuito para uso comercial y muy fácil de usar.

¿Entonces, Qué esperas? ¡Empiece a aplicar estas prácticas hoy mismo!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba