El diseño adaptativo ha ido perdiendo adeptos frente al nuevo Diseño Responsive, el cual ha dominado la web por su adaptación a cualquier tipo de dispositivos de visualización como móviles, tablets, etc.
Al diseñar cualquier sitio web hoy en día, se está diseñando para literalmente cientos de diferentes dispositivos, todos los que ejecutan diferentes sistemas operativos y navegadores. En en este artículo en particular vamos a ver como optimizar las imágenes de un sitio con WordPress para el correcto funcionamiento de este tipo de diseños.
Si no estamos familiarizados con el significado de un diseño adaptativo, este utiliza un conjunto prediseñado de tamaños en el diseño basados en los tamaños de la pantalla de cada dispositivo, el cual junto con CSS y Javascript se adapta a dispositivo detectado. En cambio un sitio Web Responsive cambia de manera fluida y responde para adaptarse a cualquier tamaño de la pantalla o dispositivo. Puedes ver una información más detallada en este artículo.
El tamaño de visualización de las imágenes está integrado en la mayoría de los marcos de trabajo y no requiere de muchos cambios. Con Bootstrap 3 es necesario agregar una clase Img-responsive a nuestra imagen, mientras que Foundation 4 hace el dimensionamiento de la imagen de forma automática.
Escuchamos una y otra vez sobre la importancia de los tiempos de carga de cada página para el SEO y la usabilidad del sitio, y la mayoría de las veces es por falta de una optimización de imágenes que vamos incluyendo en nuestro sitio web.
Antes de empezar
Antes de llegar a el objetivo principal de este artículo, vale la pena mencionar que para cualquier tipo de dispositivo, móvil o de escritorio, siempre es bueno optimizar el tamaño de las imágenes.
Las imágenes grandes pueden ser culpables de los tiempos prolongados de carga, la cual pueden perjudicar nuestro SEO. Hay un plugin llamado WP Smush que puede aplicar automáticamente la optimización de las imágenes de nuestro sitio con WordPress.
Hemos de tener en cuenta que, mientras que el plugin optimiza todas las nuevas imágenes subidas a nuestro sitio una vez que está activado, las imágenes existentes no se ven afectadas. Sin embargo, es posible utilizar la opción de optimización a granel de Smush.it bajo la pestaña “Medios” para optimizar las imágenes existentes. Esta característica está etiquetada como en fase de pruebas, pero nunca he tenido un problema con esta.
Lo importante son los resultados
Es fácil trabajar siempre con Responsive frente a Adaptativo y otros argumentos semánticos. Pero lo más importante es tener en cuenta que la persona que visita nuestro sitio no le importa la estrategia de diseño que utilizamos, ya sea Responsive, Adaptable, ambos o ninguno.
Todo lo que importa al final es la calidad de la experiencia del usuario. La carga de la página en un plazo razonable de tiempo, transmitir el mensaje y la función de manera intuitiva en cualquier dispositivo que se utiliza. Al usuario final no le importa cómo has logrado esos objetivos, siempre y cuando se lleven a cabo.
Seguiremos escribiendo sobre temas de diseño Responsive y usabilidad con WordPress en próximos artículos. Mientras tanto, si conoces otras técnicas de optimización de imágenes para todo tipo de pantallas que te gustaría compartir, se agradece que las incluyas en los comentarios.