9 normas esenciales para crear galerías de imágenes responsivas

9 normas esenciales para crear galerías de imágenes responsivas

El diseño responsivo es una parte esencial y necesaria en el desarrollo web. Uno de los mayores problemas con el diseño web responsivo son las imágenes. Muchos debaten la mejor manera de mostrar las imágenes en un sitio responsivo. ¿Qué pasa con galerías de imágenes?

  • Slideshows: ocultar los elementos de navegación siempre que sea posible

Puede que no tenga elementos de navegación en un dispositivo móvil o tableta, sino solo en un escritorio, es una buena idea ocultarlos, solo hasta que sean necesarioa. Los elementos como las flechas para avanzar y retroceder y los puntos de navegación deben establecerse en la pantalla sólo cuando el ratón se deliza encima de las imágenes. Esto evita las distracciones, y evita conflictos entre los elementos de contenido y navegación.

  • Evitar demasiadas imágenes de retratos

Si estás implementando una galería de imágenes, lo ideal es que lo hagas en forma de cuarícula. Esto hace que sea más fácil su visualización en una pantalla pequeña. Las imágenes de retratos se verian bien en un smart phone en modo vertical, pero es más difícil de verlas en modo apaisado. Todas las imágenes se pueden ajustar para caber dentro de un área de visualización, pero las imágenes de retratos en una pantalla apaisada  se muestran muy pequeñas.

  • El uso de gestos en tabletas

A la gente le encanta usar gestos en sus pantallas táctiles. Se sienten más fortalecidos cuando sienten que están deslizando una imagen, porque la experiencia es más inmersiva. Tocar las flechas pequeñas o puntos de navegación en un dispositivo móvil es demasiado tedioso. Es mucho más natural para poder mover su dedo y pasar una imagen, abajo, izquierda, o derecha.

  • Evitar lightboxes: desactivarlos en el móvil

Si usted tiene imágenes de productos, como maquinaria o elementos que se deben ver con más detalle (tela, joyas, etc.), una caja de luz con imágenes más grandes tiene sentido. Incluso entonces, sólo se debe utilizar en el escritorio. Cuando se descomponen a tamaños de pantalla móvil y tablet, cajas de luz deben deshabilitarse. Pueden causar una serie de problemas de experiencia de usuario.

  • Al usar elementos de navegación, que sean discretos

Si tienes una galería de imágenes deslizante con un importante número de fotos, la navegación tiene sentido. No vas a querer que los usuarios tengan que esperar para visualizarlo todo y es normal que uses elementos de navegación. Al utilizar estos elementos, asegúrese de colocarlos en sitios que no dificulten la navegación. No coloque elementos de navegación sobre enlaces o encima de textos. También, evitae controles demasiado complejos. Estos ocupan mucho espacio, distraen a los usuarios del contenido y crean un aspecto desordenado.

gal_res

  • No mezclar imágenes y videos

La mezcla de diferentes medios de comunicación está generalmente bien, pero la mezcla de videos e imágenes puede causar problemas. El inicio accidental de un video que reproduce sonido puede ser un grave estorbo para el usuario. Distintos videos e imágenes, donde el usuario no sepa donde pulsar puede ser molesto. A nadie le gusta ese tipo de sorpresas.

  • Asegúrese de no escalar las imágenes más allá de su ancho máximo

Esto es importante, porque puede evitar el pixelado de las imágenes que son demasiado pequeñas. Las imágenes deben ser lo suficientemente grandes como para llenar el 100% de un dispositivo móvil (para la mayoría de los casos), pero el tamaño para el escritorio debe establecerse como máximo al 100% de ancho.

  • Escalado de imágenes

Si tienes que escalar imágenes, asegúrese de que lo haces hacia abajo, nunca hacia arriba. Es mejor establecer las dimensiones exactas para sus imágenes. Muchas veces, un porcentaje se utiliza para una dimensión, mientras que la otra dimensión se establece en automático. Por ejemplo, si quieres que una imagen abarque el 50% de la anchura del navegador, se establecería la anchura de la imagen al 50% y la altura automáticamente.

  • Evitar el uso de títulos de imagen

Los títulos de imagen o cualquier otro texto que las acompañen puede causar a todo tipo de problemas para usted y sus usuarios. El primer problema es que es difícil de encajar el texto en un dispositivo móvil. Está limitado por la cantidad de texto que puede utilizar. Tenga en cuenta los saltos de palabra, y cómo varias líneas de texto van a terminar junto con su imagen. Si el texto se utiliza como recubrimiento, también tienes que saber donde caerá sobre la imagen en el dispositivo movil. Depende de la como refleje la luz en el movil hará que el texto sea ilegible. El contraste es clave, y cada imagen es diferente.