De essentie van een webpagina

Moderne media

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:

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.

Dit zijn slechts enkele voorbeelden van het aanbrengen van structuur aan een webpagina. Met CSS kunnen we achtergrondafbeeldingen in onze documenten plaatsen om het geheel aantrekkelijk te maken. We kunnen koppen en tussenkopjes vervangen door afbeeldingen of zelfs door Flash zonder dat de essentie van het document verloren gaat.

Zo krijgen we wat we willen: een gemakkelijk te lezen document, dat er ook nog eens goed uit ziet. Oftewel: een website zoals een website bedoeld is!

Inleving

Probeer je ook te verplaatsen in de gedachten van een lezer van je website. Is informatie over het product dat je verkoopt snel te vinden? Ga na hoe een gebruiker te werk gaat als hij/zij op je pagina komt. Bij elke pagina van je website. Een groot deel van je lezers zal waarschijnlijk via een zoekmachine op een pagina van je website komen. En dan is er nog een grote kans dat hij niet op de beginpagina komt. Is in dat geval wel meteen duidelijk op welke website hij/zij kijkt, en kan de lezer snel bij de gezochte informatie komen? Probeer je een aantal dergelijke situaties voor te stellen en test hoe lang het duurt voordat je een bepaald stuk tekst kan vinden. Of laat dit door buitenstaanders doen die je website totaal niet kennen. Misschien word je dan met je neus in de feiten gedrukt, maar dat wil je natuurlijk liever dan een onefficiënte website!

Toekomstperspectief

Je kunt hier zo extreem in gaan als je wil. In veel moderne browsers (dus niet in Internet Explorer 6.0 of lager) is het mogelijk om navigatie toe te passen met behulp van link types. Bijvoorbeeld op deze manier:

<link rel="start" href="/" />
<link rel="chapter" href="/archief/26.html" title="26 dec 2004" />
<link rel="section" href="/2005/01/css2.html" title="CSS2" />
<link rel="subsection" href="#log" title="Weblog" />

In de werkbalk van de browser komt dan een navigatiemenu met de knoppen naar je pagina's. Zo blijft je pagina een document in al zijn puurheid. Helaas is het percentage gebruikers met moderne browsers die dit ondersteunen nog veel te klein om dit op deze manier toe te passen. Daarbij is de werkbalk vaak ook in deze browsers uitgeschakeld. Desondanks is het niet verkeerd om deze manier van navigatie te implementeren voor dat geringe (maar sterk groeiende) groepje gebruikers dat hier wel gebruik van maakt. Power to the people! Laat je lezers kiezen hoe ze je website bekijken!

Wat kan ik doen?

In het kort wat je kunt doen om je website volgens het principe van dit artikel te schrijven:

Pas een duidelijke, algemene navigatiemogelijkheid toe (een lijst met links bijvoorbeeld).
Houd structuur en opmaak gescheiden. HTML is voor structuur, CSS doet de opmaak. Elke taal heeft zijn eigen doel, probeer ze niet door elkaar te halen.
Houd ten alle tijde in je achterhoofd dat een webpagina niets meer of minder is dan een document. Behandel het ook zo vanaf het begin van de ontwerpfase.
Denk niet dat webpagina's geschreven volgens dit principe niet mooi kunnen zijn: CSS is onze vriend, en daarmee kan het wel degelijk.
Ontwerp voor de behoefte van je lezers. Ga er niet van uit dat ze een mooi ontwerp willen zien, maar onthoud dat ze op je pagina komen om iets te weten te komen. Als die informatie qua opmaak de sfeer uitstraalt die het moet hebben is het helemaal perfect.

Vragen of opmerkingen? Aarzel niet om te mailen, of geef hieronder een reactie:

9 reacties:

21:21 | 17-01 (link) 1 MacPhisto

In vorige lay-outs had ik mijn menubalk horizontaal geplaats aan de kop of onderzijde. Maar gezien lagere resolutiebeeldschermen wilde ik zo weinig mogelijk beeldvulling voor mijn buttons, waar overigens toch bijna niemand kijkt. Binnenkort snoei ik daarom zeker een tweetal pagina's weg. En die linkjes met puntjes is op zich wel handig toch? Zolang ze maar niet te zeer in beeld springen qua kleur en positie. Zoals die Blogroll-lijst.

22:46 | 17-01 (link) 2 Vipergirl

*denkt nu wel even heel hard na* … *gaat behoorlijk twijfelen over haar eigen siteje ….*

Hmm …. laat maar ;) Ik heb in ieder geval weer nuttige info tot mij mogen krijgen enne wellicht dat het me ooit nog eens lukt met dat css ;)

00:03 | 18-01 (link) 3 NeefRoel

Voor Blogger-gebruikers heb ik de Blogger-codes gebruikt om de links van recente en archiefberichten in de site-navigatiebalk te zetten, waarvan akte: http://www.xs4all.nl/~neefroel/2005/01/site-navigatie.html

18:52 | 18-01 (link) 4 MacPhisto

Neefroel: Misschien wel zo handig wanneer ik weer eens mijn lay-out wijzig… maar nu even niet. :-)

09:50 | 20-01 (link) 5 BijDeHandJe

Nick, ik wil even zeggen dat dit heel duidelijk geschreven is!!! Zelfs een PC-nitwit als ik snapt het nu enigzins! Chapeau!!!

00:11 | 21-01 6 Tom

Nick!!
JE BENT GENIAAL!!

"In veel moderne browsers (dus niet in Internet Explorer 6.0 of lager)"

en gelijk heb je.
Mooi stuk trouwens, heel informatief.

12:40 | 23-01 7 Nick

MacPhisto: Alles is mogelijk met een lijst, dus uiteraard ook een verticaal menu.

ViperGirl: Maak je niet druk, dit artikel is bedoeld voor professionele webdesigners. Zolang je persoonlijke website gemakkelijk leesbaar is en voor jouw gevoel toegankelijk is, is het prima, toch?

NeefRoel: Je maakt het de Blogger gebruikers wel heel makkelijk zo, goed bezig.

BijDeHandJe & Tom: Dat hoor ik natuurlijk graag! Dank jullie wel.

06:37 | 24-01 (link) 8 FlikkerOp!

Gaat nu direct twijfelen of de indeling van m'n logje overzichtelijk genoeg is. Fijn om dit te lezen!

16:39 | 18-06 (link) 9 Arvid

Webdesign is mijn grote passie, en met deze site kan ik veel dingen doen. Ga zo door

Geef uw reactie:

Naar artikelen

Nick Verstappen