Casita Amarilla is een urenhotel in Barcelona voor stellen — Carrer de Pàdua 83, kamers vanaf € 30, discreet, het hele jaar open. Boeken doe je telefonisch. De website die ze hadden was echt oud: gedateerd, traag en gebouwd voor een bezoeker achter een bureau in plaats van voor de bezoeker die ze werkelijk krijgen, buiten op straat met een telefoon in de hand. Wat er nu staat is een voorgerenderde statische site in 20 talen, met een blog die blijft publiceren en een marketingstack die zichzelf wekelijks rapporteert.
Klantwerk. Clutch Developer bouwde en beheert de website, de marketingstack en de interne tooling. Het bedrijf is van Casita Amarilla.
Wat we hebben opgeleverd
- Een statische, voorgerenderde site. Acht paginatypes — home, kamers, tarieven, locatie, FAQ, contact, over ons en de blog — gebouwd met Vite, gehost op Netlify met edge-caching. Twintig talen (ar, ca, de, el, en, es, fr, hi, it, ja, ko, nl, pl, pt, ro, ru, sv, tr, uk, zh), gekozen via taalonderhandeling op de edge, met een cookie zodat de eigen keuze van een bezoeker blijft staan. Strikte Content-Security-Policy, HSTS, geen framing, Cloudflare Turnstile op het contactformulier.
- Mobile-first opmaak. De meeste bezoekers komen binnen op een telefoon, dus een vaste belknop reist met ze mee de pagina af, en de tarieventabel, de kamergalerijen en de blogkaarten zijn opgemaakt voor bediening met één duim.
- Een contentagent. Een AI-agent schrijft en publiceert artikelen op de notitieblog van de site — de recente gaan over tarieven, Sant Jordi, de zomer en stellen — en voert kleine tekst- en sitewijzigingen door.
- SEM met een wekelijks rapport. Google Ads, met analytics en advertentieconversies end-to-end gemeten, zodat het rapport de uitgaven koppelt aan de telefoontjes die ze opleverden in plaats van aan vertoningen.
- Een interne tool voor de receptie. Snelle sjablonen voor het beantwoorden van e-mails en reserveringsaanvragen: kies een sjabloon, vul de details in, verstuur.
Telefoon eerst, want de boeking is een telefoontje
De conversie is hier geen verstuurd formulier, maar iemand die het nummer draait. Dat versmalt de ontwerpvraag: hoe weinig tikken kunnen er zitten tussen binnenkomen en het nummer klaar hebben? Daarom staat de boekknop vast in beeld in plaats van geparkeerd in een header waar de bezoeker allang voorbij is gescrold, en staat hij op elk paginatype, want de beslissing valt net zo goed bij de tarieventabel als op de homepage.
De tarieventabel was het interessante stuk. Drie kolommen — zondag, ma–do, vr & za — is veel raster voor een telefoon, en het enige getal waar een bezoeker om geeft is het getal dat nú geldt, dus dat is het getal dat de tabel uitlicht. Kamers en blog volgen dezelfde regel: één kolom, grote raakvlakken, geen hover. En dat de site anders aanvoelt dan de oude komt door de architectuur, niet door wat afstelwerk: statische HTML op de edge in plaats van een server die elk verzoek rendert.
De site blijft publiceren zonder overleg
De blog wordt geschreven door een agent. Die schrijft en publiceert de artikelen, en voert de kleine tekst- en sitewijzigingen door die anders blijven wachten op een vrij uurtje. Alles wat de agent doet gaat door dezelfde statische build als al het andere, dus niets omzeilt de pipeline en elke wijziging landt als iets wat een mens kan lezen en terugdraaien.
Die discipline is het doel, geen bijverschijnsel. Analytics staan achter toestemming: GA4 en Google Ads laden pas nadat de bezoeker accepteert, en daarvoor niets. De securityheaders zijn build-output, geen instelling die iemand moet onthouden aan te vinken. Een agent die een live site aanpast is alleen een goed idee als het oppervlak dat hij raakt te reviewen is, en voorrenderen geeft je precies dat.
De receptie kreeg dezelfde behandeling vanaf de andere kant: een reserveringsmail beantwoorden hoort geen schrijfoefening te zijn, dus de interne tool maakt er een sjabloon kiezen en de details invullen van. Kleine tool, elke dag in gebruik.
Wat het bij elkaar oplevert
De site is sneller dan die hij vervangt, bereikt bezoekers in hun eigen taal en zet een boekingstelefoontje op één tik afstand. De blog veroudert niet tussen twee redesigns door. De advertentie-uitgaven zijn wekelijks te verantwoorden, afgezet tegen telefoontjes in plaats van kliks. De receptie antwoordt sneller met minder typewerk. Geen van die dingen is een apart project — het is één statische build met een paar dingen die erop gericht staan.
Zo ziet het meeste van ons webwerk eruit: render de site voor zodat hij goedkoop en snel te serveren is, en automatiseer daarna wat anders elke week een mens kost. Websites dekt de bouw; Automatisering & integraties dekt de agent en de interne tooling.