Diseñar web para pantallas Retina Display

Adapta los gráficos de tu web para las pantallas con Retina Display

En la salida del iPhone 4, Apple presentó su nueva tecnología Retina Display, en la que simplemente aumenta la densidad de píxeles en las pantallas y así se logra una calidad de imagen que en comparación a las anteriores, es bastante notable.

Hasta ahora, estabamos acostumbrados a diseñar con 72 dpi, pero la pantalla Retina puede mostrar 326 dpi en el caso del iPhone 4 / 4S, y 264 en el nuevo iPad.

Para aprovechar la nueva pantalla, podemos diseñar nuestras aplicaciones web con imágenes a dichas densidades, pero conservando también las de 72 dpi.

1. Detectar el pixel ratio

El primer paso es lograr detectar el pixel ratio del dispositivo visitante, un dato que podemos leer utilizando las Media Queries de CSS3.

Entonces, podemos crear un nuevo fichero CSS para utilizar exclusivamente en este caso, por ejemplo: retina-display.css, y para poder cargarlo, podemos utilizar la siguiente Media Query:

<link rel='stylesheet' href='retina-display.css' 
      media='only screen and (-moz-min-device-pixel-ratio: 2), 
             only screen and (-o-min-device-pixel-ratio: 2/1), 
             only screen and (-webkit-min-device-pixel-ratio: 2), 
             only screen and (min-device-pixel-ratio: 2)' />

2. Adaptar las imágenes

En las naming conventions del SDK de Apple, se sugiere que los ficheros para la Retina Display, tengan el sufijo “@2x”. Si nuestra imagen original se llama “logo-site.png”, la versión Retina se puede llamar “logo-site@2x.png”

En cuestión de tamaño, si la imagen tiene una resolución de 50x50 pixeles, la versión Retina deberá tener 100x100.

3. Añadir las nuevas imágenes en nuestra hoja de estilos.

Si antes hemos creado el fichero retina-display.css, ahora podemos indicar en el fichero las nuevas imágenes adaptadas. Siguiendo el ejemplo anterior:

#home #header .logo 
{
    background-image:url(assets/img/images/logo-site@2x.png);
    background-size: 50px 50px;
}

Necesitamos añadir la propiedad background-size para volver a adaptar el tamaño de las imágenes.

Fuentes externas: marcpampols

Imagen de cabecera: blogvecindad