En la actualidad, son pocos los diseñadores que dudan de la importancia de tener un sitio web que esté optimizado para dispositivos móviles. Para los diseñadores web, a pesar de que se tenga una layout como base, se debe pensar cómo organizar el contenido para que se visualice de mejor manera. Los colores y la fuente seleccionada se mantiene tanto en móviles como ordenadores. Pero, al trabajar con pantallas más pequeñas, se deben modificar los tamaños de las imágenes y el puntaje de la fuente.
En este artículo, te vamos a dar algunos consejos para trabajar con imágenes responsive para tu sitio web.
Considerar las proporciones de las imágenes
Es obvio que la calidad y experiencia de visualización en dispositivos móviles es distinta que la de los ordenadores y portátiles. Sin embargo, para que ambas versiones del sitio se mantengan coherentes, es necesario utilizar las mismas imágenes. El problema es si el mensaje logra ser transmitido tan bien en móviles como en ordenadores.
Los ordenadores poseen una amplia pantalla. Tienes libertad para crear un layout de varias columnas e incluso jugar un poco con la posición de tus imágenes. Tal vez colocar el menú a un lado y utilizar una fotografía impactante que sólo ocupe parte de la pantalla en forma horizontal, pero ocupa más espacio de manera vertical. Tal vez decides añadir una figura diagonal y colocar el menú en este espacio, para que la composición se vea más dinámica. Si bien estas ideas, dependiendo de cómo se ejecuten, pueden ser innovadoras y exitosas en un sitio web que se visualiza desde ordenadores, esas mismas ideas, al pasarlas a la pantalla de un dispositivo móvil, puede que no se vean tan atractivas. Se pierden detalles en la imagen, el menú no es legible, etc. Pueden haber muchos problemas.
Para evitar este tipo de problemas, es mejor considerar la proporción de las imágenes que piensas colocar, así como de los dispositivos con los que estás trabajando. De esta manera, puedes adaptar la layout a diversos tamaños de pantalla.
De ser necesario, cambiar el encuadre
Ya que ahora tus imágenes deben visualizarse correctamente en diversas pantallas, no sólo debes pensar en la proporción de las mismas, sino también en cómo luce la composición en tamaños más pequeños. Si se pierden ciertos detalles, entonces debes plantearte recortar la imagen para que se vea mejor. De hecho, en muchos casos tendrás que utilizar esta estrategia para que la imagen comunique de igual manera en pantallas de ordenadores y de móviles. Así que verifica cómo lucen tus imágenes en pantallas más pequeñas para que puedas recortarlas adecuadamente y que el mismo mensaje se transmite en ambas versiones del sitio web.
Evitar el uso de leyendas
Las leyendas o subtítulos en las imágenes añaden valor a tu sitio. Dependiendo de cómo redactes, las leyendas pueden ayudar a reforzar la personalidad del sitio y hacer sentir más cercano a los usuarios. Pero el problema de añadir leyendas a tus fotografías es que éstas no se pueden visualizar muy bien en dispositivos que poseen pantallas más pequeñas. Aunque modifiques el tamaño de letra, al ser menor el espacio de la pantalla, las líneas de texto aumentan y ocupan más espacio de la fotografía si decides colocarlas encima de las imágenes usando transparencia. Por otro lado, si decides colocar la leyenda debajo de la fotografía, ésta no es visible en ciertos dispositivos móviles a no ser que el usuario se desplace hacia abajo. Y realmente no contribuye a una navegación fluida. Imagen y leyenda deberían estar juntas.
Este problema se puede solucionar ocultando las leyendas en dispositivos móviles, añadiendo un botón para mostrar u ocultar la leyenda o simplemente dejar las leyendas de lado en el diseño del sitio.
No colocar imágenes y videos en un solo slider
En la actualidad, en muchas páginas web se suelen combinar diversos medios como imágenes, audio y video. Particularmente con la tendencia más creciente de colocar videos como fondo y la posibilidad de hacerlo mediante HTML5 por medio de las nuevas etiquetas. Y es perfecto si puedes emplear una gran cantidad de medios en tu sitio web y si es necesario para el diseño. Pero colocar un solo slider que contenga tanto imágenes como video definitivamente no es una buena idea. Esto es porque se pueden producir errores en ciertos dispositivos y no se llega a visualizar ni siquiera la vista en miniatura. Este tipo de errores afectan negativamente la experiencia de usuario, así que para evitar situaciones de este tipo, te recomendamos emplear un slider de imágenes y colocar los videos en una galería por separado.
Utilizar imágenes de calidad
Este último consejos es bastante obvio, pero puede ser un error común. A menudo, encontrar una imagen que comunique, teniendo en consideración el presupuesto del cliente puede ser complicado. Además, existen una gran variedad de bancos de fotos, tanto gratuitos como de pago. Por un lado, es bueno pues tienes mayores opciones para elegir, pero por otro lado también representa una desventaja porque debes revisar más lugares para asegurarte de elegir la fotografía perfecta.
Con el paso del tiempo, encontrarás algunos bancos de fotografías que realmente tengan imágenes de calidad. Te recomendamos que guardes los enlaces de estos sitios en un documento de Excel. De esta manera, vas creando una base de datos con los mejores sitios para encontrar fotografías. Si el trabajo de algún autor te parece especialmente atractivo, entonces también puedes añadirlo a esta base de datos para que en futuros proyectos puedas encontrar fotografías más fácilmente.
En conclusión…
Las imágenes son una parte importante de cualquier web. Es uno de los contenidos preferidos de los usuarios y de hecho, es el tipo de contenido que esperan ver en cualquier sitio web. Si hay algún texto, esperan que esté acompañado de alguna imagen, ya sea una fotografía o ilustración. Ya que actualmente también se debe pensar en los usuarios que acceden desde dispositivos móviles, hay que tener ciertas precauciones al elegir y colocar imágenes en un sitio web.
