Las modas en Internet son un ciclón y de vez en cuando aparece un nuevo recurso que cambia el diseño web de los próximos años. Si primero hubo que meter backgrounds con imágenes «width:100%», hoy en día, si quieres hacer una web que mole, no se te puede olvidar meter un vídeo de fondo que:
- Se reproduce automáticamente.
- No tiene sonido.
- Ligeramente oscuro, para que contraste con las letras blancas que pones encima con frases aspiracionales.
- Con botones de esos que solo son un borde blanco y que en hover hacen de todo.
- Con un buscador bien gordo en el centro con el botón a color chillón.
Si lo que buscabas era saber cómo se hace técnicamente en este post te lo cuentan en inglés: http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video
Y si vas justo en lo que viene siendo desarrollo, puedes descargarte algún tema de WordPress que lo incluya entre sus funcionalidades. Echa un ojo por AQUÍ
Ventajas de usarlo
- Si te das prisa igual consigues ser uno de los 100 primeros que lo haces y sales en alguna review, en thefwa, o en awwwards.
- Durante un tiempo a los usuarios les flipará tu página y se quedaran embobados viendo los sugerentes vídeos que van pasando.
- Si el recurso ayuda a contar el mensaje estarás haciendo un buen uso de él.
Problemas que te puedes encontrar
- Se hace con HTML5 y hay exploradores en los que no funciona. Pobre Explorer y pobres móviles. Aunque siempre queda la solución Graceful degradation con la imagen estática de sustitución.
- Puedes despistar al usuario, afectando a la conversión y al user experience, cuando parece que está claro que lo que quieres es que interactúen con el buscador gordo del centro. Sobre ello hay una interesante discusión que puedes leer en esta entrada de Quora
- Hay que hilar fino para que no se afecten los tiempos de carga de la página. Airbnb lo soluciona cargando un primer fotograma hasta que el resto del vídeo comienza a reproducirse.
Mi visión de futuro
Seguramente su evolución no será diferente a la que ya hemos visto a lo largo de la historia del diseño en internet, siguiendo los mismos pasos que las intros en flash, las páginas hechas enteras en parallax, los mega-menus, el menú hamburguesa (con el que ya me metí en este post), etc. Más o menos funciona siempre así:
- Los primeros que lo hacen molan y se pueden permitir los problemas que se pueda derivar del uso del recurso.
- Todos los diseñadores quieren hacer algo así en cuanto lo ven y la bola crece.
- Poco después, los diseñadores empiezan a criticar el abuso del recurso y se plantean su utilidad real.
- Los marketers lo ven meses después de que se convierta en tendencia y lo quieren en sus páginas.
- Los primeros en usarlo puede ser que testeen la solución, los siguientes solo se suman al carro de la molonidad y no hacen ni un solo test de usuario.
- Las modas se alargan durante años y cada vez el recurso es menos llamativo y menos útil y al final solo quedan los problemas derivados del uso.
Algunos que lo usan
Si te han sabido a pocos, échale un ojo a estos dos post que recopilan otro puñado de webs que utilizan el video como background:
http://www.hongkiat.com/blog/fullsize-video-background-websites/
http://line25.com/articles/20-web-designs-with-stunning-video-backgrounds
¿Qué os parece a vosotros? ¿Moda buena o moda a odiar?
A mí me gustan mucho, me parecen un recurso visual que enriquece la experiencia y puede contar historias. Como cualquier recurso, hay quien sabe usarlo y hay quien no. Es verdad que verlos por todas partes acabará por hacerlos invisibles como los banners.
Claro que molan! El problema es cuando se usa por seguir la tendencia sin testear si es la mejor solución o si afectan a la conversión. El diseño debe evolucionar y salir de los gustos particulares y tener en cuenta lo que se testea, pero esa fase suele quedar en el olvido.
Bravo por el post! Se puede decir más alto pero no mas claro 😀
Precisamente ando en esta tesitura con un cliente que quiere una web tipo Las Vegas, a ver si logro traerlo al mundo real XDD
Gracias Eduardo! Y mucha suerte!
Hola! Tu post me sirvio muchisimo!, gracias por compartirlo. Sin embargo tengo una duda, para MOZ o safari no funciona. ¿Cómo puedo mejorarlo? –
Hola, gracias por comentar!
Como comento en el post es un recurso que da problemas en diferentes navegadores, además de que empieza a ser algo sobreexplotado. Antes de implementar la solución, pregúntate e investiga si realmente es la mejor solución para tus usuarios.