Clutch Developer
DA
Book a call

Casita Amarilla: et statisk website på 20 sprog, der bliver ved med at udgive sig selv

Kundearbejde for Casita Amarilla. Et timehotel i Barcelona, hvis gamle site var forældet og langsomt, bygget om til et prærenderet statisk website på 20 sprog — med en indholdsagent, der holder bloggen i gang.

Casita Amarilla er et timehotel i Barcelona for par — Carrer de Pàdua 83, værelser fra 30 €, diskret, åbent hele året. Man booker ved at ringe. Det website, de havde, var oprigtigt gammelt: forældet, langsomt og bygget til en besøgende ved et skrivebord frem for den, de faktisk får — en der står udenfor med telefonen i hånden. Hvad de har nu, er et prærenderet statisk website på 20 sprog, med en blog der bliver ved med at udgive, og en marketingstak der rapporterer på sig selv hver uge.

Kundearbejde. Clutch Developer har bygget og driver websitet, marketingstakken og de interne værktøjer. Forretningen tilhører Casita Amarilla.

casitaamarilla.com

Hvad vi leverede

  • Et statisk, prærenderet website. Otte sidetyper — forside, værelser, priser, beliggenhed, FAQ, kontakt, om og bloggen — bygget med Vite, hostet på Netlify med edge-caching. Tyve sprog (ar, ca, de, el, en, es, fr, hi, it, ja, ko, nl, pl, pt, ro, ru, sv, tr, uk, zh) valgt via sprogforhandling på edge, med en cookie så den besøgendes eget valg bliver hængende. Streng Content-Security-Policy, HSTS, ingen framing, Cloudflare Turnstile på kontaktformularen.
  • Mobile-first-layout. De fleste besøgende kommer på en telefon, så en fastsiddende ring-og-book-knap følger dem ned gennem siden, og pristabellen, værelsesgallerierne og blogkortene er sat op til at bruges med én tommelfinger.
  • En indholdsagent. En AI-agent skriver og udgiver indlæg til sitets noteblog — de seneste handler om priser, Sant Jordi, sommer og par — og laver små tekst- og siteændringer.
  • SEM med en ugentlig rapport. Google Ads, med analytics og annoncekonverteringer målt hele vejen igennem, så rapporten kobler forbruget til de opkald, det gav, frem for til visninger.
  • Et internt værktøj til receptionen. Hurtige skabeloner til at svare på mails og reservationsforespørgsler: vælg en skabelon, udfyld detaljerne, send.
  • Forsidens hero på en telefon — "Timehotel i Barcelona med maksimal diskretion", book-knappen og et kort med hurtige priser
  • Prissiden — en hurtig sammenligningstabel med kolonner for søndag, man.–tors. og fre. & lør., med den aktuelle pris fremhævet
  • Værelsessiden — introen og chippene med det, hvert værelse indeholder: dobbeltseng, eget bad, WiFi, aircondition, TV, fra 30 €
  • Blogoversigten — guidekort med et foto, datoen, læsetid og et uddrag
Fire skærme fra det live site på en telefon — forside, priser, værelser og blog.

Telefonen først, for bookingen er et telefonopkald

Konverteringen her er ikke en indsendt formular, det er en der ringer op. Det indsnævrer designspørgsmålet: hvor få tryk mellem landing og nummeret klar? Derfor sidder book-knappen fast frem for at være parkeret i en header, den besøgende allerede har scrollet forbi, og den er på alle sidetyper, for beslutningen kan lige så godt falde ved pristabellen som på forsiden.

Pristabellen var det interessante stykke. Tre kolonner — søndag, man.–tors., fre. & lør. — er meget grid til en telefon, og det eneste tal, en besøgende går op i, er det der gælder lige nu, så det er det, tabellen fremhæver. Værelser og blog følger samme regel: én kolonne, store trykflader, ingen hover. Og sitet føles anderledes end det gamle af en arkitektonisk grund, ikke fordi der er tunet på det: statisk HTML på edge i stedet for en server der renderer hver forespørgsel.

Sitet bliver ved med at udgive uden et møde

Bloggen skrives af en agent. Den skriver og udgiver indlæggene, og den laver de små tekst- og siteændringer, der ellers ville vente på en ledig time. Alt hvad den gør, går gennem samme statiske build som alt andet, så intet omgår pipelinen, og hver ændring lander som noget et menneske kan læse og rulle tilbage.

Den disciplin er hele pointen, ikke en sidegevinst. Analytics kræver samtykke: GA4 og Google Ads indlæses først, når den besøgende accepterer, og intet før. Security-headerne er build-output, ikke en indstilling nogen skal huske at sætte flueben i. En agent der ændrer et live site, er kun en god idé, hvis den flade den rører, kan gennemlæses — og prærendering giver dig præcis det.

Receptionen fik samme behandling fra den anden side: at svare på en reservationsmail bør ikke være en skriveøvelse, så det interne værktøj gør det til at vælge en skabelon og udfylde detaljerne. Lille værktøj, brugt hver dag.

Hvad det ender med at give

Sitet er hurtigere end det, det erstattede, møder besøgende på deres eget sprog og lægger et bookingopkald ét tryk væk. Bloggen bliver ikke gammel mellem to redesigns. Annonceforbruget kan gøres op hver uge, mod opkald frem for klik. Receptionen svarer hurtigere med mindre tastearbejde. Ingen af de ting er separate projekter — det er ét statisk build med et par ting rettet mod det.

Det er den form, det meste af vores webarbejde tager: prærendér sitet, så det er billigt og hurtigt at levere, og automatisér derefter det, der ellers ville kræve et menneske hver uge. Websites dækker selve buildet; Automation & integrations dækker agenten og de interne værktøjer.