Detener persiguiendo resoluciones de pantalla
Vivimos en un momento tan emocionante en el mundo de la web. La tecnología y los estándares avanzan a un ritmo tal vez más rápido y más emocionante que nunca. A medida que las cosas cambian, también lo hacen nuestros hábitos, y un área que creo que ha visto cambios más grandes que la mayoría debería ser el cambio en la resolución que nuestros dispositivos están ejecutando.
La resolución es algo divertido de medir; no es un cambio de tamaño físico, sino un cambio de claridad. No está haciendo imágenes, más brillantes o más ricas en color, sino que las hace más densas. También es algo que las personas rara vez comprenden el valor de hasta que lo ven por sí mismos.
Por supuesto, cuando tenemos una muestra de pantallas de alta resolución, estamos enganchados. Y todos queremos que nuestros sitios web (y los sitios web de nuestros clientes) se vean increíbles en los dispositivos que exhiben estas pantallas. Muchos diseñadores web están corriendo hacia ese objetivo creando imágenes para cada nueva resolución que se nos presente. O, como lo llamo en este artículo, "persiguiendo resoluciones de pantalla".
Una introducción a SVG
Muchos de nosotros sabemos lo que son los SVG (Scalable Vector Graphics). Lo hemos visto en el sitio web de W3C HTML5, en "3D, Gráficos y Efectos". SVG es una tecnología estándar HTML5 que muestra imágenes con código. O algo.
Al menos, esa es la respuesta general que obtuve cuando le pregunté a la gente sobre los gráficos SVG. En realidad, no es algo que le interese a la gente, porque su valor no se comprende del todo.
Quiero mostrarte cómo evitar "perseguir resoluciones de pantalla", y sucede que el estándar SVG puede ayudarnos a hacer precisamente eso.
El estado de los gráficos retina
Cuando digo "gráficos retina", me refiero a cualquier dispositivo que tenga una resolución de pantalla más alta que la de las pantallas tradicionales, con una resolución superior a 72ppi (píxeles por pulgada).
Apple rompió la barrera de 72ppi con el iPhone 4, un dispositivo que tenía una nueva y fantástica pantalla de alta resolución, que se parece a cualquier otra cosa que hayamos visto antes. Excepto cuando lo usaste para navegar por la web ... la web parecía basura.
La web tenía 72ppi de imágenes optimizadas. En el momento de escribir esto, la mayoría de la web aún lo hace, dos años después del lanzamiento del iPhone 4.
Ahora, tenemos todo tipo de dispositivos con gráficos de calidad Retina. Poco a poco va abriéndose paso en toda la línea de productos de Apple, extendiéndose al iPod Touch, iPad e incluso a la última MacBook Pro. Los teléfonos inteligentes están apareciendo por todas partes con pantallas de alta resolución, tanto que una pantalla de resolución "estándar" casi parece vieja en esta etapa.
Depende de la resolución
Cuando la comunidad de diseño web superó el problema de imágenes borrosas con imágenes cargadas de forma condicional @ 2x (imágenes creadas para duplicar el tamaño de sus contrapartes originales, cargadas solo en dispositivos de alta resolución), la web se veía bien nuevamente, en su mayor parte . Algunos diseñadores incluso anunciaron sus sitios web como "independientes de la resolución".
Por supuesto, lo que realmente deberían haber anunciado sus sitios fue "optimizado para dos resoluciones de pantalla".
Los dispositivos seguirán mejorando, las resoluciones seguirán mejorando y la web se seguirá disfrutando en un número cada vez mayor de factores de forma. ¿Qué pasa con el futuro inevitable @ 3x? ¿Qué hay de @ 4x? ¿Qué pasa si el estándar "1x" se vuelve innecesario? ¿Qué hace que 3x "@ 3x" y no "@ 2.5x"?
Desordenado de hecho.
Además, este tipo de técnica apenas se ha difundido. Navego por la web en la ya mencionada MacBook Pro con Retina Display, y la mayor parte de la web está tristemente exactamente donde siempre ha estado desde el iPhone 4: borrosa. Volver a crear todas tus imágenes web es una tarea ardua, especialmente cuando todo el mundo del diseño web ha estado diseñando con bitmaps durante tanto tiempo.
Unzoomable web
Incluso hoy, con nuestras imágenes @ 2x, todavía no podemos hacer zoom en las páginas web sin que vuelvan a ponerse feas. El texto maneja un zoom muy bien, pero en comparación, las imágenes simplemente gritan por esas futuras exportaciones de @ 4x (algo que nadie considerará apropiado para servir solo en caso de que alguien quiera ampliar su icono RSS 4x) .
Ir realmente independiente de la resolución
El problema es con imágenes de mapa de bits. Siempre hemos sabido que no son de primer nivel, y ahora no es diferente. Lo que necesitamos son gráficos vectoriales en nuestros sitios web. Los gráficos vectoriales se calculan mediante una serie de instrucciones, en lugar de hornearse en una cuadrícula donde cada píxel representa un color. Entrar, SVG.
Una talla para todos
Como los gráficos SVG son gráficos vectoriales (de ahí el nombre "Gráficos vectoriales escalables"), se verán increíbles en las resoluciones de pantalla de ayer, hoy e incluso mañana. Además, debido a la naturaleza de fórmula de los gráficos vectoriales, puede acercarse a cualquier dispositivo y las imágenes se verán estupendamente.
Tiempos de carga más rápidos
Hacer una imagen 2000px por 2000px, para un diseñador web, suena nada menos que ridículo. Tardaría demasiado tiempo en cargarse, haría que algunos dispositivos móviles se pusieran de rodillas, y la versión de 4000px x 4000px "@ 2x" sería una locura. Y a medida que las resoluciones mejoran, es simplemente insostenible. Con SVG, dado que es un formato vectorial, no importa si la imagen es 20px o 2000px; el tiempo de carga será exactamente el mismo. Lo único que hace la diferencia en los tiempos de carga es la complejidad de cada archivo de imagen.
Puedes usarlo hoy
SVG puede no ser compatible en general, pero Modernizr puede caracterizar-detectarlo. Al servir una versión SVG y no SVG, puede obtener todos los beneficios de SVG, mientras deja los navegadores heredados con un PNG @ 1x. Es tan simple como esto:
.no-svg .logo { background: url('logo.png'); }.svg .logo { background: url('logo.svg'); }Limitaciones de SVG
No es difícil crear gráficos SVG a partir de cualquier imagen basada en vectores. Muchas aplicaciones profesionales como Adobe Illustrator e Inkscape pueden exportar a SVG de forma nativa. Sin embargo, hay algunas cosas que necesitará saber sobre SVG para la web.
No pueden contener imágenes de mapa de bits de ningún tipo.
Claro, puede agregarlos en las aplicaciones de autoría SVG como Illustrator o InkScape, y guardar su trabajo como SVG, pero no se mostrarán en su lugar: su navegador web. La magia de CSS será necesaria para cargar un mapa de bits sobre el SVG cuando corresponda.
Puede llevar una eternidad cargar si es complicado
Si haces un SVG complicado, recibirás tiempos de carga no muy diferentes a los de la imagen 2000px x 2000px. No querrá dibujar una pintura compleja en formato SVG, por ejemplo.
Tengo que mantenerlo simple
Las aplicaciones como Illustrator e Inkscape pueden hacer mucho más de lo que su navegador web puede manejar. Son aplicaciones completas de ilustración, no aplicaciones de creador de SVG web. De hecho, es seguro suponer que el 90% de la funcionalidad que ofrecen esos tipos de aplicaciones no estará disponible para los espectadores en la web. Si está familiarizado con el software vectorial, deberá aprender formas alternativas de crear los efectos que le encanten.
Intenta aprender el idioma
El código SVG no es algo que pueda "ver en su mente" como puede cuando lee HTML. Es una serie de instrucciones mapeadas respectivamente una contra la otra, elemento por elemento, capa por capa. Lamentablemente, a partir de hoy, es probable que tenga que sumergirse allí de vez en cuando, ya que hay algunos resultados que incluso Adobe Illustrator no ofrece.
Por ejemplo, las imágenes en Illustrator tienen un lienzo dibujado; es un ancho fijo por una altura establecida. Eso es genial, pero si quieres controlar esos detalles en el navegador, necesitas que esa información se elimine del SVG (nota: algunos navegadores interpretarán tu CSS independientemente de cualquier dimensión SVG declarada, pero no todas). No es particularmente difícil, pero puede ser un dolor de cabeza. Vale la pena dedicar un poco de tiempo a conocer el idioma, para poder manipular los SVG aún más.
SVG en estado salvaje
Logotipos
Por lo general, los logotipos deben estar en formato vectorial, por lo que son una excelente forma de incorporar SVG en los diseños de su sitio web. Al usar el marcado anterior, tiene todo lo que necesita para tomar sus primeros elementos SVG en línea.
Iconos
Los iconos son un excelente candidato para SVG. Tanto es así que he creado un conjunto completo de iconos usando gráficos SVG. La naturaleza escalable de SVG significa que los íconos se pueden usar en cualquier tamaño, lo que permite una amplia gama de diseños de sitios.
Animaciones
Las animaciones también son un buen ejemplo para el uso de gráficos SVG. Dado que las animaciones suelen estar atadas a un ancho y alto fijos, SVG ayuda a las animaciones a responder. Flash utilizó elementos gráficos vectoriales, ahora las animaciones HTML5 también lo pueden hacer.
Imágenes de fondo
Las imágenes de fondo siempre han sido un punto complicado para los desarrolladores web; los tiempos de carga potencial, como mencioné anteriormente, pueden ser una locura. Las imágenes de fondo SVG pueden ser tan grandes como desee; todavía tienen tiempos de carga rápidos, siempre que no sean realmente complejos.
Conclusión
Con todo, la independencia de la resolución es un objetivo fantástico para los diseñadores web y los desarrolladores por igual para esforzarse. Incluso significará que sus gustos de diseño estarán desactualizados antes de que aparezcan sus imágenes del sitio. Si bien es importante acercarse a ellos con los ojos abiertos, es bastante claro ver cómo los gráficos SVG pueden acercarte más a un futuro de total independencia de resolución.
Cuando cargue un sitio habilitado para SVG en un dispositivo de alta resolución como un iPad 3 y amplíe, se venderá.
Espero que este artículo ayude a la resolución del pensamiento independiente en el diseño y desarrollo web, y espero que haya alentado a algunos de ustedes a pensar en cómo SVG puede funcionar para su próximo sitio.
He estado en el grupo de SVG por un tiempo, y debo decir que el agua nunca ha sido tan agradable.
¿Es usted un SVG convertido o sirve mapas de bits escalados para pantallas Retina? ¿Son los vectores el futuro de los gráficos web? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen vectorial a través de Shutterstock.