Sitios web con grandes imágenes de fondo

Actualmente es muy común ver sitios web cuyo elemento visual predominante es una imagen de gran tamaño como fondo del contenido. Buscando ejemplos podemos ver fondos muy diferentes: pueden mostrar el interior de un local, alguno de los productos que vende la empresa, sus empleados trabajando o incluso imágenes no relacionados con la marca, como paisajes o atardeceres. Esta tendencia se populariza al mismo tiempo que aumenta el tamaño de los monitores de escritorio, permitiendo el lucimiento de imágenes cada vez más grandes. Conozcamos sus ventajas y sus desventajas.

Ventajas

  • Poder de comunicación. Una imagen de gran tamaño captura inmediatamente la atención del usuario. Si elegimos la imagen adecuada, en apenas segundos podremos comunicar exactamente el mensaje que queremos.
  • Mostrar productos. Muchas veces la imagen de fondo no es fija, sino que el usuario puede cambiarla a través de botones ubicados debajo (a la manera de un slideshow o presentación de diapositivas). Los usuarios siempre valoran las imágenes de productos en alta resolución.
  • Facilidad. Colocar una gran imagen ocupando todo el ancho de la pantalla no es difícil (ver tutorial) y permite obtener un sitio web atractivo en poco tiempo.

Desventajas

  • Carga lenta. Las imágenes en alta resolución son pesadas, añadiendo una importante demora a la carga de la página. Los usuarios de dispositivos móviles (acostumbrados a conexiones lentas) serán los más perjudicados.
  • Mala legibilidad. Contrastar el color del texto con el del fondo es más difícil cuando el fondo es una imagen, que tendrá diferentes colores. Esto se puede solucionar encerrando el contenido en bloques de texto con fondo de color (o semitransparente), aunque implique tapar parte de la imagen (ver ejemplo).
  • Dificultad. Es difícil desarrollar un sitio web de este tipo que sea responsivo. Además, al reducirse el tamaño de la imagen se pierde definición. Por otra parte, el contenido también debe ser ajustado a dimensiones pequeñas y termina ocupando una parte de la pantalla tan grande que impide el lucimiento del fondo.

A pesar de sus problemas, el uso de una gran imagen de fondo aporta un poder de impacto difícil de alcanzar con otros tipos de plantilla.

Diseñando sitios web con scroll infinito

Cada vez más sitios web incorporan una característica conocida como «scroll infinito»: si nos desplazamos hacia abajo, se carga más y más contenido, impidiéndonos alcanzar el pie de página. Este recurso es utilizado por sitios como 9GAG, Facebook, Twitter, Google Imágenes y los microblogs de Tumblr, donde, cada vez que creemos llegar al final de la página, se carga un nuevo conjunto de posts. Se trata de un enfoque opuesto a la tradicional paginación, que consiste en dividir el total de entradas en páginas separadas. El scroll infinito es una forma inteligente de sumar a los blogs, las tiendas online y otros sitios de mucho contenido a la moda one-page, pero ¿es realmente conveniente?

Ventajas

  • Practicidad. Los sitios web con un alto componente social (como redes sociales y plataformas colaborativas) suman, segundo a segundo, un enorme volumen de contenido generado por los usuarios. Nadie pretenderá leer todo el contenido que se publicó en ellos desde el principio. Por lo tanto, puede ser inútil dividir el archivo en miles de páginas.
  • Velocidad. Cargar publicaciones progresivamente en la misma página suele ser más rápido que cargar nuevas páginas de archivo.
  • Visibilidad. Rara vez se nos ocurre pasar a la segunda página del archivo de un blog o de una lista de resultados de búsqueda. Pero con scroll infinito, incluso las publicaciones antiguas salen fácilmente a la luz.

Desventajas

  • Falta de control. El enfoque paginado nos permite saber exactamente dónde estamos parados. Si en un blog quisiéramos leer los posts de mayo de 2009 y no tuviéramos accesos directos a los archivos mensuales, podríamos necesitar horas de scroll para llegar adonde queremos.
  • Poca estabilidad. Si ya se cargó un volumen de contenido considerable, es probable que el browser se quede sin memoria y colapse.
  • Desorientación. Un usuario puede querer, por algún motivo, acceder al footer de la página, pero este no existirá o bien será inalcanzable hasta que se haya cargado todo el contenido. El scroll infinito puede acarrear una experiencia frustrante.

Antes de implementar scroll infinito, debemos analizar si realmente mejora la experiencia de usuario más allá de ser una característica estéticamente llamativa.

Diseño web simple, una opción que crece

Es habitual que, a la hora de emprender un proyecto online, soñemos con un sitio web plagado de funcionalidades y detalles visuales impactantes. Quien defienda esta idea podrá pensar que sobrecargar una página de elementos es una manera fácil de lograr que el usuario conozca todos nuestros servicios a simple vista. El resultado puede ser una página de inicio con menús de navegación que abarcan todo el ancho de la pantalla, barras de búsqueda que se confunden con formularios de contacto o casillas para suscribirse al newsletter, gadgets innecesarios, banners de publicidad mal ubicados e imágenes o animaciones Flash por todas partes.

Sin embargo, los diseños simples cargan más rápido, utilizan menos recursos del servidor, son más fáciles de desarrollar y ayudan a una mejor navegación. Puede pensarse que un sitio web con pocos elementos tendrá un aspecto rudimentario o será demasiado aburrido. Lo cierto es que, desde hace algunos años, los sitios web minimalistas son cada vez más habituales. Pocas páginas internas, pocos colores, textos cortos en tipografías muy grandes, una sola imagen (de gran tamaño) por página o incluso ninguna son las características más habituales en los sitios que siguen este estilo. Una tendencia que acompaña el crecimiento de la navegación desde dispositivos móviles, cuya pequeña pantalla exige pocos elementos y botones grandes.

Una forma de simplificar nuestro sitio web es aplicar la regla 80/20: un 20% de lo que se ofrece en nuestro sitio web representa un 80% de lo que el usuario estaba buscando. Podemos centrarnos en ese 20% y eliminar todo lo demás. Esa mínima porción puede incluir los testimonios de otros clientes, botones para comprar nuestros productos o el contenido de nuestro blog. Si nos focalizamos únicamente en ese 20%, estaremos eliminando cualquier distracción que pueda estar alejando al usuario de aquello que desea.

Si sabemos administrar bien un conjunto de elementos reducido, lograremos un sitio web elegante, de aspecto profesional y, principalmente, usable.