Web de Cerveza Turia (Grupo Damm): scroll horizontal y eventos de Valencia en Drupal

Cerveza Turia, la marca icónica valenciana del Grupo Damm, necesitaba una web que capturara la energía de Valencia y la personalidad de la marca. Durante 4 meses desarrollamos una experiencia web en Drupal con un toque creativo diferencial: navegación por scroll horizontal y una sección de eventos en vivo de la zona de Valencia.

Scroll horizontal: una navegación diferente

En lugar de la navegación vertical tradicional, la web de Turia invita al usuario a descubrir la marca desplazándose horizontalmente. Esta decisión de diseño no es un capricho estético: refleja la idea de un recorrido, como pasear por las calles de Valencia descubriendo rincones. Cada sección se revela como un nuevo escenario.

Técnicamente, el scroll horizontal presenta retos importantes: la compatibilidad entre dispositivos, la accesibilidad para usuarios de teclado, el comportamiento táctil en móvil y la integración con las convenciones de navegación del usuario. Resolvimos cada uno con una implementación custom en JavaScript que detecta el contexto del dispositivo y adapta la interacción.

Eventos de Valencia en tiempo real

La web incluye una sección dinámica de eventos vinculados a la escena cultural y gastronómica valenciana, reforzando el vínculo de Turia con su territorio. El equipo de marketing gestiona estos eventos directamente desde el panel de Drupal con campos estructurados: fecha, ubicación, descripción e imagen.

Desarrollo en Drupal

• Motor de scroll horizontal — implementación custom con transiciones suaves, soporte táctil y fallback vertical en móvil para mantener la usabilidad.
• Gestor de eventos — content type personalizado en Drupal con geolocalización, filtrado por fecha y categoría, y archivo automático de eventos pasados.
• Integración visual con la marca — paleta de colores, tipografía y elementos gráficos alineados con la identidad de Turia.
• Rendimiento — lazy loading de assets pesados y precarga inteligente de las secciones adyacentes al viewport horizontal.

Resultado

La web de Cerveza Turia ofrece una experiencia de navegación que sorprende y diferencia a la marca de cualquier competidor. El scroll horizontal se convierte en un vehículo narrativo que cuenta la historia de Turia mientras el usuario explora, y la sección de eventos conecta la marca con la vida real de Valencia.

Cómo se construye un scroll horizontal que no rompe la web

El scroll horizontal tiene mala fama, y con razón: mal ejecutado, secuestra la rueda del ratón, marea al usuario y esconde el contenido a Google. La diferencia entre un experimento frustrante y una experiencia memorable está en los detalles de implementación. El punto de partida hoy es CSS moderno: scroll-snap para anclar cada sección, transform: translateX() animado con requestAnimationFrame para las transiciones, e IntersectionObserver para saber qué sección está en pantalla sin castigar el hilo principal.

La accesibilidad no es negociable. La navegación debe funcionar por teclado (tabulación y flechas), el foco debe ser siempre visible y hay que respetar prefers-reduced-motion: los usuarios que han pedido menos animación en su sistema operativo deben recibir una versión con desplazamiento reducido o directamente vertical. WCAG 2.2 — hoy referencia legal en Europa con el Acta Europea de Accesibilidad en vigor desde junio de 2025 — exige además que el contenido sea operable sin gestos complejos. Y en móvil, la decisión más sensata suele ser la que tomamos con Turia: fallback vertical, porque el gesto horizontal compite con las convenciones nativas del sistema.

Queda el frente invisible: cada sección necesita una URL propia (con History API), títulos y encabezados semánticos, y contenido presente en el HTML aunque la presentación sea una experiencia animada. El buscador no hace scroll horizontal: lee el documento.

Una marca, muchas webs: coherencia digital en grupos empresariales

El proyecto de Turia no fue un encargo aislado: formó parte de una serie de webs que desarrollamos en aquellos años para varias marcas del Grupo Damm. Cada marca tiene una personalidad propia y su web debe reflejarla — el reto técnico es conseguirlo sin multiplicar por diez los costes de desarrollo y mantenimiento. La web de Aguas Veri, con sus vídeos de naturaleza, la plataforma B2B de Alfil Logistics y el sistema de canje de entradas de Port Aventura comparten con Turia la misma base tecnológica: Drupal.

Esa es la ventaja de estandarizar la plataforma en un grupo: los patrones de arquitectura, los módulos auditados, los flujos de despliegue y el conocimiento del equipo se reutilizan de proyecto en proyecto, mientras la capa visual y de experiencia se diseña a medida para cada marca. El resultado fueron webs que no se parecían entre sí por fuera, pero que compartían por dentro los mismos cimientos técnicos.

El gestor de eventos por dentro

