Diseñando para las nuevas pantalla retina de Apple

Hace unas semanas Apple deslumbró al mundo con su nuevo portatil: el MacBook Pro con pantalla retina, una pantalla que tiene 3 millones más píxeles que un televisor HD. Los que han tenido la ocasión de ver la pantalla con sus propios ojos se han llevado las manos a la cabeza ante el asombro de la definición. Pero, nosotros, diseñadores y desarrolladores web, también nos hemos llevado las manos a la cabeza y no para bien. Las páginas web tienen que adaptarse a estas pantallas, a extenderse en toda su resolución…

Pensar que con doblar la resolución de las imagenes está solucionado es una idea equivocada. Thomas Fuchs, desarrollador web especializado en Ruby on Rails, ha demostrado y mostrado todos los pasos necesarios para adaptar una página web a tal resolución.

La clave está en dividir las tareas por los tipos de archivo. Por ejemplo, los textos no dan ningún problema. Los favicon habrá que crear un .ico en dos resoluciones. Un mal menor. Pero las imagenes son las que nos darán más quebraderos de cabeza, ya que aparte de doblar su resolución como los favicon hay que incluir lineas adicionales a las CSS que determine que imagen utilizar en función de la resolución de la pantalla, como en el código de ejemplo que ponemos a continuación.
También tenemos que olvidarnos de las imagenes .gif y sustituirlas por imagenes .png, de mucha más calidad y resolución

@media only screen and (-moz-min-device-pixel-ratio: 1.5), only
screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-
webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-
pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
{
background-image: url();
}


A día de hoy, Apple es la única (o practicamente) que tiene su web preparada para estas resoluciones. Pero el resto de desarrolladores, tendremos que trabajar duro e ir adaptando poco a poco nuestros proyectos para que sea 100% compatible con las nuevas pantallas de la compañia de Cupertino.