() translation by (you can also view the original English article)
El nuevo iPad fue lanzado el mes pasado, y, entre otras cosas, tiene una increíble pantalla Retina con una resolución de 2048 por 1536 píxeles. Casi tan pronto se anunció, la atención se centró en los desarrolladores de aplicaciones nativas y su trabajo para escalar aplicaciones hasta la resolución más alta.
Se podría decir que ese fue el enfoque equivocado. Se pensó relativamente poco en términos de la web, y cómo se vería en la nueva pantalla Retina en el transcurso previo al anuncio. Nos ha dejado con un internet de texto increíblemente nítido, pero irrisoriamente terribles, imágenes de baja calidad. Es hora de optimizar, así que en este tutorial vamos a elaborar estrategias sobre cómo se puede diseñar teniendo en mente la pantalla Retina.
Usar menos imágenes
Posiblemente esto sea bastante obvio, pero todavía puede ser pasado por alto por algunos. Con significativos avances en CSS, el empleo de imágenes en la estructura de un sitio puede ser bastante mínimo, o incluso totalmente inexistente. Esto proporciona a estos sitios una gran ventaja cuando se trata de compatibilidad con dispositivos Retina porque el texto y los gráficos generados por CSS se escalarán sin reducción de calidad. Por la misma razón, el texto se ve apreciablemente mejor en una pantalla Retina.
Apple ha logrado una gran calidad en el texto de la pantalla Retina del nuevo iPad
Un sitio en el que estaba trabajando no necesitaba una sola actualización de su tema para verse muy bien en la pantalla Retina; la falta de imágenes significaba que no había nada que actualizar. Por supuesto, no todos los sitios serán totalmente sin imágenes, pero minimizar su uso reducirá el esfuerzo necesario para optimizarlos para la pantalla Retina.
Generalmente, hay un paso para esta táctica: minimizar el uso de imágenes allí donde sean realmente necesarias.
Cómo lo hace Apple
Naturalmente, el sitio web de Apple está optimizado para lucir increíblemente nítido y definido en la pantalla Retina. En los días previos al anuncio del iPad, Apple comenzó a actualizar su propio sitio web para ofrecer imágenes responsivas; elementos que cambiaban dependiendo de si se estaba navegando en un nuevo iPad o no.
El método de Apple es simple en principio. El sitio web se carga de forma normal, pero luego usan JavaScript para reemplazar imágenes relevantes si estás navegando en un nuevo iPad. Si estás visitándola desde el nuevo iPad, obtendrá las imágenes optimizadas, mientras que cualquier otro navegador extraerá los valores predeterminados.
Un ejemplo de esto es el texto de la imagen de cabecera de Apple en la página del producto del iPad, utilizando el siguiente código en el propio archivo.
1 |
<hgroup class="headline"> |
2 |
<h1><img src="http://images.apple.com/ipad/home/images/overview_title.png" width="471" height="94" alt="Resolutionary" /></h1> |
3 |
<h2 class="first"><img src="http://images.apple.com/ipad/home/images/overview_intro_build.png" width="280" height="53" alt="The New iPad" /></h2> |
4 |
<h2 class="second"><img src="http://images.apple.com/ipad/home/images/overview_intro.png" width="490" height="53" alt="Introducing the new iPad. With the stunning Retina display. 5MP iSight camera. And ultrafast 4G LTE." /></h2> |
5 |
<h3><img src="http://images.apple.com/ipad/home/images/overview_price.png" width="135" height="24" alt="Starting at $499." /></h3> |
6 |
</hgroup>
|
Para simplificar, no compartiré su scripting real, pero esencialmente primero comprueba si el navegador está en un dispositivo con una pantalla Retina, luego comprueba la existencia de una imagen 2x (vamos a llegar a eso en un minuto) y, si ambas condiciones anteriores son ciertas, muestra la imagen 2x.
La convención de sufijo 2x significa que la contraparte "Retina" para el archivo image.png sería image_2x.png. Esto proviene de iOS, que muestra automáticamente una imagen @2x en una aplicación nativa si esta existe. Desafortunadamente, los diseñadores web no tenemos el lujo de la búsqueda y visualización automáticas, por lo que necesitamos alcanzar métodos que lo emulen con nuestros propios scripts y consultas.
Sin embargo, esto tiene un precio. Usando este método, el usuario final carga tanto la imagen no Retina como la Retina, lo que significa que la página acaba teniendo un mayor tamaño de archivo. No sólo eso, el script de Apple significa que se envían más solicitudes desde y hacia el navegador, lo que resulta en un mayor tiempo de carga de la página. Por supuesto, si continúas minimizando el uso de imágenes, este problema también se reducirá.
El tutorial: Uso de media queries CSS
Mientras Apple utiliza JavaScript, un método de algún modo eficaz, existe una alternativa; utilizando "consultas de medios" o media queries CSS para satisfacer la condición de estilo a la densidad de píxeles del dispositivo.
Antes de llegar a eso, es importante tener en cuenta que, en última instancia, la pantalla del iPad sigue siendo de 1024x768 px en "píxeles CSS". Permitiré que Dave Hyatt lo explique.
La mayoría de los autores de sitios web han pensado tradicionalmente en un píxel CSS como un píxel de dispositivo. Sin embargo, a medida que entramos en este nuevo mundo de alto PPP (pixel por pulgada) donde toda la interfaz de usuario puede ampliarse, un píxel CSS puede terminar correspondiendo en la pantalla a varios píxeles. Por ejemplo, si configuro un aumento de zoom de 2x, entonces 1 píxel CSS realmente estaría representado por un cuadrado de 2 x 2 píxeles de dispositivo.
Por lo tanto, el método que estamos usando no apuntará al iPad en función de su resolución, simplemente porque no funcionaría. A todos los efectos, la resolución del iPad sigue siendo de 1024x768 px según el navegador, y apuntar a esta resolución también se dirigiría a todas las generaciones anteriores de iPad. Del mismo modo, apuntar a la nueva resolución de 2048x1536 px con media queries no tendría ningún efecto en el nuevo iPad.
En su lugar, podemos dirigirnos a las distintas resoluciones mediante la consulta min-device-pixel-ratio. Esta consulta o media query indica al explorador que cargue un estilo específico basándose en la proporción de píxeles del dispositivo con los "píxeles CSS" antes mencionados. En el caso del iPad equipado con Retina Display, se trata de dos (1024:2048 y 768:1536 simplificados hasta 1:2).
Por lo tanto, podemos cargar en una hoja de estilo "retina" basada en la proporción de píxeles del dispositivo.
1 |
<link rel="stylesheet" type="text/css" href="retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" /> |
Obviamente, usamos el prefijo WebKit ya que el navegador del iPad es Safari, un navegador WebKit, pero también porque la media query está disponible sólo a través de WebKit por ahora. Dado que los estilos se heredan en cascada (como el nombre "CSS" te dirá), simplemente ordenando la etiqueta anterior correctamente, las reglas en esa hoja de estilos sobrescribirán las de los dispositivos estándar especificados anteriormente.
Si no deseas colocar todo en una hoja de estilos completamente independiente, puedes utilizar media queries en línea para especificar partes de tu hoja de estilo solo para dispositivos equipados con Retina Display, de la siguiente manera:
1 |
@media(-webkit-min-device-pixel-ratio: 2) { |
2 |
#element { |
3 |
background-image('image-2x.png');
|
4 |
}
|
5 |
}
|
Nota: Aunque el uso del esquema de nomenclatura "2x" es una forma útil de organizar tus imágenes, no te sientas obligado a hacerlo. Puedes nombrar tus imágenes como quieras y, a diferencia de las aplicaciones nativas, no necesitan ni siquiera ser remotamente similares.
Por supuesto, el uso de esta media query no es de ninguna manera algo específico para el iPad. De hecho, la misma lógica se activará al navegar por tu sitio en cualquier dispositivo con una densidad de píxeles similar que emplee la misma proporción de píxeles CSS a dispositivo, incluyendo el iPhone 4 y el iPhone 4S. Si deseas dirigirte solo al iPad, puedes simplemente combinar la query de proporción de píxeles con una de ancho, para así especificar solo los dispositivos equipados con Retina Display de la resolución del iPad.
Conclusión
No es que tu sitio no se vaya a ver bien sin optimización, sino que se verá mejor con ella. Sólo tienes que visitar un sitio rico en imágenes, pero no optimizado, para entender cuan terriblemente se ven las imágenes no preparadas para dispositivos Retina en el nuevo iPad. Y, en última instancia, es necesario ser testigo de los resultados. Si no tienes acceso a un nuevo iPad, te recomiendo que hagas un viaje a una Apple Store para echar un vistazo.
Aunque Apple ha vendido millones de unidades, en el gran esquema de los navegadores, sigue siendo una pequeña preocupación. Sin embargo, con la posible llegada este verano del MacBook equipado con Retina Display en el horizonte, invertir en este trabajo ahora, podría realmente dar sus frutos más tarde.