La sección de eventos de Turia resuelve un problema clásico: el contenido vivo. Una web de marca sin novedades envejece en semanas; depender del equipo técnico para cada actualización la condena. La solución en Drupal es un content type de evento con campos estructurados — fecha de inicio y fin, ubicación con geolocalización, descripción, imagen y categoría — que el equipo de marketing gestiona desde el panel de administración con la misma facilidad que un documento.

A partir de esos datos estructurados, Views construye los listados: próximos eventos ordenados por fecha, filtrado por categoría, y destacados en portada. Un proceso programado (cron) archiva automáticamente los eventos pasados, de modo que la web nunca muestra contenido caducado sin que nadie tenga que acordarse de retirarlo. Este mismo patrón — contenido estructurado, plantillas que lo presentan y automatismos que lo mantienen — es aplicable a notas de prensa, promociones, puntos de venta o cualquier contenido con ciclo de vida.

Rendimiento: belleza sin penalización

Las webs creativas cargan más assets que una web corporativa: tipografías propias, ilustraciones, vídeo, animación. Sin disciplina, eso se paga en los Core Web Vitals que Google mide con usuarios reales: LCP (carga percibida), INP (respuesta a la interacción) y CLS (estabilidad visual). En una experiencia de scroll horizontal, el riesgo mayor está en el INP — cada frame de la animación compite con el JavaScript de la página — y en el peso de las secciones fuera de pantalla.

Las técnicas que aplicamos en Turia siguen siendo las correctas hoy: lazy loading de todo lo que no está en el viewport, precarga inteligente solo de las secciones adyacentes al punto actual del recorrido, imágenes en formatos modernos y animaciones sobre transform y opacity (que no fuerzan reflow). En el lado servidor, Drupal ofrece una artillería propia — caché de render, BigPipe, integración con Varnish — que detallamos en nuestra guía de optimización de rendimiento en Drupal.

Drupal en 2026: la base sigue siendo la correcta

Elegir Drupal para las webs del grupo fue una decisión de largo recorrido que el tiempo ha validado. En 2026 la plataforma vive uno de sus mejores momentos: Drupal 11.4 es la versión estable actual, Drupal 12 llegará en diciembre de 2026, y la iniciativa Drupal CMS (Starshot) ha simplificado radicalmente la puesta en marcha con Recipes preconfiguradas. Para webs que quieren separar la experiencia visual del gestor de contenidos, el patrón headless con Drupal permite frontends en React o Next.js consumiendo la API — una evolución natural para experiencias tan personalizadas como la de Turia.

Para el propietario de la web, lo relevante es la continuidad: una plataforma con hoja de ruta clara, actualizaciones de seguridad predecibles y una comunidad enorme significa que la inversión de hoy no habrá que tirarla en tres años.

Seguridad y mantenimiento: lo que no se ve

Una web de marca es un activo público y expuesto. Los CMS más usados son objetivo constante de bots que explotan vulnerabilidades conocidas en cuestión de días desde su publicación, y la reputación de una marca de gran consumo no se juega solo en campañas: también en no aparecer en las noticias por un defacement o una filtración. Por eso cualquier web de marca debería contar con mantenimiento continuo — actualizaciones de core y módulos, monitorización y backups verificados — y por eso recomendamos a cualquier empresa empezar por lo básico: nuestra guía de ciberseguridad para empresas es un buen punto de partida. Las organizaciones que quieren formalizar ese compromiso pueden dar el paso hacia la certificación ISO 27001, que convierte la seguridad en un proceso auditable también de cara a clientes y partners.

Anatomía del proyecto: del concepto al lanzamiento

Cuatro meses de proyecto dan para mucho si se ordenan bien. La primera fase fue de concepto y prototipo: antes de diseñar pantallas, se validó con un prototipo navegable que la metáfora del recorrido horizontal funcionaba con contenido real y en dispositivos reales. Es la fase más barata para equivocarse, y por eso es la más valiosa. La segunda fase, de diseño, tradujo la identidad de Turia — color, tipografía, ilustración — a un sistema de componentes reutilizables, no a páginas sueltas.

La fase de desarrollo montó en paralelo los dos motores del proyecto: el de scroll en el frontend y el gestor de eventos en Drupal. Trabajar sobre content types y componentes permitió que diseño y desarrollo avanzaran sin bloquearse. La última fase, la de calidad, es la que distingue a los proyectos serios: pruebas en matriz de dispositivos y navegadores, auditoría de accesibilidad con teclado y lector de pantalla, y pruebas de rendimiento con conexión limitada. Una experiencia creativa que solo funciona en el portátil del diseñador no está terminada.

Medir una web de marca: más allá de las visitas

Una web corporativa clásica se mide por leads; una web de marca, por atención. Las métricas útiles aquí son otras: cuánto del recorrido completa el usuario (el equivalente horizontal del scroll depth), en qué secciones se detiene, cuántos llegan a la sección de eventos y cuántos interactúan con un evento concreto. Instrumentar esos eventos de analítica desde el diseño — y no como parche posterior — permite iterar el contenido con datos.

