Casita Amarilla es un hotel por horas para parejas en Barcelona — Carrer de Pàdua 83, habitaciones desde 30 €, discreto, abierto todo el año. Reservar es una llamada de teléfono. La web que tenían era realmente antigua: desfasada, lenta y pensada para un visitante sentado ante un escritorio, no para el que de verdad les llega, de pie en la calle con el móvil en una mano. Lo que tienen ahora es un sitio estático prerenderizado en 20 idiomas, con un blog que sigue publicando y un stack de marketing con informe semanal.
Trabajo para cliente. Clutch Developer construyó y mantiene la web, el stack de marketing y las herramientas internas. El negocio es de Casita Amarilla.
Qué entregamos
- Un sitio estático y prerenderizado. Ocho tipos de página — inicio, habitaciones, tarifas, ubicación, FAQ, contacto, sobre nosotros y el blog — hechos con Vite y alojados en Netlify con caché en el edge. Veinte idiomas (ar, ca, de, el, en, es, fr, hi, it, ja, ko, nl, pl, pt, ro, ru, sv, tr, uk, zh) elegidos por negociación de idioma en el edge, con una cookie para que la elección del visitante se mantenga. Content-Security-Policy estricta, HSTS, sin framing, Cloudflare Turnstile en el formulario de contacto.
- Maquetación mobile-first. Casi todos los visitantes llegan desde el móvil, así que un botón de reserva persistente les acompaña al bajar por la página, y la tabla de tarifas, las galerías de habitaciones y las tarjetas del blog están dispuestas para usarse con un pulgar.
- Un agente de contenido. Un agente de IA redacta y publica artículos en el blog de notas del sitio — los últimos son guías de precios, Sant Jordi, verano y parejas — y aplica pequeños cambios de textos y de sitio.
- SEM con informe semanal. Google Ads, con analítica y conversiones de anuncios medidas de extremo a extremo, para que el informe ligue el gasto a las llamadas que generó y no a las impresiones.
- Una herramienta interna para recepción. Plantillas rápidas para responder emails y peticiones de reserva: eliges una plantilla, rellenas los datos y envías.
Primero el móvil, porque la reserva es una llamada
Aquí la conversión no es enviar un formulario, es que alguien marque el número. Eso acota la pregunta de diseño: ¿cuántos toques hay entre aterrizar y tener el número a mano? Por eso el botón de reserva es persistente en lugar de quedarse en una cabecera que el visitante ya ha dejado atrás, y está en todos los tipos de página, porque la decisión puede darse igual en la tabla de tarifas que en la portada.
La tabla de tarifas fue la pieza interesante. Tres columnas — domingo, lun–jue, vie y sáb — son mucha cuadrícula para un móvil, y el único número que le importa al visitante es el que se aplica ahora mismo, así que ese es el que la tabla destaca. Habitaciones y blog siguen la misma regla: una columna, áreas grandes, sin hover. Y el sitio se siente distinto del antiguo por una razón de arquitectura, no por una pasada de ajustes: HTML estático en el edge en vez de un servidor renderizando cada petición.
El sitio sigue publicando sin ninguna reunión
El blog lo escribe un agente. Redacta y publica los artículos, y hace los pequeños cambios de textos y de sitio que de otro modo esperarían a que alguien tuviera una hora libre. Todo lo que hace pasa por el mismo build estático que el resto, así que nada se salta el pipeline y cada cambio aterriza como algo que una persona puede leer y revertir.
Esa disciplina es el objetivo, no un efecto secundario. La analítica está condicionada al consentimiento: GA4 y Google Ads cargan solo después de que el visitante acepte, y nada antes. Las cabeceras de seguridad son salida del build, no una casilla que alguien tiene que acordarse de marcar. Que un agente cambie un sitio en vivo solo es buena idea si la superficie que toca es revisable, y el prerenderizado te da exactamente eso.
Recepción recibió el mismo tratamiento desde el otro lado: responder un email de reserva no debería ser un ejercicio de redacción, así que la herramienta interna lo convierte en elegir una plantilla y rellenar los datos. Herramienta pequeña, usada cada día.
En qué se traduce todo esto
El sitio es más rápido que el que sustituyó, llega a los visitantes en su propio idioma y deja la llamada de reserva a un toque. El blog no se queda obsoleto entre rediseños. El gasto en anuncios rinde cuentas cada semana, contra llamadas y no contra clics. Recepción responde más rápido escribiendo menos. Ninguna de esas cosas es un proyecto aparte — son un único build estático con unas cuantas cosas apuntando a él.
Esta es la forma que toma casi todo nuestro trabajo web: prerenderizar el sitio para que servirlo sea barato y rápido, y luego automatizar lo que de otro modo necesitaría a una persona cada semana. Sitios web cubre el build; Automatización e integraciones cubre el agente y las herramientas internas.