Website ontwikkelen: de technische stappen uitgelegd

Veel mensen zien een website als iets dat je bestelt en een paar weken later opgeleverd krijgt. Onder de motorkap gebeurt er in die weken een hoop. Wie begrijpt hoe een website ontwikkelen technisch werkt, stelt betere vragen aan een bureau, herkent waar tijd en geld naartoe gaan, en voorkomt verrassingen na de livegang. Hieronder loop ik de stappen langs zoals ze in de praktijk verlopen, zonder jargon en met concrete voorbeelden.

De eerste stap heeft niets met code of kleur te maken. Het gaat om de vraag: welke pagina's heeft de site nodig, en hoe hangen ze samen? Dit heet de sitemap. Een dienstverlener met vijf diensten, een blog en een contactpagina heeft een andere structuur nodig dan een webshop met driehonderd producten in vijftien categorieën.

Daarna volgen wireframes: schematische schetsen van elke pagina zonder afleiding van beeld of kleur. Een wireframe van een productpagina laat zien waar de prijs staat, waar de knop 'in winkelwagen' zit en welke informatie een bezoeker nodig heeft voordat hij koopt. Deze stap is bewust saai. Hier los je discussies op over volgorde en prioriteit, wat later in het proces veel duurder is om aan te passen.

Als de structuur staat, komt het visuele ontwerp. Een goede ontwerper vertaalt de wireframes naar een interface die past bij het merk en de bezoeker helpt. Hier wordt bepaald hoe knoppen eruitzien, welke lettergroottes leesbaar blijven op een telefoon, en hoe de site oogt op een breed scherm tegenover een smal scherm.

Dat laatste is belangrijker dan het klinkt. Ruim de helft van het verkeer op de meeste websites komt via mobiel. Een ontwerp dat alleen op een grote monitor is bekeken, valt op een telefoon vaak uit elkaar. Daarom werken we mobile first: eerst het kleine scherm oplossen, daarna uitbreiden naar groter. Zo voorkom je dat de mobiele versie een uitgeknepen restje wordt van de desktopversie.

Nu wordt het ontwerp gebouwd. Dit is waar de meeste mensen denken dat 'website ontwikkelen' begint, terwijl het eigenlijk het middenstuk is. Grofweg zijn er twee routes.

De eerste route is een visueel platform zoals Webflow. Daarmee bouw je het ontwerp na met echte HTML en CSS, zonder alles met de hand te typen. Het resultaat is schone code die snel laadt, met een omgeving waarin de klant later zelf teksten en afbeeldingen kan aanpassen. Voor de meeste zakelijke websites en kleinere webshops is dit een efficiënte keuze: snel live, goed onderhoudbaar, en geen wildgroei aan losse plug-ins die elkaar in de weg zitten.

De tweede route is maatwerk, bijvoorbeeld met Nuxt.js voor de voorkant en Sanity als contentsysteem. Dit kies je wanneer een site iets moet doen wat een standaardplatform niet aankan: een productconfigurator, een koppeling met een voorraadsysteem, meerdere talen met complexe logica, of een grote hoeveelheid content die vanuit één bron naar meerdere kanalen moet. Maatwerk kost meer tijd vooraf en geeft in ruil daarvoor volledige controle over gedrag en snelheid.

Een website is geen bevroren product. Prijzen wijzigen, er komen nieuwe diensten bij, een blog groeit. Het contentsysteem (CMS) bepaalt hoe makkelijk dat gaat. De vraag die je vooraf moet stellen: wie gaat straks wat aanpassen, en hoe technisch is die persoon?

Een marketeer die wekelijks een blog plaatst wil geen code aanraken. Die heeft een omgeving nodig waarin een nieuw artikel voelt als een tekstverwerker met een paar velden. Een systeem als Sanity laat je precies die velden ontwerpen: een titel, een samenvatting, een afbeelding, en niets wat verwart. Bij een Webflow-project regel je vergelijkbare bewerkbaarheid via de ingebouwde editor. In beide gevallen geldt: hoe beter het CMS is afgestemd op de mensen die het gebruiken, hoe minder telefoontjes naar het bureau achteraf.

Een website staat zelden op zichzelf. Een contactformulier moet leads doorsturen naar een CRM. Een webshop koppelt aan een betaalprovider als Mollie en aan een verzendpartij. Nieuwsbriefinschrijvingen belanden in een e-mailtool. Deze koppelingen lopen via API's, een soort afgesproken taal waarmee twee systemen gegevens uitwisselen.

Onderschat deze stap niet. Een formulier dat er goed uitziet en stilletjes geen enkele lead doorstuurt, kost je maandenlang omzet zonder dat iemand het merkt. Daarom hoort het testen van elke koppeling standaard bij het werk, niet als optioneel extraatje.

Voor de livegang gaat de site door een testronde. Drie dingen staan centraal. Ten eerste snelheid: laadt de pagina binnen enkele seconden, ook op een matige mobiele verbinding? Zware afbeeldingen en overbodige scripts zijn hier de gebruikelijke boosdoeners. Ten tweede apparaten en browsers: werkt alles op een iPhone, een Android-toestel, en in Chrome, Safari en Firefox? Ten derde de foutgevallen: wat gebeurt er als iemand een verkeerde URL intikt of een formulier half invult?

Een concreet voorbeeld: een menu dat op desktop soepel opengaat, kan op een touchscreen onbruikbaar zijn omdat 'hover' daar niet bestaat. Zulke dingen vind je alleen door echt op apparaten te testen, niet door het venster op je laptop smaller te slepen.

De livegang zelf is technisch een kleine stap: de site koppelen aan de domeinnaam en het beveiligingscertificaat (SSL) activeren, zodat het adres met https begint. Belangrijker is wat erna gebeurt. Zoekmachines moeten de nieuwe pagina's vinden, dus een sitemap en de juiste instellingen in Google Search Console horen erbij. Analytics laat je zien hoe bezoekers zich gedragen, zodat je na een paar weken kunt zien waar mensen afhaken.

Website ontwikkelen stopt dus niet bij de livegang. De eerste maanden leveren data op waarmee je pagina's aanscherpt. Een productpagina die weinig converteert, een blog dat verrassend veel verkeer trekt, een formulier dat halverwege wordt verlaten: dat zijn signalen om op te reageren.

Als je deze zeven stappen naast je eigen plannen legt, weet je waarschijnlijk al waar je twijfelt: de structuur, de keuze tussen een visueel platform en maatwerk, of de koppelingen met je bestaande systemen. Precies daar begint een goed gesprek.

Bij Reinspire kijken we eerst naar wat jouw site moet doen en voor wie, en pas daarna naar de techniek. Wil je weten welke route bij jouw situatie past en wat een realistische planning is? Neem contact op, dan lopen we samen je plannen door en zetten we de eerste stappen concreet op papier.

Bekijk hoe Reinspire websites bouwt