Todo ello, además, con el consentimiento como condición de partida: en la Unión Europea la analítica se activa solo tras la aceptación del usuario, y la web debe seguir siendo plenamente funcional para quien la rechaza. Medir menos, pero medir bien, es perfectamente compatible con el RGPD.

Errores comunes en webs creativas (y cómo los evitamos)

Los mismos fallos aparecen una y otra vez en experiencias web ambiciosas: 1) secuestrar el scroll con JavaScript y romper la rueda del ratón o el trackpad; 2) ignorar prefers-reduced-motion y convertir la web en un problema para usuarios sensibles al movimiento; 3) cargar todos los assets de golpe y arruinar la primera impresión precisamente en la web que más vive de ella; 4) dejar el contenido fuera del HTML y volverse invisible para los buscadores; y 5) olvidar al equipo editorial, entregando una web espectacular que nadie puede actualizar sin un desarrollador. Cada uno tiene solución conocida — y todas están aplicadas en el caso de Turia.

Del proyecto puntual a la relación de largo plazo

Un lanzamiento es solo el primer día de vida de una web. Lo que determina su valor a tres o cinco años vista es lo que ocurre después: cómo evoluciona con la marca, cómo absorbe nuevas campañas y secciones, y cómo se mantiene rápida y segura mientras tanto. Trabajar sobre una plataforma común y bien estructurada es lo que abarata esa continuidad: permite incorporar mejoras — nuevos formatos de contenido, integraciones, optimizaciones de rendimiento — sin rehacer la base cada vez, con independencia de quién se ocupe del mantenimiento en cada momento.

Para una empresa que se plantea un proyecto similar, la lección es clara: al elegir partner y plataforma, no evalúes solo el diseño de la propuesta; evalúa el plan para los años siguientes. Una auditoría técnica del estado actual es el mejor punto de partida para esa conversación.

Preguntas frecuentes

¿El scroll horizontal perjudica al SEO?

No, si se implementa bien. Google indexa el HTML del documento, no la forma de desplazarse por él. Con URLs por sección, encabezados semánticos y contenido real en el marcado, una web horizontal posiciona igual que una vertical. El riesgo está en las implementaciones que cargan todo por JavaScript sin renderizado en servidor.

¿Cuándo tiene sentido una navegación tan creativa?

Cuando la web es principalmente de marca: contar una historia, presentar un producto, generar recuerdo. Para un ecommerce con miles de referencias o un portal de servicios, las convenciones verticales rinden mejor. Por eso Turia es horizontal y otras webs del mismo grupo, con objetivos distintos, no lo son.

¿Qué pasa con los usuarios en móvil?

En el caso de Turia, la web detecta el contexto y ofrece en móvil un recorrido vertical adaptado. Forzar el gesto horizontal en pantallas táctiles compite con los gestos del sistema y multiplica los abandonos: el fallback no es una renuncia, es la decisión correcta de experiencia de usuario.

¿Puede el equipo de marketing gestionar la web sin depender de técnicos?

Sí — ese fue un requisito de diseño. Los contenidos vivos (eventos, novedades) se gestionan desde el panel de Drupal con campos estructurados y validación. El soporte técnico queda para lo que aporta valor: evolución, integración y seguridad, no para cambiar una fecha o subir una foto.

¿Cuánto se tarda en construir una web así?

La web de Turia se desarrolló en 4 meses, incluyendo diseño, desarrollo del motor de scroll, gestor de eventos y pruebas en dispositivos. El plazo real depende del alcance: lo que no conviene recortar nunca es la fase de pruebas de accesibilidad y rendimiento, que es la que separa una web creativa que funciona de una que solo luce en la demo del estudio de diseño. Ese rigor en la entrega es lo que permite que la web siga en producción años después.

¿Por qué eventos locales en la web de una marca nacional?

Porque el territorio es parte de la identidad de Turia: la marca vive en la escena cultural y gastronómica valenciana, y la web lo refleja con contenido real y actualizado en lugar de declaraciones genéricas. Para el SEO local y para la conexión emocional con el público, un calendario vivo de eventos vale más que cualquier eslogan.

Conclusión

La web de Cerveza Turia demuestra algo que repetimos a menudo a nuestros clientes: en el desarrollo web para marcas de gran consumo, que creatividad y solidez técnica no son enemigas: un concepto de navegación arriesgado, ejecutado con criterio sobre una plataforma robusta, se convierte en una ventaja de marca duradera. La clave está en resolver lo invisible — accesibilidad, rendimiento, SEO, autonomía editorial y mantenimiento — con el mismo cuidado que lo visible. Así una web deja de ser una campaña y pasa a ser un activo.

¿Buscas una web con un toque creativo que diferencie a tu marca, o un ecommerce a medida? Hablemos.