Muchos de los que han visto ya con sus propios ojos la pantalla retina del nuevo MacBook Pro se han echado las manos a la cabeza apreciando la definición. Pero los que también se han echado las manos a la cabeza y no precisamente por sorpresa positiva son los desarrolladores web, porque queda claro ya que las pantallas retina se extenderán por todas partes y eso implica que las páginas web se tendrán que adaptar.
Muchos deducen que lo único que hay que hacer para que una web se pueda ver bien en una pantalla retina es doblar la resolución de la imagen y listo, pero hay mucho más trabajo por detrás. Thomas Fuchs, desarrollador web especializado en Ruby on Rails, lo ha demostrado publicando un diagrama donde se puede ver todos los pasos necesarios a tomar para “retinizar” una página web.
La clave está en dividir las tareas por tipo de archivo. ¿Texto? No hay que hacer nada. ¿El favicon que se ve en las pestañas del navegador? Se crea un archivo .ico con las dos resoluciones necesarias y listo. Es en las imágenes donde hay más problemas, ya que además de tener que doblar su resolución (y si son iconos o botones eso implica retoques adicionales) hay que incluir código CSS adicional en la hoja de estilo. Es más, dependiendo de si la imagen es o no es una imagen de fondo, hay que aplicar retoques diferentes.
A día de hoy la única web que he visto enteramente preparada para las pantallas retina es la propia de Apple, y aún así hay partes que aún no se han actualizado. El proceso será largo, pero es de esperar que poco a poco los servicios optimicen sus webs a medida que las pantallas retina van conquistando toda la gama de ordenadores y pantallas de Apple.
Vía | Daring Fireball > Mir.aculo.us
Más información | Diagrama completo sobre cómo adaptar una web a las pantallas retina
Ver 64 comentarios