Una organización internacional de ayuda humanitaria tenía las páginas de su campaña de storytelling repartidas en tres tecnologías distintas, cada una con su propio código, su propia forma de publicar y tiempos de carga que castigaban a quien llegaba desde el celular. Andes Development construyó una base común en Astro, migró a ella las cuatro páginas existentes en inglés y español, y lanzó sobre la misma base una página nueva con un juego interactivo. Resultado: 100 en accesibilidad, buenas prácticas y SEO en todas las páginas.
// El desafío
Cada historia de la campaña funcionaba bien por separado, pero en conjunto eran difíciles de mantener y pesadas para el visitante. Los retos clave fueron:
- El "Sistema Frankenstein" de Campaña Cada historia se había hecho con una herramienta distinta (Vue 3, React con GSAP y un prototipo aislado), así que cada cambio exigía recordar cómo funcionaba cada una.
- Peso que Espanta Visitas Una pantalla de carga de 2.6 segundos, fuentes externas y paquetes de hasta 25 MB por página.
- Privacidad de Estándar Internacional La analítica debía respetar el consentimiento del visitante antes de medir nada.
- Publicación en el CDN del Cliente Las páginas se publican en la infraestructura propia de la organización, sin integración continua de por medio, así que cada entrega tenía que llegar lista para subir.
- Fidelidad Total Calculadoras, testimonios en audio y animaciones debían comportarse exactamente igual que en las versiones publicadas, en ambos idiomas.
// La solución tecnológica
Andes Development diseñó una base reutilizable y migró cada historia a ella, una por una y con verificación de paridad:
- Una Base, Muchas Historias Astro con salida estática, Tailwind v4 y tokens de diseño de la marca; React solo en las piezas interactivas, que se cargan al hacerse visibles, y GSAP bajo demanda.
- Migración Verificada Cada página tuvo su propio brief y su verificación de paridad: por ejemplo, los 59 recursos y las 123 cadenas por idioma de una de las historias coinciden con la versión publicada, y su calculadora reproduce los coeficientes originales.
- Bilingüe de Verdad Contenido en colecciones tipadas para inglés y español, con hreflang, datos estructurados (organización sin fines de lucro, video, preguntas frecuentes) y un sitemap que agrupa páginas que se publican por separado.
- Analítica con Consentimiento Google Consent Mode v2 con todo denegado por defecto y un banner propio; sin llamadas externas en tiempo de ejecución fuera de la analítica.
- Empaquetado por Página Un comando compila cada página de forma independiente y genera el archivo listo para el CDN de la organización.
- Un Juego sobre la Misma Base La primera página nueva de la base convirtió un prototipo en un juego jugable, con la donación como recompensa al final.
- Documentada para Dos Equipos Guías y habilidades de IA copiadas dentro del repositorio, para que tanto la organización como Andes puedan crear la siguiente página sin depender del otro.
// Resultados y logros destacados
La campaña quedó más liviana, más accesible y lista para crecer:
-
100/100/100
Accesibilidad, buenas prácticas y SEO en todas las páginas, con rendimiento móvil de 91 a 99. -
5.9 s → 3.2 s
LCP móvil de la historia más pesada, y paquetes hasta 54% más livianos (de 25 MB a 11.5 MB). -
1 Base
Tres tecnologías reemplazadas por una sola, en inglés y español, donde la siguiente página ya no empieza de cero.
// Conclusión
La campaña dejó de ser una colección de proyectos sueltos y se convirtió en una plataforma: mismas reglas, mismo diseño, mismo proceso de publicación. Las historias cargan más rápido, respetan la privacidad de quien las lee y cumplen los estándares de accesibilidad que exige una audiencia global. Y la próxima historia se construye en días, sobre una base que el equipo de la organización también puede operar.