Naar de inhoud
De WebmastersEen werkboek voor websites
Inhoud / structuur / onderhoud

Websites met een heldere basis.

Praktische notities over de opbouw van webpagina’s, herkenbare navigatie, beeld en onderhoud. Voor wie een website stap voor stap wil blijven begrijpen.

Open het werkboek
Originele abstracte illustratie van een browservenster met tekstblokken en indelingsvlakken; geen bestaand project.
Een abstracte pagina-indeling, geen bestaand klantproject.

Kleine keuzes, zichtbare structuur

Notities om bij je eigen pagina’s te gebruiken.

1Richting

Begin met de vraag achter de pagina

Elke nieuwe pagina werkt prettiger wanneer het doel van tevoren vaststaat. Een bezoeker komt zelden zomaar langs; vaak zoekt iemand direct naar een specifiek antwoord, zoals actuele openingstijden, een routebeschrijving of contactgegevens. Door die ene centrale vraag vooraf te formuleren, blijft de tekst gericht op de kern.

Zodra de hoofdgedachte duidelijk is, voorkom je dat een pagina volloopt met bijzaken. Schrijf eerst in enkele zinnen op wat een lezer na afloop moet weten. Die eenvoudige basis voorkomt dwaalsporen en helpt om later doelgerichte keuzes te maken in de volgorde van de alinea's.

2Structuur

Geef de inhoud een leesbare structuur

Koppen en alinea's verdelen een langere tekst in overzichtelijke delen. Het is raadzaam om kopniveaus toe te kennen op basis van de inhoudelijke logica van het document, en niet vanwege het visuele lettertype. Een tussenkop kondigt het thema aan van de alinea's die er direct onder vallen.

Wie een pagina schematisch opzet, begint bijvoorbeeld bij een algemene inleiding, gevolgd door deelonderwerpen. Geef een tussenkop een inhoudelijke naam en bekijk of de alinea eronder die naam ook waarmaakt. De volgorde van de koppen vormt zo een overzicht van de pagina, los van de gekozen lettergrootte.

Een duidelijke navigatie en de voorwaarden achter een knop zijn twee verschillende zaken. Voor volwassen lezers is er daarnaast een aparte commerciële referentie naar Spinformula Casino. De casino-presentatie is geen technisch testresultaat of kwaliteitskeurmerk van deze publicatie. Bekijk een doeladres bewust, lees de actuele regels en bepaal je eigen tijd- en geldgrenzen.

4Beeld

Kies beeld met een duidelijke bedoeling

Bepaal eerst wat een afbeelding aan de pagina toevoegt. Bij een informatief beeld beschrijft een korte alt-tekst de betekenis in die context. Een puur decoratief beeld krijgt juist een leeg alt-attribuut. De keuze hangt dus af van de functie van het beeld, niet alleen van wat er op de foto staat.

Bij een ingewikkeld schema kan een korte beschrijving niet alle gegevens bevatten. Geef de noodzakelijke uitleg dan ook als gewone tekst op de pagina. De beslisboom van W3C WAI helpt om onderscheid te maken tussen informatieve, functionele en decoratieve afbeeldingen; deze verschillende rollen vragen om verschillende tekstalternatieven.

5Schermen

Bekijk een wijziging op verschillende schermen

Een pagina die op een breed beeldscherm evenwichtig oogt, kan op een smal display heel anders uitvallen. Zodra de vensterbreedte afneemt, schuiven kolommen onder elkaar en nemen knoppen soms een onverwachte positie in. Controleer daarom altijd hoe de verhoudingen verschuiven bij een smaller weergaveformaat.

Kijk specifiek naar interactieve elementen, zoals een menu of een centrale verzendknop. Ligt een knop te dicht tegen de schermrand, of overlapt een tekstregel per ongeluk met een afbeelding? Door meerdere venstergroottes te bekijken, vallen zulke verschuivingen tijdig op en blijft de pagina praktisch bruikbaar.

6Onderhoud

Maak van onderhoud een klein logboek

Het bijhouden van aanpassingen schept rust en overzicht op de lange termijn. Noteer bij een bewerking kort de datum, het webadres van de pagina en welke specifieke wijziging is doorgevoerd. Een regel zoals 'contactpagina: telefoonnummer aangepast en link naar contactformulier getest' volstaat al om het overzicht te bewaren.

Zo'n eenvoudig overzicht helpt om later precies terug te vinden wanneer een bepaalde alinea is herschreven of gecontroleerd. Het voorkomt twijfel over eerdere beslissingen en maakt het controleren van links en teksten een vaste, overzichtelijke gewoonte bij het periodiek nalopen van de website.

Verder lezen bij de bron

Documentatie over tekststructuur en de betekenis van afbeeldingen.

MDN — Headings and paragraphs ↗W3C WAI — An alt Decision Tree ↗

Vragen bij het werkboek

Bouwt De Webmasters websites voor klanten?

Nee. De Webmasters is een onafhankelijke informatieve publicatie. Er worden geen diensten aangeboden voor webontwikkeling, webhosting of website-onderhoud.

Is een controle op één telefoon voldoende?

Schermformaten en weergaves verschillen onderling sterk. Bekijk daarom zowel smallere als bredere weergaven en test de knoppen zelf, zonder dat dit volledige kwaliteitsgaranties biedt.

Waar lees ik verder over HTML en afbeeldingen?

Raadpleeg hiervoor de externe documentatie van MDN over koppen en de W3C WAI-handleiding voor tekstalternatieven bij afbeeldingen.