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.
http://adaptive-images.com/
Saludos!
Dar soporte a proyectos antiguos requiere que uno vuelva a exportar todas las imágenes al doble de resolución, y obviamente, eso no es posible cuando uno lo diseño con un tamaño exacto,
Etot requeriría que el diseñador trabaje directamente al doble de resolución, lo cual no es fácil y convertirlo a CSS es aún más complicado, ya que tienes que ir diviendo todo entre 2.
¿Hay alguna manera de saber con Analytics el porcentaje de visitantes que tienen pantalla retina?
Con dice Neo_JP veo bastante costoso aplicar estos cambios a proyectos ya acabados...
Por adobexpert el 18 de Octubre de 2012
Y bueno aquí veo que nadie comenta algo al respecto, solo las dimensiones en pixeles!. Desde entonces mis diseño lo hago en a la medida exacta pero con una resolución en 96ppp como Apple.com.
Por pablo el 18 de Octubre de 2012
Saludos
Por Sanwaxa el 18 de Octubre de 2012
Si yo por ejemplo hago un cartelillo para promocionar algo y suelo hacerlo, no sé, a 1000x800 y a 72ppp, ¿soluciono esto trabajando a 2000x1600 y 72+nppp?
Por tartarux el 18 de Octubre de 2012
Las imagenes en pantalla se trabajan a 72 dpi no importando sus dimensiones. ¿A qué se refiere?
Ahora me falta conseguir algo con retina display y hacer pruebas :]
Por hubermann el 18 de Octubre de 2012
http://www.buenosweb.com/BuenosWebgrid/index.php
Saludos
Por @jmochon el 18 de Octubre de 2012
- Utilizar imágenes de más resolución, habría que hacer pruebas para saber a partir de qué resolución ya no es perceptible la mejora.
- Aumentar el tamaño de la imagen, lo que me parece bastante más engorroso a efectos prácticos.
Si desde luego Apple está utilizando imágenes a 96ppp, es porque es muy probable que a partir de esa resolución ya no se noten mejoras. Eso significa que en tamaño, estaríamos hablando de un incremento de aproximadamente un 28%.
Por Omar el 18 de Octubre de 2012
Por teskostudio el 18 de Octubre de 2012
De todas formas no lo acabo de entender. Si como se comenta arriba la propia apple usa imagenes a 96ppp entiendo que las optimizan para retina?¿ y por ende sería suficiente con eso a la hora de trabajar para esos dispositivos?. Si es así, entonces como se soluciona el problema multiplicando x2 el tamañó de una imagen con una densidad de 72ppp si la pantalla retina las muestra a 300ppp?.
Alguien?.
Por tartarux el 19 de Octubre de 2012
Ahora habría que diseñar con mayor resolución (300 dpi) y menor tamaño (ancho x alto) para compensar el aumento de peso y escalando las imágenes por órdenes CSS y las pantillas tipo Retina las representarán con su calidad subyacente. Esa es mi interpretación del consejo de Freddie
Por Samurai el 19 de Octubre de 2012
Por Jonathan el 19 de Octubre de 2012
Por marcosme el 19 de Octubre de 2012
Por JorgVaz el 19 de Octubre de 2012
Por Edu el 20 de Octubre de 2012
Por Bicks el 22 de Octubre de 2012
http://www.callibree.com/blog-web.html
Un saludo
Por stiven el 23 de Octubre de 2012
Ej:
la imagen es de 720px x 450 px y la redimenciono con width:100% height:auto;
¿aplica para elretina display?
Por Kelderth el 03 de Noviembre de 2012
Por chesno el 04 de Diciembre de 2012
Por Juan Esteban Casas Tejada el 22 de Enero de 2013
Por Jhan Carlos el 23 de Mayo de 2013
se agradece el aporte...
Por virla el 25 de Mayo de 2013
Les dejo el link de la página para que puedan verlo
agnopa.com.ar
desde ya gracias por la ayuda que me puedan brindar.
Por Alberto el 20 de Julio de 2013
Por Gerard Reches el 23 de Abril de 2015
Supongo que el mejor método es crear los dos tipos de imágenes y servirlas en función del dispositivo. Pero todo tiene un problema u otro. O le haces cargar al cliente una imágen el doble de grande de lo que puede necesitar, o bien tienes el doble de imágenes que pueden repercutir en el espacio de almacenamiento del hosting si es una web con muchas imágenes.