Creación de la web de Aguas de Veri (Grupo Damm): experiencia inmersiva con vídeos de naturaleza

Aguas de Veri, la marca de agua mineral del Pirineo aragonés perteneciente al Grupo Damm, buscaba renovar su presencia digital con una web que transmitiera la esencia de su producto: naturaleza, pureza y origen. Durante 4 meses trabajamos en el diseño y desarrollo de una experiencia web inmersiva construida sobre Drupal.

Concepto creativo: naturaleza en movimiento

El eje creativo de la web son los vídeos de naturaleza que acompañan al usuario durante toda la navegación. Desde el hero principal hasta las secciones de producto, cada pantalla incorpora secuencias audiovisuales que conectan la marca con su entorno natural: el Pirineo, los manantiales, la montaña.

El reto técnico estaba en que estos vídeos debían cargarse sin penalizar el rendimiento. Implementamos lazy loading de vídeos, compresión adaptativa según el dispositivo y fallbacks en imagen estática para conexiones lentas.

Desarrollo técnico en Drupal

• Gestión de vídeos optimizada — sistema de media management en Drupal con transcodificación automática para servir el formato óptimo (WebM, MP4) según navegador.
• Diseño full-screen responsive que adapta las proporciones de los vídeos a cada breakpoint sin barras negras ni recortes agresivos.
• CMS intuitivo para que el equipo de marketing de Veri pueda actualizar vídeos y contenidos sin intervención técnica.
• Performance — a pesar del uso intensivo de vídeo, la web mantiene tiempos de carga óptimos gracias a la carga diferida y el CDN del grupo.

Resultado

La web de Aguas de Veri consigue lo que pocas webs corporativas logran: que el visitante sienta la marca antes de leer una sola palabra. La combinación de vídeo envolvente y una navegación limpia crea una experiencia memorable que refuerza el posicionamiento premium de la marca.

Por qué Drupal para proyectos corporativos de alta exigencia

Cuando una marca necesita una web que sea a la vez visualmente ambiciosa y sólida por dentro, Drupal sigue siendo una de las mejores opciones del mercado. No es el CMS más popular en número de instalaciones —ese título es de WordPress—, pero es el que eligen una gran parte de las administraciones públicas, universidades y grandes corporaciones cuando el proyecto exige modelado de contenido a medida, gestión avanzada de medios, multilingüe real y un control fino sobre permisos y flujos de trabajo.

La razón es su arquitectura. Drupal trata cada pieza de contenido como una entidad configurable: puedes definir tipos de contenido con los campos exactos que necesitas, relacionarlos entre sí y componer vistas complejas sin escribir consultas a mano. Para una web como la de una marca de gran consumo, eso significa que el equipo de marketing puede gestionar productos, campañas, vídeos y traducciones desde un mismo panel, con la garantía de que la estructura de datos es coherente y escalable.

A esto se suma un historial de seguridad excelente. El equipo de seguridad de Drupal publica avisos coordinados y parches con una disciplina que pocos proyectos igualan, algo determinante cuando detrás de la web hay una empresa que no puede permitirse una brecha. Si la organización opera además bajo marcos de cumplimiento, buena parte de los controles que exige una certificación ISO 27001 —gestión de accesos, registro de cambios, actualizaciones controladas— encajan de forma natural con la manera en que Drupal está construido.

Vídeo inmersivo sin penalizar el rendimiento

El vídeo a pantalla completa es una de las herramientas más potentes para transmitir una marca, y también una de las que más fácilmente arruinan el rendimiento si se implementan mal. Un hero en vídeo mal optimizado puede suponer varios megabytes de descarga antes de que el usuario vea nada, disparando el tiempo de carga y hundiendo las métricas que Google utiliza para posicionar.

La clave está en no tratar el vídeo como una imagen grande, sino como un recurso que se sirve de forma inteligente. El primer paso es la compresión y transcodificación a formatos modernos: AV1 y WebM ofrecen una calidad equivalente a MP4/H.264 con una fracción del peso, y sirviendo el formato óptimo según el navegador se reduce drásticamente el volumen de datos. El segundo es la carga diferida: el vídeo solo debe empezar a descargarse cuando va a ser visible, nunca de golpe al abrir la página.

Hay más controles que marcan la diferencia: definir un poster y una imagen de respaldo para las conexiones lentas, usar preload="metadata" en lugar de descargar el vídeo completo, servir los archivos desde una CDN cercana al usuario y respetar la preferencia prefers-reduced-motion de quien ha pedido reducir el movimiento por accesibilidad. En proyectos de mucho tráfico, además, conviene apoyarse en las técnicas de optimización de rendimiento en Drupal —caché de página, BigPipe y Varnish— para que el HTML llegue casi instantáneo mientras el vídeo se carga en segundo plano.

