STBM Group·2026·Marketing- en cataloguswebsite
Een catalogus die eindigt in een offerte, niet in een afrekenpagina.
Een website van twaalf pagina's voor een aannemer die slachthuizen en waterzuiveringen bouwt in de Emiraten — van begin tot eind ontworpen en gebouwd, met een catalogus van 123 machines die om een prijs vraagt in plaats van een betaling aan te nemen.
Het verhaal
STBM verkoopt technische projecten van miljoenen en machines die per aanvraag geoffreerd worden, vanaf een WordPress-site met 57 stylesheets en 79 scripts op de homepage — en geen enkele kop erop. Ik heb de vervanger van begin tot eind ontworpen en gebouwd, in gewone HTML, CSS en JavaScript.
- Rol
- Ontwerp & development, solo
- Opdrachtgever
- STBM Group, Abu Dhabi
- Jaar
- 2026
- Discipline
- Marketing- en cataloguswebsite
- Omvang
Mijn bijdrage
57 → 1
Stylesheets op de homepage
79 → 0
Externe scripts
123 machines
Geoffreerd, nooit verkocht
Hoofdstuk 01
Twee taken, één site
STBM bouwt en onderhoudt slachthuizen, waterzuiveringen en elektromechanische installaties voor gemeenten en voedselproducenten. De site moest een gemeentelijk ingenieur overtuigen dat het bedrijf een complete fabriek kan opleveren, én een productiemanager een lijst machines laten samenstellen om te vragen wat dat kost. Dat zijn verschillende bezoekers die op dezelfde middag iets anders willen, en de oude site begroef ze allebei onder plugin-gewicht.
Hoofdstuk 02
Een offertelijst, geen winkelwagen
Niets heeft hier een prijs, want elke machine wordt per aanvraag geoffreerd. De catalogus eindigt dus niet in een afrekenpagina — hij bouwt een lijst. Machines toevoegen, aantallen invullen, versturen, en de aanvraag komt binnen met de volledige specificatie eraan vast. Die lijst overleeft het heen en weer lopen tussen de catalogus en de losse productpagina's, precies waar een sessie normaal alles kwijtraakt wat een bezoeker verzameld heeft.
Hoofdstuk 03
Een bedrag vóór het telefoongesprek
Elke prospect stelt dezelfde eerste vraag, en de meeste aannemers beantwoorden die pas na een afspraak. De dienstenpagina heeft een calculator: kies een discipline, geef de omvang van de fabriek op, en je krijgt een indicatieve bandbreedte — met de aanvraag die naar het juiste team gaat, de ingevulde gegevens er al aan vast.
Hoofdstuk 04
Vier sjablonen, negentien pagina's
De fabriekstypes, de dienstendisciplines en alle 123 producten zijn vier sjablonen die uit de URL lezen, geen negentien met de hand gebouwde pagina's. Eén lay-out om te herstellen als er iets mis is, en een nieuw product is een regel data in plaats van een bestand.
- Fabriekssjabloon — rund, schaap, pluimvee of uitbenen
- Dienstensjabloon — waterzuivering, vloeren, klimaat of hygiëne
- Productsjabloon — alle 123, op slug
- Cataloguslijst — elke gefilterde weergave van de shop
Hoofdstuk 05
Gemeten, niet ingeschat
Het meeste engineeringwerk zat in hoe dit zich op een telefoon gedraagt, en dat is gemeten in plaats van bekeken. Ik heb de pagina's in een echte browser op 375 pixels gedraaid en de DOM uitgelezen, want een screenshot vertelt je niet dat twee pagina's vier pixels van elkaar verschillen.
De bevinding
De header was op elke pagina anders
Twee van de twaalf zetten de offerteknop en het hamburgermenu in de verkeerde kolom. Het logo was 34px op de homepage en 44px overal elders. Vier verschillende knopvormen.
De oplossing
Eén vaste header
Alle twaalf meten nu identiek: navigatiebalk 66px, knop op x 206→308, hamburger 315→359.
De bevinding
Chips en cijfers braken rafelig af
Filterchips liepen door in drie ongelijke rijen; drie cijfers in de hero braken naar twee regels en lieten er één alleen achter.
De oplossing
Stroken en gelijke kolommen
De chips werden één veegbare strook die tot de rand doorloopt en uitfadet om aan te geven dat er meer is. De cijfers werden drie gelijke kolommen. Nul pixels horizontale overloop op 375px, op alle twaalf pagina's.
Hoofdstuk 06
Ervoor en erna
Gemeten op beide live sites, hetzelfde netwerk, hetzelfde moment. De aantallen bytes gaan over het HTML-document zelf, niet over de hele pagina.
- HTML-document — 301.595 bytes, nu 173.303
- Laadtijd — 1,54 s, nu 0,55 s
- Stylesheets — 57, nu één, inline
- Externe scripts — 79 tags, nu geen
- Een kop op de homepage — geen, nu één
Hoofdstuk 07
De eerlijke helft van die tabel
Een deel van het snelheidsverschil is hosting, geen code: de nieuwe site staat op een CDN en de oude op gedeelde hosting. Het aantal stylesheets en scripts is de eerlijkere vergelijking, en dat is een rechtstreeks gevolg van bouwen zonder een stapel plugins. Het is het waard om hardop te zeggen, want een ervoor-en-erna-tabel is de makkelijkste plek op een portfolio om met de infrastructuur van een ander te gaan strijken.
Hoofdstuk 08
Formulieren die werken zonder backend
Een statische site kan geen e-mail versturen, dus alle 21 formulieren lopen via één instelling. Zonder sleutel openen ze de mailclient van de bezoeker met alles alvast ingevuld, en zeggen dat er ook bij, in plaats van een succesmelding te tonen die niets betekent. Mét sleutel posten ze direct. Een mislukte verzending houdt alles vast wat er getypt is en laat het telefoonnummer zien. Bij het aansluiten hiervan kwam ik erachter dat vijf van de zeven offerteformulieren op geen enkel veld een name-attribuut hadden. Ze waren onzichtbaar voor elke verzendmethode, en zouden aanvragen in stilte hebben opgeslokt.
Hoofdstuk 09
Details die makkelijk over te slaan zijn
De dingen waar niemand om vraagt en die iedereen opmerkt zodra ze ontbreken.
Bestanden
Niets van elders geladen
Alle 208 afbeeldingen lokaal gehaald en naar relatieve paden herschreven, gecontroleerd op hoofdlettergebruik zodat het een Linux-server overleeft. Elke foto is een fabriek die STBM daadwerkelijk gebouwd heeft.
Iconen
Opnieuw getekend, niet opgeschaald
Het beeldmerk in het logo is 41 pixels breed — veel te klein voor een app-icoon van 512px. Ik heb het opnieuw getekend in het eigen lettertype van de site: vierkant voor het browsertabblad, met ronde hoeken voor een beginscherm.
Delen
Links die een voorbeeld tonen
Geen enkele pagina had een deelafbeelding, dus elke link kwam als een leeg kaartje binnen. Nu een echte foto van de opgeleverde hal, met de ingebrande tijdstempel van de camera eraf gesneden.
Beweging
Animaties die uit kunnen
Elementen die verschijnen bij het scrollen, een gloed die de cursor volgt op donkere secties, en een carrousel met klantcitaten die stopt zodra het tabblad naar de achtergrond gaat. Alles luistert naar de instelling voor beperkte beweging.
Hoofdstuk 10
Wat ik anders zou doen
Drie dingen die ik zou veranderen, opgeschreven in plaats van stilletjes weggelaten.
- De catalogus is een momentopname, één keer geëxporteerd — nieuwe producten in WordPress verschijnen niet vanzelf
- De galerij serveert foto's op volle resolutie; die zouden verkleind moeten worden voordat dit productie is
- Wit op het koraalrood van het merk meet 3,11:1 — prima voor grote tekst, niet voor lopende tekst
Reflection
Wat ik heb geleerd
Een shop is niet altijd een shop
Bij 123 producten is de reflex om naar een winkelwagen te grijpen. Maar niets heeft hier een prijs, en een afrekenpagina zou iets beloofd hebben wat het bedrijf niet doet. Het interessante ontwerpwerk zat in wat ervoor in de plaats komt — een lijst die het bezoek overleeft en met een specificatie eraan vast vertrekt.
Meten is beter dan kijken
Een header die op twee van de twaalf pagina's fout staat ziet er op elke screenshot goed uit. De DOM uitlezen op 375 pixels vond vier knopvormen en een logo dat tussen pagina's van formaat veranderde — geen ervan had ik met het blote oog gezien, en alle vier voelt een bezoeker zonder ze te kunnen benoemen.
De fouten zaten in wat niemand test
Vijf van de zeven offerteformulieren hadden geen name-attributen. Ze werden perfect getoond en verstuurden niets. Dat vind je niet door wat rond te klikken, want het formulier lijkt te werken — en precies daarom is het de moeite waard om de onderdelen langs te gaan die alleen in stilte falen.
Zeg welke helft van de winst van jou is
De nieuwe site laadt drie keer zo snel, en een deel daarvan is een CDN in plaats van iets dat ik geschreven heb. Dat opschrijven kost een mooi cijfer en levert het enige op dat telt wanneer iemand besluit of de rest van de pagina te vertrouwen is.