08/01/2014

Sitios web con grandes imágenes de fondo

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.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce