Het internet is een relatief nieuw medium. Het gebruikt moderne technologie om snelle communicatie mogelijk te maken. Eén van de mogelijkheden van het internet waarvan men dankbaar gebruik maakt is de immens grote bron van informatie, die in de vorm van webpagina's online gepubliceerd staat. Men zoekt informatie over een bepaald onderwerp, vindt een document wat hem of haar relevant lijkt, en leest het. Via logische navigatie komt de lezer snel bij het gezochte onderwerp, en door duidelijke structuur is de paragraaf met de kern snel gevonden.

Helaas is dit lang niet altijd het geval. Enorm veel webpagina's slaan het plankje namelijk flink mis als het gaat om structuur, en verliezen hiermee hun essentie. Webdesigners schrijven volgens een jarenoud recept, maar hun creaties missen vaak de nodige ingrediënten om een efficiënt product te vormen.

Documenten

Wanneer functioneren webpagina's dan wel efficiënt? Ervaring leert mij dat een website het best tot zijn recht komt wanneer je het behandelt als een document, in plaats van bijvoorbeeld een online stek. In de ontwerpfase, in de uitwerkfase, altijd. Wanneer je dat als webdesigner doet, zullen ook je lezers dat doen. Een document bevat informatie, en structuur om deze informatie logisch en overzichtelijk weer te geven. Lezers vinden hun informatie het snelst door navigatie die voor zich spreekt. Paragrafen met tussenkopjes om weer te geven waar de tekst over gaat helpen bij het selectief lezen (wat bij dit moderne medium bijna altijd gebeurt).

Dit klinkt uiteraard allemaal heel logisch. Helaas wordt het nog steeds te weinig toegepast. Waarom? Ik denk dat men in de eerste plaats vaak wil zorgen dat een website er mooi uit ziet. Logisch, het oog wil ook wat. Maar de webpagina wordt dan behandeld als een apparaat, niet als een document. Zolang het maar werkt, is het prima, toch? Helaas niet. Maar kunnen we dan een gestructureerd document schrijven, mét een mooi uiterlijk? Natuurlijk!

De structuur van een document

Wanneer wij een document schrijven in een tekstverwerker om later af te drukken, zorgen we dat men het selectief kan lezen. Het wordt voorzien van een inhoudsopgave, waar hoofdstukken (en eventueel ook paragrafen) vermeld staan. Dit kan (en moet eigenlijk) met webpagina's ook.

Laten we eens gaan kijken naar een inhoudsopgave. Het is niets meer dan een lijst van hoofdstukken, met de vermelding waar men die kan vinden (in het geval van een afgedrukt document is dat de paginanummering). Bij een website kunnen we dit een menu noemen, waarbij elk hoofdstuk een andere pagina vormt. En daar heb je nog het voordeel dat je maar hoeft te klikken om bij de juiste plek te komen. Maar dat moet ook. Maak het je lezers zo gemakkelijk mogelijk, anders zijn ze zo weggesurft naar een andere pagina.

De markup van een lijst met hyperlinks als navigatie zou er zo uit kunnen zien:

<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">Auteur</a></li>
<li><a href="/archive/">Archief</a></li>
<li><a href="/artikelen/">Artikelen</a></li>
<li><a href="/links/">Links</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>

Zonder opmaak met CSS (Cascading StyleSheets) ziet het er overzichtelijk, maar niet mooi uit:

Navigatie via een lijst

Met een vleugje CSS en wat grafisch inzicht kunnen we onze lijst zo mooi maken als we willen (echt!). We kunnen kleur toepassen of de lijst veranderen in een horizontale navigatiebalk. Hoe dat in zijn werk gaat is beschreven in het artikel Taming lists op A List Apart. We kunnen er zelfs mooie tabs van maken, zoals in het artikel Sliding doors of CSS, ook op A List Apart. Daarnaast zijn er tal van image replacement technieken om de tekst in ons menu te vervangen door afbeeldingen.