Ready or Not, Here Comes HD Diseño Web

Apple está impulsando a la industria tecnológica al aumentar la densidad de píxeles en las pantallas de iPhone y iPad. Esto es genial desde la perspectiva del usuario, pero como diseñador o desarrollador web, literalmente, amenaza con cambiar por completo la forma en que construyes sitios web.

¿Estás listo para el diseño web HD? ¿Sabe cómo se verán sus sitios en una nueva generación de pantallas de alta resolución? ¿Qué pasos puede tomar para prepararse y qué habilidades necesitará para mantenerse relevante en los próximos años? Sigue leyendo para averiguarlo.

Cuando Apple habla, escuchamos

He estado usando las Mac con fidelidad desde los 9 días del SO, no tanto como los antiguos, sino el tiempo suficiente para tomar Kool-aid y volverme completamente adicto a Apple.

Recuerdo que ver un logotipo de Apple significaba que el producto era algo así como un nicho, un valor atípico que solo las personas obstinadas de la sociedad usaban en un intento manifiesto de ir contra la corriente principal, la cultura amante de Windows.

"Si elige una casa al azar, es probable que encuentre al menos un iPod, iPhone y / o iPad dentro".


A través de una impresionante transformación basada en la dedicación a la creación de productos innovadores de próxima generación, la pequeña empresa de los más débiles se ha convertido en la corporación más valiosa del planeta. Es posible que no haya una Mac en cada computadora de escritorio en los Estados Unidos, pero si elige una casa al azar, es probable que encuentre al menos un iPod, iPhone y / o iPad dentro.

No estoy aumentando con elocuencia para convertirte a mi culto, simplemente quiero establecer que Apple es un motor de la industria tecnológica. A nadie le importaron las nuevas características con las que salió Newton, pero cuando Apple lanza un nuevo dispositivo iOS, el mundo se detiene y escucha pacientemente lo que los magos de Infinite Loop nos dicen que se verá el futuro.

Apuestas de Apple en alta resolución

Hasta hace poco, Apple no tenía nada que ver con nuestra fascinación por una mejor resolución de pantalla. Televisores HD más grandes y mejores han sido el foco de los consumidores y las compañías de electrónica durante una década. El marketing inteligente se unió a una tecnología impresionante para crear una sed insaciable de pantallas de alta definición, programación de cable y películas.

En su mayor parte, sin embargo, esta tendencia se ha mantenido alejado de la informática. Claro, hay pantallas de cine enormes y hermosas, pero la densidad de píxeles nunca fue tal que requirió un cambio de paradigma importante. Es decir, hasta hace poco.