Todo esto se mide con los Core Web Vitals. El LCP (Largest Contentful Paint) penaliza si el elemento principal —a menudo el propio vídeo o su poster— tarda en aparecer; el CLS castiga los saltos de maquetación cuando el vídeo se carga y desplaza el contenido; y el INP, que sustituyó a FID en marzo de 2024, mide que la página siga respondiendo a la interacción incluso mientras reproduce vídeo. Una web inmersiva bien hecha es la que consigue emocionar sin sacrificar ninguna de estas tres métricas.

Accesibilidad: que la experiencia visual no deje a nadie fuera

Una web muy visual tiene un riesgo evidente: excluir a las personas que no pueden percibir el contenido de la misma forma. La accesibilidad no es un añadido opcional, sino un requisito legal creciente en Europa y, bien entendida, una mejora de experiencia para todo el mundo.

En una web con vídeo esto se traduce en varias prácticas concretas: ofrecer controles de reproducción accesibles por teclado, no reproducir audio automáticamente, respetar prefers-reduced-motion para quien sufre mareo con el movimiento, añadir subtítulos y descripciones cuando el vídeo transmite información, y mantener un contraste suficiente entre el texto superpuesto y las imágenes de fondo. Cuando el proyecto está sobre Drupal, además hay que atender al plano legal: lo desarrollamos en detalle en nuestra guía de accesibilidad web y RGPD en Drupal, que cubre tanto las pautas WCAG como las obligaciones de protección de datos.

SEO en webs muy visuales: el texto sigue mandando

Existe la tentación de pensar que, si la web entra por los ojos, el texto y el SEO importan menos. Es un error. Los buscadores —y cada vez más los asistentes de IA— siguen necesitando texto para entender de qué va una página. Una web inmersiva debe combinar su fuerza visual con una base sólida de contenido indexable: encabezados jerárquicos, textos descriptivos, atributos alt en las imágenes y datos estructurados.

Para el vídeo en concreto, el marcado VideoObject de Schema.org ayuda a que Google entienda y muestre el contenido audiovisual en los resultados. Y como el rendimiento es un factor de posicionamiento, cada mejora en la carga del vídeo es también una mejora de SEO. En otras palabras: en una web bien construida, diseño, rendimiento y posicionamiento no compiten, se refuerzan.

Monolítico o headless: cómo elegir la arquitectura

No todos los proyectos inmersivos necesitan la misma arquitectura. Drupal puede funcionar de forma tradicional —renderizando las páginas él mismo— o como backend headless, exponiendo el contenido por API para que un frontend independiente (React, Vue, Next.js, Astro) lo consuma. La segunda opción brilla cuando se busca la máxima libertad de diseño, animaciones muy elaboradas o compartir el mismo contenido entre web, app y otros canales.

La contrapartida del headless es una mayor complejidad de desarrollo y despliegue, y algunos retos añadidos en previsualización, SEO y autenticación. Por eso la decisión debe tomarse caso por caso: analizamos las señales a favor y en contra en nuestra guía sobre cuándo desacoplar el frontend en Drupal y en la de integración de Drupal con React y Vue. Para una web de marca como la de este caso, un enfoque monolítico bien optimizado suele ofrecer el mejor equilibrio entre impacto visual, mantenibilidad y coste.

Cómo abordamos un proyecto así en Keliam

Un proyecto de web inmersiva no empieza por el código, sino por entender la marca y el objetivo de negocio. En la fase de descubrimiento definimos el concepto creativo, el mapa de contenidos y los criterios de rendimiento que no queremos sacrificar. A partir de ahí prototipamos las pantallas clave —el hero, las secciones de producto— y validamos con el cliente antes de escribir la primera línea de producción.

El desarrollo se apoya en un modelado de contenido pensado para que el equipo de marketing sea autónomo, un pipeline de medios que transcodifica y optimiza cada vídeo, y una batería de pruebas de rendimiento y accesibilidad en cada iteración. Y no termina el día del lanzamiento: una web así requiere mantenimiento continuo —actualizaciones de seguridad, monitorización y ajustes de rendimiento— para seguir rindiendo con el paso del tiempo. Ese acompañamiento es justo lo que ofrecemos con nuestros servicios de desarrollo y mantenimiento Drupal.

Gestión de medios en Drupal: el motor silencioso del proyecto

Detrás de una web con decenas de vídeos y cientos de imágenes hay un sistema de gestión de medios que rara vez se ve, pero que determina si el proyecto es sostenible en el tiempo. Drupal incorpora una biblioteca de medios que permite reutilizar los mismos archivos en distintas páginas, aplicar estilos de imagen (recortes y tamaños responsive) de forma automática y organizar el contenido audiovisual con taxonomías y metadatos.

Para el equipo que mantiene la web, esto es la diferencia entre subir un vídeo una vez y que se sirva optimizado en todos los dispositivos, o tener que preparar manualmente cada variante. Un buen pipeline de medios transcodifica el vídeo a los formatos objetivo, genera el poster de respaldo y publica los archivos en la CDN sin intervención técnica. Ese trabajo invisible es lo que permite que una web ambiciosa siga siendo fácil de actualizar meses después del lanzamiento.

