Comunidad de diseño web y desarrollo en internet online

Qué significa Retina Display en el diseño web

Laptops, teléfonos y tablets están cambiando las reglas respecto a los pixeles, las imagenes y las interfaces. El iPhone 4 fue el primer en ponerle nombre: "Retina Display". Pantallas con el doble de densidad de pixeles de la generación tradicional en la que por años hemos estado acostumbrados a diseñar.

Ese fue solo el inicio. Vivimos en un mundo dominado por 3 tipos de pantalla:

  • El teléfono, de uso normal vertical.
  • Los tablets. iPad a 4:3 y Android tradicionalmente a 16:9.
  • Los laptops y desktops, que van desde el netbook de 1024x600 hasta la estación de combate dual de 3840x1080.

¿Para qué pantallas diseñamos?


Asumiendo la pantalla 13"~15" como el estandar de los laptops y el iPad y iPhone como el estandar de los móviles, este es el mundo al que nos enfrentamos:


Dos soluciones surgieron. Crear un diseño aparte para móviles, otro especializado para tablets (puagh!) y uno tradicional para laptops. Otra idea, más sensata ha sido el Diseño Adaptable o Responsive Design. Requiere más esfuerzo, pero sólo tiene ventajas, entre ellas un mejor posicionamiento en buscadores para sitios móviles y un diseño uniforme y unificado.

Pero ninguna de estas soluciones es eficiente para Retina Display.

De Responsive Design a Retina Display, la diferencia es abismal


¿Recuerdan el gráfico de arriba? Este es el gráfico del cambio de resolución entre los dispositivos normales y los dispositivos con pantalla tipo retina.


¿Crees que aún son pocos? Apple tiene 3 teléfonos retina, la tablet más vendida del mercado, su laptop más poderoso en 15" y este mes saldrá el Macbook Pro Retina de 13" que seguro venderá mucho. En un año, todos los Macbooks serán Retina.

En el mundo Android, desde el Galaxy S2 la densidad aumentó mucho y con el S3 llegó al nivel de Retina Display. HTC, LG y Motorola tienen planes o teléfonos ya con alta densidad de pixeles. En tablets aún están quedados, pero el Nexus 7, la tablet Andriod más vendida, tiene una densidad cercana a Retina.

En el mundo Windows, tanto Samsung, como Lenovo y ASUS lanzarán laptops con pantallas tipo "Retina" y Windows 8 al final de este año. A partir de ahora todos los laptops de gama media y alta tendrán este tipo de pantallas.

Es una realidad y hay que actuar ahora

¿Qué se ve bien y qué se ve mal en Retina Display?


Todo lo que sea texto se ve perfecto e impecable en Retina Display. El texto es vectorial y las buenas fuentes son adaptables a cualquier pantalla y resolución. Esto ha hecho renacer el font-face de CSS3 y las librerías de fuentes abiertas como Google Fonts. También existen fuentes de iconos que reemplazan los .png (nadie decente usa .gif en el 2012 al diseñar).

¿Pero las imágenes? Las imágenes son la mala noticia. Una imágen normal de 300x300 se ve así en pantallas normales (izquierda) y así en Retina (derecha):


No exajero. Cambiar de mi viejo macbook al Macbook Pepito Retina 15" fue como ver un canal de TV antiguo en un TV LCD HD 1080p de 60". ¿Por qué antes se veía bien y ahora todo se ve mal? Todo es cuestión de perspectiva y comparación. Cuando tienes un Macbook Retina y uno normal lado a lado, no puedes evitar pensar que el normal se ve borroso, aunque lo hayas usado toda la vida.

La solución es fácil: Pública tus imagenes al doble de resolución. Si quieres que un logo se vea bien a 100x100 en Retina, crea una imagen de 200x200 y ponla de 100x100 usando CSS. Lo mismo con HTML para las imagenes de tu contenido. No hay mejores soluciones.

¿Es más peso? Sí, pero encontré un truco curioso. Si exportas un JPG al doble de resolución, con el 40% de la calidad y por HTML o CSS lo redimensionas a la mitad de su tamaño, se ve impecable en pantallas normales y en pantallas retina. ¡Y pesa menos que un JPG normal a 85%!

¿Y si usas Flash? ¿Flash es vectorial, verdad?


Sí. No. Flash es vectorial pero representa en pantalla visualmente bitmaps rasterizados y rendereados del contenido. Adobe no ha dado soporte en el Flash Player para Retina Display hasta ahora y todos los SWF se verán tan mal como un JPG. Esto es una realidad tanto para el contenido vectorial, texto o incluso bitmaps como imagenes o videos. Una lástima, pero una realidad.

UPDATE: El honorable @elecash me ha hecho hacer más experimentos con el Flash Player. Se ve muy bien en vectorial el SWF si lo insertas de la manera correcta y si todos tus assets son no vectoriales. El problema sigue siendo que Flash recomprime los JPG, pero es cuestión de configurarlo pesado. En video, no hay solución, pero esto es una realidad incluso con HTML5.


Las pantallas de alta densidad son una realidad inmediata que mucha gente está usando y para las que deberías adaptar tus sitios y apps ya. ¿Ya lo hiciste?

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate