Les Abatui

De uitdaging

Les Abatui werkt met merken en makers over de grens heen. Een site die alleen in het Engels bestaat, laat een deel van dat publiek buiten staan. En een site waar elke tekstwijziging langs de bouwer moet, remt een bureau dat juist leeft van wat er vandaag speelt.

De vraag was daarom tweeledig: één site die volwaardig in het Engels en het Arabisch bestaat, en een beheeromgeving waarin het bureau alles zelf aanpast zonder ooit een regel code aan te raken.

Onze aanpak

De pagina is opgebouwd uit blokken. Het bureau kiest uit dertien soorten secties, sleept ze in de gewenste volgorde en vult ze in. Elk tekstveld heeft twee invulvelden: Engels en Arabisch. Kiest de bezoeker voor het Arabisch, dan wisselt niet alleen de taal maar ook de leesrichting: de hele lay-out klapt om naar rechts-naar-links.

Wat het bureau opslaat, staat nog niet meteen op de site. Wijzigingen leven eerst als concept naast de gepubliceerde versie, met een eigen voorbeeldpagina die laat zien wat publiceren zou opleveren. Pas de publicatieknop maakt er een nieuwe live versie van.

Wat we bouwden

• Blokkenbouwer met dertien secties: hero, lopende tekst, intro, diensten-accordeon, uitgelicht werk, klantenmuur, over ons, call-to-action, tekstblok, afbeelding met tekst, galerij, paginakop en documenttekst
• Slepen om te ordenen: de volgorde van de pagina verander je door een blok te verplaatsen, en een blok tijdelijk verbergen kan zonder het weg te gooien
• Alles tweetalig: elk veld bestaat in het Engels en het Arabisch, tot en met de losse pagina's en de SEO-teksten
• Apart vertaalscherm: de Engelse tekst naast het Arabische veld, een teller voor wat nog ontbreekt en een filter dat alleen de onvertaalde regels toont
• Rechts-naar-links: bij het Arabisch draait de complete opmaak mee, van menu tot marge
• Tekstverwerker in de browser: vet, cursief, lijsten en links, waarbij de server alleen een vaste lijst met tags doorlaat en de rest weggooit
• Concept naast gepubliceerd: bewerken kan rustig doorgaan zonder dat de bezoeker het half afgemaakt ziet
• Publiceren met één klik: die knop bouwt de site opnieuw op met de laatste content en zet hem live
• Eigen pagina's toevoegen: privacyverklaring, cookies of wat er later bij komt, met hun eigen blokken en hun eigen plek in het menu
• Menu, footer en merkgegevens: navigatielinks, contactgegevens en logo staan in het beheer, niet in de code
• SEO-scherm met voorbeeld: paginatitel, omschrijving en deelafbeelding, met een weergave van hoe dat in de zoekresultaten en bij delen komt te staan, per taal
• Beeld uploaden: foto en video gaan vanuit het beheer naar de opslag, en een vervangen bestand wordt opgeruimd
• Coming-soon-scherm: één schakelaar zet de site tijdelijk terug naar een wachtpagina, bruikbaar rond een herpositionering of een stille periode
• Contactformulier met spamfilter: een verborgen veld, een tijdmeting en een limiet op links houden bots tegen, terwijl een echte aanvraag in de inbox landt met de afzender als antwoordadres
• E-mailadres afgeschermd: het adres wordt er serverzijdig uitgehaald, zodat het nergens leesbaar in de broncode staat waar verzamelaars het weghalen
• Toegankelijk gebouwd: doorlink naar de inhoud, alt-teksten, een zichtbare pauzeknop op de bewegende hero en respect voor de systeeminstelling die beweging beperkt

Technologie

• SvelteKit: de site wordt bij het bouwen tot vaste bestanden gebakken, zodat de bezoeker nooit op een database hoeft te wachten
• Supabase: de content, de inlog voor het beheer en de bestandsopslag voor beeld
• Resend: de aanvragen uit het contactformulier
• Vercel: hosting die de pagina dicht bij de bezoeker serveert, met een dagelijkse taak die de database wakker houdt

Het resultaat

Les Abatui beheert de site nu zelf, in beide talen, zonder ons ertussen. Een nieuwe dienst erbij, een andere volgorde van de secties, een verse galerij: het gaat via het beheer en staat na één klik live.

Omdat de pagina als vast bestand klaarstaat, blijft de site online en snel, ook als de database er even uit ligt. Het beheer zit achter een inlog en alleen wie in de beheerderslijst staat, mag opslaan.