Errores comunes en webs inmersivas con vídeo

Después de años desarrollando proyectos de este tipo, vemos repetirse los mismos fallos. El más habitual es reproducir el vídeo con audio automático: molesta al usuario, provoca abandonos y muchos navegadores lo bloquean directamente. El segundo es cargar el vídeo completo al abrir la página en lugar de diferirlo, con el consiguiente golpe al tiempo de carga y al consumo de datos en móvil.

También es frecuente olvidar el fallback: si el vídeo no carga —por conexión lenta, por una política de ahorro de datos o por un formato no soportado—, el usuario debe ver al menos una imagen de calidad, nunca un hueco negro. Otro error caro es descuidar el móvil, donde vive la mayoría del tráfico: un vídeo pensado solo para pantallas grandes se ve mal y pesa demasiado en un smartphone. Y, por último, ignorar la accesibilidad y la preferencia de movimiento reducido, que además de excluir a personas puede acarrear problemas legales.

Medir el impacto: más allá de que quede bonito

Una web inmersiva no es un ejercicio estético, sino una inversión que debe rendir. Por eso conviene medir su impacto con datos y no solo con la sensación de que «queda espectacular». Las métricas de rendimiento —Core Web Vitals, tiempo hasta el primer fotograma del vídeo, tasa de reproducción— indican si la experiencia técnica está a la altura.

Del lado del negocio, importan el tiempo de permanencia, la profundidad de scroll, la tasa de rebote y, sobre todo, las conversiones: contactos, suscripciones o ventas según el objetivo de la web. Comparar estos indicadores antes y después de un rediseño inmersivo es la forma honesta de saber si el esfuerzo ha valido la pena. En nuestra experiencia, cuando el vídeo está bien integrado y la web es rápida, la mejora en percepción de marca y en permanencia es clara; cuando se sacrifica el rendimiento por el efecto visual, ocurre lo contrario.

Tendencias 2026 en webs de marca inmersivas

El terreno de las webs inmersivas no deja de moverse, y algunas tendencias marcan por dónde irán los proyectos de marca en 2026. La primera es la consolidación de AV1 como códec de referencia: su soporte en navegadores y dispositivos ya es lo bastante amplio como para servirlo por defecto y reservar MP4 solo como respaldo, con un ahorro de ancho de banda muy notable.

La segunda es la obsesión sana por el rendimiento. Con el INP plenamente asentado como métrica y con usuarios cada vez menos pacientes, ninguna marca seria acepta ya una web preciosa pero lenta. El vídeo se integra con más cuidado que nunca: cargas diferidas, formatos adaptativos y una arquitectura de caché pensada desde el primer día.

La tercera es la accesibilidad como estándar, no como extra, empujada por la normativa europea que la convierte en obligación para un número creciente de empresas. Y la cuarta, más de fondo, es la importancia del contenido estructurado para que tanto los buscadores como los nuevos asistentes de IA entiendan y citen la web. Paradójicamente, en la era de lo visual, tener el texto y los datos bien ordenados es más importante que nunca. La buena noticia es que una base técnica sólida —como la que sostiene el proyecto de Aguas de Veri— envejece bien: los principios de rendimiento, accesibilidad y arquitectura limpia siguen vigentes años después.

Preguntas frecuentes

¿El vídeo de fondo perjudica el SEO? No, si está bien implementado. El riesgo real es el rendimiento: un vídeo pesado que ralentiza la carga sí penaliza. Con transcodificación, carga diferida y CDN, el impacto en velocidad es mínimo y el beneficio de marca es enorme.

¿Qué formato de vídeo conviene usar en 2026? Lo ideal es servir AV1 o WebM a los navegadores que los soportan, con MP4/H.264 como respaldo universal. AV1 ofrece la mejor compresión, pero conviene tener siempre un fallback compatible.

¿Se puede tener una web así y buenos Core Web Vitals a la vez? Sí. La clave es que el elemento principal aparezca rápido (buen LCP), que nada salte al cargar (CLS bajo) y que la página siga respondiendo a la interacción (INP). Se consigue con carga diferida, poster de respaldo y una arquitectura de caché adecuada.

¿Drupal o WordPress para un proyecto corporativo con vídeo? Ambos pueden hacerlo. Drupal aporta ventaja cuando hay modelado de contenido complejo, multilingüe exigente, muchos perfiles de usuario o requisitos de seguridad y cumplimiento elevados. WordPress suele ser más ágil para proyectos más sencillos.

¿Cuánto se tarda en desarrollar una web inmersiva? Depende del alcance, pero un proyecto de marca con vídeo bien cuidado suele moverse en el entorno de varios meses entre descubrimiento, diseño, desarrollo y pruebas. Lo importante no es la rapidez, sino no comprometer rendimiento ni accesibilidad por acelerar.

Si tu marca necesita una web que comunique a través de la experiencia visual — o una tienda online que convierta —, cuéntanos tu idea.