Cuando el iPhone 4 cayó a mediados de 2010, vino con una sorpresa: ¿la? Retina? pantalla, que nos asombró al duplicar la resolución anterior con un asombroso 326 píxeles por pulgada (para comparar, un iMac de 27 "es 109ppi). Esto fue un cambio de juego. Hubo muchas especulaciones de que escalar esta tecnología a un precio asequible Sería casi imposible, pero Apple lo ha hecho al duplicar la resolución en el iPad de tercera generación, que llega a 264ppi un poco más bajo pero aún magnífico.

Por qué esto cambia completamente cómo haces tu trabajo

¿Y qué? Gracias por la lección de historia, pero este es un blog de diseño, ¿verdad? ¿A quién le importa la densidad de píxeles de un iPad? Como diseñador web, sí, ya lo sepas o no.

El problema es evidente aquí en este sitio, así como en cualquier otro que visite hoy. Adelante, toma una imagen de la web y ábrela en Photoshop. Ahora abre el cuadro de diálogo Tamaño de imagen. ¿Ves algo interesante?

Los diseñadores web siempre han tenido una pequeña ventaja sobre los diseñadores de impresión: podemos usar ilustraciones de baja resolución. ¿Por qué es una ventaja y no una desventaja? Debido a que las PSD en capas de alta resolución pueden demorar su máquina a un rastreo, las fotos de alta resolución cuestan mucho más dinero, las imágenes de alta resolución tardan en cargarse en la web; La lista sigue y sigue.

Sin embargo, el problema es claro, ¡la imagen de arriba viene en solo 72ppi, mientras que el nuevo iPad es 264ppi! (Esto es una simplificación excesiva del argumento, lea este artículo para obtener más información sobre si realmente está viendo imágenes a 72ppi).

Piensa en lo que eso significa. Apple tiene pantallas de retina en la línea completa de iOS: iPod Touch, iPhone y iPad. Esto significa que millones La gente navega por la web todos los días en pantallas de alta resolución que no muestran sus imágenes correctamente. No se equivoque, esta tendencia solo empeorará a medida que otros fabricantes de dispositivos se pongan al día y Apple explore formas de llevar más densidad de píxeles al siguiente lugar obvio: el mercado de las computadoras portátiles.

¿Qué puedes hacer?

El problema de la densidad de píxeles es interesante. La red representa tantas tecnologías diferentes que se unen en armonía, que puede ser caótica si una de estas tecnologías funciona y altera el equilibrio.

Estamos presenciando la aparición de pantallas de mayor resolución, pero nuestro contenido solo está optimizado para las pantallas antiguas. Además, piense en lo locos que son los desarrolladores web sobre los tiempos de carga de la página con imágenes de baja resolución, ¡ahora imagine la ralentización que obtendría en un sitio con gran cantidad de imágenes como Pinterest si de repente se llenara con imágenes de 326ppi!

HTML puro y elementos web CSS

La buena noticia es que nos hemos estado preparando para esto de alguna manera durante años y ni siquiera lo sabíamos. El auge de CSS3 y HTML5 realmente ha impulsado la idea de reducir la cantidad de imágenes que utilizamos en nuestro marcado.

En estos días, la mayoría de los elementos de la interfaz de usuario se representan en el navegador, lo que significa que se escalan bien en cualquier pantalla que les lances.

Para ilustrar, esto es lo que parece cuando acerco un botón de descarga basado en imágenes en mi iPhone 4.

Ahora, si miro el mismo botón creado exactamente con las mismas dimensiones de píxeles pero procesado mediante CSS, puedo acercarme tanto como quiera con cero degradación de la imagen.

Es una cosa hermosa ¿no es así? La moraleja aquí es que el? Sin imágenes? La tendencia ha dado sus frutos a largo plazo y nos ha brindado mucho menos de qué preocuparnos de lo que hubiéramos tenido las pantallas de retina al utilizar imágenes de gradientes, sombras, esquinas redondeadas y casi cualquier otro estilo avanzado.

Es importante tener en cuenta que los objetos representados con lienzo HTML5 y JavaScript pueden lograr una escalabilidad similar.

SVG

SVG, o gráficos vectoriales escalables, son otro paso importante en el camino hacia la resolución de independencia. Esta tecnología ha existido por mucho tiempo, pero solo recientemente ha sido compatible con varios navegadores con IE9 que finalmente se ha subido al carro.

Cuando pienso en SVG pienso en Adobe Illustrator. Esta aplicación se utiliza principalmente para crear gráficos basados ​​en vectores con una escalabilidad infinita. A su vez, SVG trae esta misma funcionalidad a los gráficos web.

Casi cualquier cosa que pueda compilar en Illustrator y otras aplicaciones de edición de vectores se puede exportar fácilmente como un archivo SVG e implementar en la web como un objeto escalable.

La ventaja aquí sobre CSS parece borrosa al principio, pero se hace evidente cuando se trabaja con imágenes complejas. Es fácil crear botones simples con CSS, pero cuando se trata de construir, por ejemplo, el logotipo de Starbucks, las cosas se complican y se complican mucho.

Como alternativa a las horas y horas de manipulación de CSS y quizás cientos de líneas de código para un solo objeto (suponiendo que incluso es posible con CSS), puede exportar una versión vectorial del logotipo de Starbucks como un SVG e insertarla en su web Página en solo un minuto o dos! Haga clic aquí para ver un ejemplo en vivo de esto. Asegúrese de acercar con Command + y observe cómo la imagen se ajusta a la perfección.

Para obtener más información sobre cómo implementar SVG en su sitio, consulte estos excelentes recursos:

  • Resolución Independencia con SVG
  • Uso de SVG para fondos flexibles, escalables y divertidos, Parte I
  • Jugando con SVG Design

Pero ¿qué pasa con las fotos?

Todo esto está muy bien, pero dado que hemos estado abordando el diseño web sin imágenes con UI durante tanto tiempo, no es realmente una bola curva llevar las cosas un poco más lejos con SVG. El verdadero problema radica en las fotos en la web.

Las fotos son imágenes de mapa de bits y, como tales, simplemente aplastan el sueño del diseño web independiente y de verdadera resolución. No importa lo que saquemos de nuestra bolsa de trucos de diseño web, no podemos evitar esta limitación.

Por ahora, esto significa servir diferentes imágenes a diferentes dispositivos. Esto apesta, pero no quiere que las pantallas sin retina se carguen en esas enormes imágenes y no quiere mostrar imágenes sucias en las pantallas de retina, por lo que esta es su única solución.

Esto se puede lograr a través de consultas de medios y la función de proporción de píxeles del dispositivo. A modo de ejemplo, Hal Gatewood nos muestra cómo podemos dirigirnos al iPad de tercera generación:


¿Qué pasa con las imágenes HTML incrustadas?

El método anterior es muy bueno, pero solo funciona con imágenes de fondo CSS. ¿Qué pasa si quieres incrustar una imagen usando HTML? Aún más, esto también tiene implicaciones drásticas para el video, así que, ¿cómo puede presentar videos personalizados para pantallas de ppi alto?

Desafortunadamente, no hay una respuesta real usando HTML puro. Tal vez la necesidad sea tan grande que veamos algo como esto en el futuro, pero por ahora, no tienes suerte.

La única solución es recurrir a algo más poderoso como JavaScript. Bdoran.co.uk tiene un ejemplo rápido de cómo detectar el iPhone 4 con JavaScript o PHP que debería revisar.

Esto obviamente presenta grandes problemas, sin embargo, para los diseñadores web que intentan quedarse con HTML y CSS y no están familiarizados con JavaScript y otras tecnologías web avanzadas. De repente, este grupo ni siquiera puede presentar contenido simple de una manera que esté optimizado para verlo en la mayoría de los dispositivos.

Conclusión

No importa si amas a Apple o si odias absolutamente todo lo que representan, la realidad es que si eres un diseñador web, el aumento de la pantalla de la retina impulsará una tendencia que cambiará fundamentalmente la forma en que construyes los sitios web. .

En este momento, tenemos algunos cursos de acción para explorar: lienzo HTML5, JavaScript, CSS3, SVG y consultas de medios juntos comprenden su arsenal de armas con las que atacar el problema de su contenido que se ve a más de 264ppi.

Esperamos que en un futuro cercano veamos más opciones robustas para mostrar diferentes imágenes y videos incrustados en HTML a los dispositivos correctos.

Deja un comentario a continuación y déjanos saber tus pensamientos sobre todo esto. ¿Estás emocionado por las nuevas posibilidades o intimidado por el territorio incierto? ¿Comenzará a optimizar su trabajo para las pantallas de retina pronto? ¿Ya lo has hecho?