Leestijd
Hoe bouwt de webbouwer zijn eigen site?
Onze nieuwe website ontstond via ons volledige eigen proces: eerst strategie en propositie aanscherpen, daarna content maken, wireframes bouwen, design ontwikkelen en maatwerk WordPress bouwen. We migreerden bestaande content, testten uitgebreid en gingen live. Nu optimaliseren we continu op basis van gedrag en resultaten. Je leest het hele proces in dit artikel.
Kort samengevat (TL;DR):
In dit artikel:
-
We hebben onszelf behandeld als klant: Discovery, wireframes, design, development, migratie, testen en doorontwikkeling
-
We scherpten eerst onze propositie en producten aan, daarna pas gingen we ontwerpen en bouwen
-
We combineerden nieuwe content met jaren aan bestaande blogs, cases en FAQ’s
-
Techniek, snelheid, toegankelijkheid en structured data stonden vanaf dag één centraal
Waarom we toe waren aan een nieuwe website
Zoals de timmerman met de klemmende deur, zo waren wij de webbouwer met de verouderde site. Klantwerk ging altijd voor. Onze eigen website werd keer op keer doorgeschoven.
En toch voelde het al een tijd niet goed meer.
We zijn gegroeid in specialisme, in team en in type projecten. Onze oude site vertelde dat verhaal niet goed genoeg meer.
En als je zélf roept dat een website voor je moet werken, dan moet je daar zelf ook naar leven. Dus besloten we: we worden klant van ons eigen bureau. We draaien het volledige traject dat we voor klanten hebben ontwikkeld. Van Discovery tot en met development.
Discovery en plan van aanpak
Propositie aanscherpen en producten definiëren
De enige manier om onze eigen site goed te bouwen, was om te beginnen zoals we bij klanten ook altijd beginnen: met Discovery. Niet met designs, niet met techniek. Maar met vragen stellen.
We stelden onszelf precies de vragen die we klanten ook stellen
In een aantal sessies brachten we drie dingen scherp in beeld:
- Positionering – Hoe willen we in de markt gezien worden
- Propositie – Welke belofte doen we aan klanten, en hoe maken we die waar
- Sterktes en verbeterpunten – Waar zijn we aantoonbaar beter dan de markt en waar moeten we groeien
We maakten twee lijsten:
Die eerste lijst werd input voor:
De tweede lijst werd input voor ontwikkeling van onze specialisten. En uiteraard werd de nieuwe website voor onszelf de eerste mogelijkheid om die verbeteringen op te ontwikkelen en daadwerkelijk toe te passen.
We brachten onze diensten onder in drie duidelijke producten:
Discovery leverde dus veel meer op dan alleen input voor de website. Het gaf ons een scherper beeld van wie we zijn, wat we doen en waar we beter in willen worden. Precies hoe we het bij klanten ook aanpakken.
Contentproductie
Teksten, foto’s en video: eerst het verhaal, dan de vorm
Met een scherpe propositie kun je pas echt goede content maken. We wilden een site die het persoonlijke karakter van Sturdy laat zien. Echte mensen, echte projecten, echte expertise.
Teksten
Tekst is het grootste deel van de content van een website. En tekst schrijven kost tijd. We hebben daarom alles wat al bestond slim hergebruikt
Veel ideeën hebben we ingesproken, bijvoorbeeld in de auto. Die ruwe tekst lieten we door AI structureren en herschrijven. We gebruiken AI daarmee niet om het verhaal te verzinnen, maar om het werk sneller en scherper te maken. De inhoud bleef van ons. AI hielp om het op te schonen en logisch te maken.
Belangrijk voordeel: het grootste deel van de teksten was klaar vóór we aan de wireframes begonnen. Daardoor konden we al in de structuurfase rekening houden met inhoud, lengte en hiërarchie van de content.
Foto en video
We planden één grote visuele contentdag op kantoor: voor de productie van foto’s en video. Door de juiste voorbereiding werd dit een doorslaand succes. Wij zorgden voor het volgende:
Voor die dag deden we een soort voorjaarsschoonmaak
Dat scheelde enorm in nabewerking. Uiteindelijk schoten we ruim 200 foto’s, waarvan een groot deel direct bruikbaar was.
Omdat de schetsen voor het webdesign al in concept klaar stonden, konden we de fotograaf heel gericht briefen:
Wireframes: structuur en lay-out
De bouwtekening van de nieuwe site
Toen propositie en contentrichting helder waren, konden we aan de structuur werken. Dat doen we altijd met de ontwikkeling van interactieve wireframes.
In deze fase:
We gebruiken in de wireframes zoveel mogelijk echte teksten. Geen lorem ipsum. Daardoor voelt het prototype direct realistisch. We ontwikkelen schermen in zowel mobiele als desktopvariant.
Een wireframe is voor ons
Deze fase is van groot belang om de scope, begroting en planning van de nieuwe website beheersbaar te maken. Aanpassingen doorvoeren in een wireframe is relatief goedkoop. Aanpassingen doorvoeren na development is duur. Dat geldt voor onze klanten, maar ook gewoon voor onszelf.
Visual webdesign
Vormgeven aan identiteit, UX en focus
Met de wireframes als basis begon de designfase. Nu mocht het mooi worden. Maar wel op een manier die voor ons werkt.
Belangrijke uitgangspunten zijn:
We hebben in ons nieuwe webdesign een aantal bewuste keuzes gemaakt:
Rust en ruimte
De site moest een podium zijn voor content. Geen kermis. Veel witruimte, duidelijke hiërarchie, sterke typografie.
De asterisk als beeldtaal
De stervorm uit onze huisstijl was jarenlang onderbenut. In de nieuwe site hebben we die groot gemaakt
Dat maakt de beeldtaal uniek en goed door te trekken naar andere kanalen, zoals social en presentaties.
Een herkenbaar font
We kozen voor Brockmann: een strak, modern font waarin een aantal karakters net even anders zijn dan gemiddeld. Herkenbaar, goed leesbaar en sterk in koppen.
Figma als samenwerktool
Net als bij klantprojecten hebben we het volledige design in Figma gemaakt. Dat maakt
Development in WordPress
Blokken, performance en structured data
Als webbouwer voor jezelf bouwen legt de lat hoog. De site moet tot in alle details technisch kloppen.
We bouwen al sinds 2008 uitsluitend in WordPress. We gebruiken het niet alleen, we programmeren er ook in. Daardoor kennen we de code achter de software en kunnen we precies bouwen wat nodig is.
Een paar belangrijke keuzes:
Eigen thema en blokkenbibliotheek
Onze site draait op ons eigen WordPress thema en een uitgebreid blokkensystem. Dat thema is het resultaat van jaren optimaliseren voor:
De blokkenbibliotheek
Performance en Core Web Vitals
We weten dat bezoekers geen geduld hebben. En bots van Google, ChatGPT en andere LLM’s ook niet. Het indexeren van jouw website kost de bots tijd en resources en daarmee geld. En de bots zijn erg druk. Ze moeten het hele web indexeren. Jouw website krijgt daarom maar kort de tijd. Die tijd moeten we goed benutten! Dus:
Structured data en semantiek
We zetten zwaar in op structured data. Voor mensen is vaak het logisch wat een vraag en wat een antwoord is. Voor machines niet perse. Daarom markeren we bepaalde content typen op een technische manier om semantiek toe te voegen aan de content. Content typen die zich daar uitstekend voor lenen zijn bijvoorbeeld:
De lijst met structured data typen is zeer uitgebreid. We bepaalden welke schema’s waardevol zijn voor ons en implementeerden die. De juiste implementatie zorgt ervoor dat de content dynamisch wordt opgenomen in de structured data, dus ook als die wordt aangepast. Met structured data vertellen we zoekmachines en AI systemen dus precies wat wat is.
Voordelen:
Content migreren en plaatsen
Bestaande waarde behouden, nieuwe content toevoegen
Sturdy bestaat al ruim 25 jaar. In die tijd is veel waardevolle content opgebouwd zoals blogs, cases, FAQ’s, teaminfo. Die wilde we niet kwijt.
We pakten migratie in stappen aan
- Inventariseren wat blijft en wat weg kan
- Welke content is nog actueel
- Welke pagina’s leveren verkeer of conversie
- Welke content is een mooie basis, maar moet worden herschreven
- Automatisch migreren waar het kan
- Teamleden
- Nieuwsberichten en blogs
- Projecten en cases Slimme scripts zetten oude WordPress content om naar Gutenberg blokken.
- Handmatig aanvullen waar het moet
- Nieuwe proposities
- Productpagina’s
- Specialisatiepagina’s
- Bestandsnamen en alt-teksten opschonen Geen DSC000741.jpg meer, maar beschrijvende bestandsnamen zoals: webdesigner-bij-sturdy-digital-werkt-aan-een-wireframe-op-het-kantoor-in-halfweg.jpg. Dat helpt zowel gebruikers als zoekmachines.
- Structuur aanleggen vóór het vullen We hebben eerst alle pagina’s aangemaakt en de navigatie opgebouwd. Hierdoor konden we bij het vullen direct intern linken naar relevante onderdelen.
Uiteraard hebben we alles gepland en gevolgd in onze projectmanagement tool Asana: per pagina maakten wij een checklist met de belangrijke acties zoals:
Testen, SEO/URL-migratie en optimaliseren
Kwaliteit bewaken voor livegang
Sturdy test zijn eigen werk altijd voordat we het lanceren. Toen de site gevuld was, begon het testwerk. We gebruikten checklists en tools om onder meer te controleren op:
Ook voerden we een uitgebreide SEO en URL-migratie uit.
Tot slot voerden we een automatische content scan uit om te checken op onvolkomenheden zoals:
Staat alles op groen? Dan kunnen we de website live zetten en in gebruik nemen.
Go-live en doorontwikkeling
Live is niet het eindpunt, maar het begin
Live gaan zelf was technisch gezien eenvoudig
Maar dan begint het echte werk
We monitoren nu continu:
Bij twijfel testen we:
Na livegang geldt voor ons hetzelfde als voor onze klanten: onderhoud en veiligheid zijn geen luxe, maar noodzaak. Daarom zorgen wij voor:
Wat we geleerd hebben van onze eigen website
Onze eigen website bouwen was intensief en soms confronterend. Het liet ons stevig nadenken over wie we zijn, wat we willen bereiken met de site en wat daarvoor nodig is/ Maar het bevestigde vooral dat ons proces klopt.
En vooral: als je wilt dat een website voor je werkt, moet je bereid zijn om kritisch naar jezelf te kijken.
