Eén pagina goed bouwen, dertig klantsites eruit

Een bureau maakt er dertig, en bij elke daarvan wordt dezelfde afweging opnieuw gemaakt: waar begint de tekst, hoe komt dat beeld binnen, waar valt de naad tussen twee secties. Dat is het dure deel, en het is bij elke klant grotendeels hetzelfde.

Bestaande bouwers lossen daarom het verkeerde probleem op. Ze geven je een template, een afgewerkt ontwerp waar je content in giet, en zodra je ervan afwijkt valt het uit elkaar. Wat je wilt is het omgekeerde: de choreografie vastleggen en de inhoud vrij laten.

Magicpage is daarom gebouwd rond een compositiesysteem, en pas daarna rond pagina's. Je maakt één keer een pagina zoals je hem wilt hebben, legt hem vast, en begint de volgende klant daarvandaan: andere blokken, ander merk, andere tekst, dezelfde beweging.

Elk blok zegt alleen wat het is, of hoe het zich verhoudt tot zijn buurman. Het systeem beslist wat er gebeurt. Een blok noemt zijn kop een kop en de overgang naar het volgende blok een band; welke beweging daarbij hoort en hoe die band eruitziet staat ergens anders. Dat klinkt als een detail en het is de hele architectuur.

Daarom kan één regel in een bewegingsset alle honderdtien blokken veranderen, en hoeft een nieuw blok niets van beweging te weten. Bij elk nieuw idee is dat de toets, en hij heeft in drie maanden meer beslissingen genomen dan welk overleg dan ook.

Eronder ligt een cascade van vijftien CSS-lagen in één declaratie, en die volgorde is geen smaak: hoofdstukken komen ná de doorlopende beweging omdat hoofdstukruimte marge is die bovenop alle voorgaande afstanden komt, en de viewport-laag komt daar weer achter zodat een schermregel altijd het laatste woord heeft. Elke positie in die rij is één keer beargumenteerd en staat in de code uitgeschreven.

Alles hierboven bestaat voor één werkgang. Bouw één maximale pagina (dertien blokken, vijf hoofdstukken, gemeten overgangen) en leg hem vast als sjabloon. Niet een gekocht ontwerp maar jouw concept: alle pagina's met hun choreografie, plus merk en art directie. Dat is het dure werk en je doet het één keer.

De volgende klant begint daarvandaan. Je wisselt de blokken, en de naden, hoofdstukken en scènes blijven staan. Je herbrieft de inhoud: wat het bedrijf doet, voor wie, wat het onderscheidt. En dan gaat er één beeld-sweep over de hele site.

Dat werkt in concepten, de tabs bovenin de werkbank: varianten van dezelfde site die je naast elkaar aan een klant laat zien. Elk concept heeft zijn eigen pagina's op één oneindig canvas, dus je bladert niet door schermen maar zoomt uit.

Die laatste stap is het principe in het klein. Een blok vertelt al alles wat een beeldbriefing nodig heeft: dat dit slot een beeld wil, wat voor beeld (het pad ernaartoe zegt dat een avatar een portret is), welke verhouding, wat het onderwerp is (de kop van het blok) en welke art directie eroverheen ligt. Je hoeft het alleen op te rapen. Dus geen promptveld erbij, maar: het systeem stelt de briefing op en jij corrigeert hem.

Toen deden we de telling die de aanpak bevestigde. Tweeëntwintig beeldslots zitten in blokken die zichzelf als beeldblok aankondigen, en honderdvier daarbuiten: avatars in testimonials, teamrasters, blogcovers. Alleen op die aankondiging afgaan had vijf zesde van de beelden overgeslagen.

Elke poort in dit project is ontstaan uit één concrete fout die stil was. Geen foutmelding, geen rode build, alleen een pagina die er “gewoon anders” uitzag. Dat is de duurste soort, want je vindt hem pas als een klant kijkt.

Er staan er nu veertien: een poort die controleert dat het paneel alleen scènes aanbiedt die een blok kán dragen, een die kijkt of elk gevonden beeldpad ook wordt teruggeschreven, een die merkkleuren betrapt die bij het publiceren stil wegvielen, een die nakijkt of elk formulier post naar iets dat bestaat.

De jongste is meteen de mooiste. De keuzeruimte is elf thema's maal acht interfacesets maal vijf bewegingssets: vierhonderdveertig combinaties, waarvan er ooit vijf met het oog bekeken waren. Die poort rendert ze nu alle vierhonderdveertig en controleert dat de CSS die ze gebruiken ook meekomt, en dat het onder de negenhonderd kilobyte blijft. Vier seconden voor de hele set, want React is na de eerste render warm.