Ya vamos...

diseno web retina

Categoría: Diseño Web Tarragona

¿Por qué tu web necesita un diseño web Retina?

Piensas en tu próxima web ¡pues que sea Retina!

Vamos a ver la importancia de que tu próxima web esté basada en un diseño web Retina. Habrás oído probablemente el término “Retina” con bastante frecuencia en los anuncios de los últimos productos de Apple. Ellos no son la única empresa que han apostado por el caballo de carreras Retina (de más alta densidad de píxeles), pero son ellos los que le han dado el nombre, ahora ya famoso de “Retina”. Por ahora, la mayoría de las pantallas de los productos de Apple están equipados con esta característica. Vamos a echar un vistazo a la forma en que afecta al diseño web y la planificación de nuevos proyectos.

Retina vs. HiDP

En primer lugar vamos a dejar claro: Retina es un término bastante desafortunado, refiriéndose a una parte de la anatomía humana. Hay una alternativa, que significa lo mismo, pero lo pone en un lenguaje más comprensible: HiDPI. Desafortunadamente HiDPI se utiliza muy poco, ya que el mercado en este momento está siendo dominado por los dispositivos Apple que utilizan su tecnología Retina. Así que se podría decir: cada pantalla Retina es una pantalla HiDPI, pero no todas las pantallas HiDPI son una pantalla Retina.

¿Por qué es importante el diseño web Retina?

Si estás utilizando una pantalla HiDPI ya lo sabes. Tomemos el Pro Retina MacBook (rMBP) como ejemplo. La pantalla se especifica con una resolución de 2880 x 1800 píxeles. Son muchos píxeles en 15 pulgadas. Algunas personas se quejan ya de resolución de alta definición en pantallas de 15 pulgadas, y comentando que no pueden leer el texto correctamente. Así que la adición de otros 3,4 millones de píxeles es un gran paso. Pero aquí está el truco: cuando se inicia una rMBP, en la que no se ven fuentes pequeñas, ni tampoco tiene gran espacio de la pantalla: el contenido mostrado se escala hasta cuatro veces. Eso significa que el espacio de la pantalla en una rMBP parece como 1440 x 900 píxeles, más del doble de la cantidad en cada eje (esta escala se puede cambiar, pero por ahora vamos a ver la configuración por defecto). Esto implica que 1 píxel de la percepción de 1440 x 900 consta de 4 píxeles.

retina ready

Tomando este principio en el diseño web conduce a la siguiente situación: Representación de una imagen en el explorador, que es de 250 x 250 píxeles funciona como de costumbre para los dispositivos no HiDPI. Los dispositivos HiDPI no escalan su vista hacia abajo, por lo que 1 píxel de la imagen no ocupa 1 píxel en la pantalla, pero ocupa 4 píxeles. Por lo tanto, no utiliza todo el potencial de la pantalla HiDPI, que el tipo de letra y gráficos vectoriales de los alrededores, así como el sistema operativo hacen. Eso hace que parezca visualmente muy pobre en comparación al diseño web Retina de tu competencia. Cuando desactivo el pequeño código JavaScript, que hace que nuestro sitio web sea “Retina ready” en este tipo de dispositivos, el logo se vería así:

retina-logo-2

retina-logo-1

 

¿Cuántas personas navegan con pantallas HiDPI?

Por desgracia, es difícil saber el número exacto pues las herramientas analíticas no informan de ello. Pero sin duda es un número que está creciendo rápidamente. Al echar un vistazo a tráfico móvil, que ha crecido un 78% en el último año (de ~ 14 ~% a 24%), es obvio que va en aumento. Algunos sitios web tienen el tráfico móvil de 30% y más. Al mismo tiempo, más y más dispositivos móviles vienen con pantallas de alta densidad de píxeles. Y la tendencia se está moviendo hacia visiblemente ultrabooks y portátiles. Si ellos navegan en dispositivos Retina, démosles un diseño web Retina para que podamos desplegar todos los encantos de nuestra web, nuestros productos, servicios y nuestra imagen.

 

¿Cómo hacer que tu página web sea Retina Ready?

Es importante transmitirle al diseñador de tu próxima página web si quiere que su web esté preparada para verse en los dispositivos Retina. En el caso de que quiera que su web WordPress esté preparada puede hacerlo con dos métodos muy fáciles:

1. Primer acercamiento Retina
Hacer que sus imágenes dupliquen el tamaño de la forma en que esté planeando para mostrarlos (por ejemplo, 500 x 500 píxeles en lugar de x 250 píxeles), y escalar hacia abajo a través de la anchura y la altura img en el HTML. La desventaja obvia es el tamaño de archivo más alto y más largo el tiempo de carga, por lo tanto en dispositivos que no HiDPI.

2. Plugin de WordPress
Si tienes una web WordPress, la comunidad lo tiene cubierto. El plugin WP Retina 2x es capaz de ir a través de tu biblioteca de medios y crear versiones de tamaño retina de sus imágenes, siempre y cuando se haya subido lo suficientemente grande. Un archivo JavaScript selecciona qué imagen utilizar, dependiendo del dispositivo que esté usando el navegante.

Conclusión

Si estás planeando un nuevo proyecto de página web, asegúrate de que tenga un Diseño web Retina ready desde el principio. Si tu proyecto ya está en marcha, te recomiendo añadir el apoyo HiDPI. Tener imágenes de gran claridad en tu página web hace que sea muy atractiva, y te puede dar una grandísima ventaja sobre tus competidores.

Artículo basado en el artículo de Metamonks.

Facebooktwittergoogle_pluspinterestlinkedinmail

    Deja tu Comentario...