Ha pasado bastante tiempo desde que se lanzaron por primera vez las pantallas Retina en dispositivos iOS, pero todavía hay muchos sitios web por ahí que no están listos para Retina, incluso cuando los diseñadores y desarrolladores se han dado cuenta de los hechos de un dispositivo móvil totalmente sensible. mundo amigable
Esto es lo que necesita saber acerca de las opciones para hacer que su trabajo se vea mejor en las pantallas Retina cada vez más comunes. La buena noticia es que, por más desalentador que parezca, realmente no es tan complicado.
$config[code] not foundPreparando su sitio web para imágenes listas para la retina
Duplica tu diversión
En realidad, hay varias formas en que puedes desollar a este gato, por así decirlo. En la primera, deberás mejorar tu CSS un poco e incluir versiones de tus imágenes al doble de su resolución normal. El CSS determinará qué imagen mostrar en función del dispositivo en el que se está viendo su sitio.
Las actualizaciones de CSS que necesitarás variarán dependiendo de tus navegadores de destino, pero la buena noticia es que ahora no es terriblemente complicado y se está volviendo más fácil. Dejaremos la codificación actual para otro día.
Una cosa a tener en cuenta: es posible que desee desarrollar una convención de nomenclatura para las imágenes de la retina, de modo que pueda asociar fácilmente las dos versiones de una imagen en caso de que deban editarse más adelante.
SVG
Otro enfoque es SVG, o gráficos vectoriales escalables. Como su nombre lo indica, estos se limitan a gráficos vectoriales y no funcionarán con imágenes fotográficas, pero los gráficos SVG eliminan la necesidad de dos archivos de imagen para cada gráfico en su sitio. Una vez más, hay variaciones de un navegador a otro, por lo que querrás hacer una investigación adicional según tus necesidades.
Y como se señaló anteriormente, es probable que SVG no funcione como su única solución en la mayoría de los sitios, a menos que el sitio no contenga imágenes de tipo fotográfico.
Fuerza bruta
Por supuesto, también puede simplemente volcar los archivos de baja resolución y simplemente entregar las imágenes listas para Retina. Solo lo recomendaríamos para usos con una audiencia muy bien definida. Si sabe que el ancho de banda no será un problema, esta podría ser la ruta correcta, pero ciertamente no es una buena práctica
Otras soluciones de codificación
En el otro extremo del espectro de esfuerzo y elegancia están los métodos de codificación que se basan en algunos cambios del lado del servidor (como las entradas del archivo.htaccess) junto con la codificación PHP y Javascript.
Este podría ser su mejor enfoque, aunque el esfuerzo involucrado puede no valer la pena para proyectos más pequeños.
En general, el enfoque que tome dependerá de su audiencia, la naturaleza de las imágenes de su sitio y el nivel de experiencia técnica de su equipo de desarrollo. Hay una buena solución para cada situación. La única mala solución es ignorar las pantallas Retina por completo.
Foto NASDAQ a través de Shutterstock
