Afdeling Begijnendijk-Betekom                                                                     Bijgewerkt : 09 februai 2004

Praktische tips en valkuilen voor kwaliteitsvolle websites

Deze pagina vermeldt een aantal zeer eenvoudige en bruikbare tips en te vermijden valkuilen bij het aanmaken en onderhouden van websites op het net. 

TIPS :

• veel websites of -pagina's geven een datumaanduiding bij tijdgevoelige informatie zoals muurkranten, nieuwsberichten en evenementenkalenders. Om elke verwarring omtrent data uit te sluiten schrijft u een datum op uw websites of -pagina's best steeds voluit bv. 15 mei 2002. Let er wel op dat de gebruiker niet verdwaalt in de verschillende datums die hij / zij op het scherm krijgt of op het uitgeprinte document te zien krijgt. De gebruiker rekent erop dat de vermelde datum ook aangeeft dat de informatie op dat moment werd geactualiseerd.
• wijs de bezoeker van uw website de weg en laat hem / haar zeker niet verdwalen in wegwijzers. Nogal wat gebruikers van het web komen via zoekmachines terecht op een webpagina, wat niet altijd de homepagina is. Gebruik daarom minimaal op elke webpagina bv. een logo en zet een eenvoudige, snel toegankelijke en duidelijke 'sitemap' op uw website. 
  Gebruik goed zichtbare, eenvoudige en duidelijke paginatitels. Belangrijk daarbij is dat u voor alle paginatitels telkens hetzelfde lettertype en tekengrootte gebruikt en dat u alle titels op dezelfde, goed zichtbare plaats op de pagina plaatst. Gebruik voor de paginatitel ook steeds exact dezelfde term als die in uw navigatie. 
• gebruikers verwachten dat een homepage hun op een duidelijke manier vertelt wat uw organisatie of de persoon achter de site doet en wat zij op de site kunnen vinden aan informatie, producten of diensten. Normaal gezien volstaan het logo en een slagzin om de gebruiker duidelijk te maken wie u bent en wat u doet. De rest van de homepagina kan u gebruiken om de voor uw bezoekers belangrijkste en nuttigste informatie in de kijker te plaatsen, maar hou het overzichtelijk
• nogal wat (overheids)organisaties stellen in een disclaimer (aansprakelijkheidsbeperking) dat ze niet verantwoordelijk zijn voor de juistheid van de informatie op hun internetsite. Als de gebruiker van de website (de burger, de ambtenaar, de ondernemer, organisaties,...) niet kan vertrouwen op de correctheid van (overheids)informatie op uw website dan heeft het weinig zin om een website te publiceren op the internet. Het enige wat u in een disclaimer kan stellen, is dat u niet verantwoordelijk bent voor de inhoud van de websites waarnaar u linken legt.
• toegestane bestandstypen : HTML, MS-Office 97 [ Word, Excel, PowerPoint, Access] en PDF. 
  Andere bestandstypen zoals bv. ABC-Flowcharter of MS-Project en hogere versies van de toegestane bestandstypen worden derhalve niet op het internet geplaatst. U kan een stroomschema of organogram, aangemaakt in ABC-Flowcharter, bv. inplakken in een HTML-pagina of in een MS-Word document en als HTML- of Word-bestand publiceren
  Om te vermijden dat een gebruiker geconfronteerd wordt met bestanden die hij niet kan bekijken of dat hij zich gaat ergeren aan lange wachttijden, is het belangrijk dat u bij een link naar bijvoorbeeld een pdf- of doc-bestand steeds duidelijk maakt dat dit niet zomaar een link is. Specificeer zowel het type als de grootte van het bestand en maak duidelijk welke software of plug-in de gebruiker geïnstalleerd moet hebben om het bestand te kunnen bekijken.
  
  Wanneer u documenten laat drukken én u wenst deze documenten op het internet te plaatsen zorg er dan voor dat u van de drukkerij een pdf-bestand vraagt. Dit pdf-bestand bevat een inhoudsopgave van waaruit met hyperlinks via bladwijzers naar de desbetreffende bladzijden kan gesurfd worden. Dit pdf-bestand wordt vanuit het volledige eindproduct zodanig aangemaakt dat het geschikt is voor een kwaliteitsvolle publicatie op het internet en waarbij de totale bestandsgrootte, na eventuele reductie, maximaal 2 MB per 100 bladzijden bedraagt.
  
  De volgende interessante besteksbepaling las ik op 21 oktober 2002 op de website van de Provincie Vlaams-Brabant (onder de knop mediatheek >>> overheidsopdrachten) met betrekking tot de aanbesteding voor het drukken van het Provinciaal Ruimtelijk Structuurplan :
  "Op de website van de provincie zal het structuurplan geraadpleegd en gedownload kunnen worden. De dienstverlener zal volgende documenten digitaal aanleveren op cd-rom:
  - een inleidende tekst in html met de aankondiging van goedkeuring van het definitief ontwerpstructuurplan. Deze inleiding wordt best zo kort mogelijk gehouden, bv. max 20 regels. Een illustratie (gif of jpg) cf huisstijl wordt als herkenningsbeeld voor de informatiecampagne bijgevoegd. Deze illustratie mag niet zwaarder zijn dan 80 Kb, gewenste resolutie is 72 dpi. 
  - de overige documenten worden als PDF-bestanden geleverd en mogen niet zwaarder zijn dan 1 Mb. Dit is essentieel voor de gebruiksvriendelijkheid om deze bestanden te downloaden. Als de bestanden dan toch nog te zwaar zouden zijn, dan moeten ze worden opgesplitst in deeldocumenten. Het is aan het communicatiebureau om een logische indeling te maken, zodat de surfer het overzicht niet verliest. Het groeperen van verschillende kaartjes in één PDFbestand mag dus, zolang de limiet van 1 Mb niet overschreden wordt. 
  - de kaarten mogen maximaal 1Mb per bestand bedragen, eventueel te groeperen in PDF-bestanden 
  - de tekst van het structuurplan, eventueel op te splitsen indien te zwaar (max 1 Mb) 
  - de samenvattende brochure (max. 1 Mb)"
  
  Wanneer u bestaande documenten wenst in te scannen maak dan gebruik van Adobe Acrobat Writer en ga als volgt te werk:
  - vooraleer te scannen gaat u best na of u over een elektronische versie van het document beschikt (bv. in MS-Word 97 of hoger waarmee u een MS-Word-bestand kunt converteren naar een *.pdf) 
  - zo niet, scan de documenten in aan circa 360 dpi in wit/zwart. Wenst u de documenten in kleur op het net scan dan enkel de desbetreffende pagina's in kleur in, zoniet komt u tot een onverantwoorde bestandsgrootte;
  - bekijk het ingescande document en indien nodig snijdt u de bladzijden bij en/of roteert u de bladzijden zodat de gebruiker een overzichtelijk document op het scherm krijgt;
  - breng de nodige bladwijzers / hyperlinks in het document aan zodat de gebruiker door de teksten kan surfen;
  - publiceer het pdf-bestand en duidt de gebruiker op het feit dat hij in het pdf-bestand kan bladeren.
• aanbevelingen van het Officieel Bureau voor EU-publicaties voor het maken van PDF-bestanden (het afladen kan even duren 1525kB groot) 
• sommige websites of -pagina's gebruiken bewegende knoppen of scrollende tekst om bepaalde zaken extra in de kijker te zetten. Nochtans is dat niet de meest gebruiksvriendelijke en zeker niet de meest effectieve manier om de aandacht van gebruikers te trekken. Overdrijf niet in het gebruik van dergelijke "toeters en bellen" zoals knipperende teksten, bewegende beelden,... op het internet. Af en toe een toetertje kan nog net, maar het mag geen "flikkerkast" worden
• gebruik geen spaties in bestandsnamen 
• naamgeving URL's van websites en/of -pagina's:
  • duidelijk, kort en bondig
  • gebruik geen spaties, hoofdletters of speciale tekens (zoals é, &, ç, ...)
• hou orde in uw directories/folders en bestanden. Wat niet thuis hoort op de webserver wordt gewist ofwel verhuisd naar een archief
• hou uw templates zo eenvoudig mogelijk en wijzig deze niet om de haverklap
• wanneer u een URL of een e-mailadres wenst in een webpagina, dan voegt u best een harde return of een spatie toe na het URL of e-mailadres. Vergewis u ervan dat de hyperlink werkelijk is gelegd of het e-mailadres correct én voor de gebruiker aanklikbaar is . 
  U doet er best aan het URL voluit te schrijven.
  Idem bij het opstellen van een e-mailbericht, een Word-document,...
• de beste manier om uw e-mails ook in de toekomst leesbaar en toegankelijk te houden is deze op te slaan in XML. Het gebruik van e-mail templates is hierbij een belangrijk hulpmiddel. Meer info op de website Digitale Duurzaamheid 
• om te voorkomen dat hyperlinks dode links / websites dode sites worden is het aangewezen directories en pagina's nooit te hernoemen en ze slechts te verwijderen als u absoluut zeker bent dat ze nergens meer voor dienen. 
• wat kan u doen om ervoor te zorgen dat uw webpagina's printvriendelijk zijn :
  - gebruik geen frames
  - gebruik geen flash en bij voorkeur geen pop-ups of pop-unders
  - gebruik bij voorkeur zwarte letters op een witte achtergrond
  - zorg ervoor dat de webpaginabreedte overeenkomt met de normale papierbreedte (A4)
  - vermijd blancoruimte en "toeters en bellen" in uw webpagina's
  Sommige sites proberen deze euvels te omzeilen door een printknop te voorzien, die leidt naar een printvriendelijke pagina. Zorg er bij de afdrukvriendelijke webpagina's steeds voor dat ze de naam van uw site of organisatie vermelden, de titel van de pagina, een (inter)netadres en dat ze toch nog enigszins aangenaam zijn om te bekijken. Een dergelijke printknop is een mogelijke oplossing, maar reken er zeker niet op dat alle gebruikers die knop gaan gebruiken. Heel wat surfers blijven trouw aan de printmogelijkheden die hun browser hen biedt.
• vul informatie in de META tags : author = naam van de auteur, keywords = trefwoorden zodat zoekmachines de informatie vinden op uw webpagina's, description = korte beschrijving van uw webpagina, vooral de homepagina
• geef elke pagina van uw website een duidelijke en korte 'title-tag' ( zie eigenschappen van de pagina, staat tussen <TITLE> en </TITLE> in het gedeelte <HEAD> ) omdat : 
  • deze informatie voor de gebruiker weergeeft op welke pagina hij / zij zich bevindt bij het surfen. De informatie verschijnt in zijn geheel in de titelbalk van de browser
  • deze informatie als titel van de webpagina bij de overeenstemmende knop in de taakbalk van Windows verschijnt
  • deze informatie bij het opslaan in de favorieten of bladwijzers wordt weergegeven
  • deze informatie door zoekmachines kan worden gebruikt 
• zorg ervoor dat elke hyperlink op uw webpagina een toegevoegde waarde geeft aan de webpagina of -site. Netscape Navigator en Internet Explorer hebben een aantal mogelijkheden ter beschikking van de gebruiker : home (die teruggaat naar de indexpagina), terug, vooruit, opnieuw opladen, de verticale scrollbar, ... U hoeft deze geen tweede maal aan uw webpagina toe te voegen. Een hyperlink legt u bij voorkeur op één enkel woord dat de kern aangeeft van de zin zodat het voor de gebruiker duidelijker wordt wat de achterliggende informatie kan zijn.
• interne links worden bij voorkeur niet in een nieuw venster geopend. De gebruiker verliest niet alleen zijn weg in de site maar geraakt met de browserknop 'terug' niet op de vorige pagina. Een browservreemd bestand (bv. PDF, MS-Word, -Excel, -PowerPoint en  -Access) daarentegen opent u altijd in een nieuw venster.
• zorg ervoor dat uw webpagina's worden aangemaakt op een "ontwikkelingsserver" (kan ook een HD van een pc, CD, ... zijn)  vooraleer zij naar een "productieserver" (= webserver) worden gepubliceerd. Hanteer dezelfde directorystructuur op beide servers. 
• maak bij voorkeur gebruik van een FTP-programma (File Transfer Protocol) voor uw bestanden (webpagina' s,...) te publiceren. U kan een FTP-programma gratis afladen op de website http://www.webattack.com  => freeware => networking => FTP-program => bv LeechFTP of WS_FTP LE of de website http://www.tucows.skynet.be => internet => network protocols => FTP => WS_FTP LE 5.08
• controleer uzelf : maw open na de publicatie de gepubliceerde bestanden via uw browser en controleer alle hyperlinks. U voorkomt klachten van de gebruikers
• hou de directorystructuur eenvoudig met andere woorden gebruik niet teveel niveau's en niet teveel (sub)directories per niveau en hou vanaf het begin een sitemap bij. U hoeft die nog niet direct te publiceren, maar het is voor uzelf een hulp om na verloop van tijd uw weg nog terug te vinden. De subdirectories op niveau 1 kunnen bv. zijn : beelden, verslagen, documentatie, ..  Denk daarbij goed na en overleg meermaals met alle betrokkenen vooraleer u de structuur van uw website definitief vastlegt. Wijzig deze structuur bij voorkeur niet om te beletten dat hyperlinks naar uw webpagina's niet langer zouden functioneren. Enkel een grondige reorganisatie mag een reden zijn om de structuur van uw website grondig te wijzigen. De breedte en diepte van de boomstructuur is van belang (zie onderstaande figuur. ref 1)

• de breedte van tabellen in percenten (bij voorkeur kleiner dan 100 %) ipv pixels, hoogte van tabellen kan in pixels
• vermijdt dat de gebruiker teveel links-rechts moet scrollen om de informatie te bekijken. U kan bv. een nieuw venster openen
• gebruik een duidelijk lettertype (Arial of Verdana) en een duidelijke tekengrootte (10 of 12) 
• kleur van letters verschillend van blauw (blauw = de hyperlinkkleur)
• onderlijn alleen hyperlinks en gebruik daarbij enkel de blauwe kleur als hyperlinkkleur zodat zij duidelijk herkenbaar zijn. Omdat gebruikers leren dat hyperlinks onderlijnd zijn, verwachten ze dat ook alles wat onderlijnd is een hyperlink is. Verwar uw gebruikers niet en onderlijn enkel en alleen hyperlinks
• zet geen lege webpagina's op het net of webpagina's met bv. vermelding "in aanbouw". De gebruiker ergert zich hieraan bij het surfen
• wanneer u tabellen publiceert zonder gegevens in de cel, plaatst dan     &nbsp     in de cel. Dit is een lege spatie en deze zorgt er meteen voor dat het randje van de cel weergegeven wordt ondanks de lege inhoud
• gebruik zoveel mogelijk zachte kleuren en zo weinig afbeeldingen
• gebruik een zachte effen achtergrondkleur, bij voorkeur "automatisch" (= witte achtergrond), en zwarte letters 
• beperk het gebruik van frames in websites, u kan beter vertrekken vanuit webpagina's 
• de communicatie met uw bezoekers is niet beperkt tot de teksten op uw site, ook de lay-out van uw site draagt een bepaalde boodschap uit. Voor de visuele communicatie geldt dezelfde stelregel als voor de verbale communicatie: wees consistent. Vooral bij sites die aan e-government doen, is een consistente visuele communicatie erg belangrijk. Gebruikers vinden het bijzonder verwarrend wanneer ze binnen eenzelfde site terechtkomen op pagina's die er helemaal anders uitzien. Ze vragen zich dan af of ze nog wel op dezelfde site zitten, wat uiteraard weinig vertrouwen wekt 
• sites die uitleggen aan hun gebruikers hoe ze kunnen navigeren of informatie vinden op de site zijn vaak het symptoom van een slechte website en kunnen dan ook best vermeden worden. Een cruciale factor in het succes van een site is de onmiddellijke bruikbaarheid ervan
• plaats geen documenten (formulieren, nota's, rapporten, ...) op uw website waarvan u geen auteur bent, maar leg bij voorkeur een hyperlink naar de desbetreffende website en / of bestand dat door de auteur wellicht ook geactualiseerd wordt. U vermijdt niet alleen plagiaat te plegen maar ook dat de documenten die op het net staan vlug achterhaald zijn.
• gezien de inhoud van de pagina's belangrijk is voor de gebruiker, belangrijker dan de lay-out, en het lezen van een beeldscherm gemiddeld 25% trager verloopt dan het lezen op papier geef ik hierbij een korte checklist :
  • zijn de zinnen niet te lang en/of te ingewikkeld ?
  • spreekt de tekst de gebruiker wel aan ?
  • vermijdt u het gebruik van lijdende vormen (zoals het gebruik van het werkwoord worden) ?
  • bevatten de zinnen niet te veel abstracties (zoals het gebruik van de woorden voorstel, eigenschap, idee,...) ?
  • maakt u wel gebruik van visuele hulpmiddelen (zoals een kleine, duidelijke en eenvoudige grafiek of een foto die in de tekst is geplakt) zonder hierin te overdrijven ?
  • meer info en nuttige tips met betrekking tot deze vragen
• zowel voor de raadpleging van de webpagina's als voor de bijhorende bestanden is het aangewezen de naspeurbaarheid voor de gebruiker zo volledig mogelijk mee te geven door vermelding naar gelang het geval van : korte en duidelijke omschrijving van het document, het onderwerp (eventueel het volledig traceerbaar pad op de server), datum (eventueel met vermelding opmaak, goedkeuring, publicatie,... ), verantwoordelijke en de afdeling, paginanummering en aantal pagina's,  versie,  ... 
  Wijs de gebruiker erop dat bij het bekijken van een webpagina in de browsertoepassing "opnieuw opladen" of "vernieuwen" wordt aangeklikt door met de cursor op de webpagina te gaan staan en de webpagina opnieuw op te laden.
• geef de lezer van uw pagina's eventueel informatie mee zoals : 
  - u kan bij het bekijken van een webpagina in Netscape Navigator => beeld => lettertype vergroten of verkleinen;
  - u kan bij het bekijken van een webpagina in Internet Explorer => beeld => tekengrootte => groter, ...
• contactinformatie moet minimaal bestaan uit een fysiek adres, een telefoonnummer en een e-mailadres. Zijn er voor bepaalde administraties of afdelingen vaste contactpersonen, plaats dan hun namen en functies op de contactpagina.
• U kan de webserver als een instrument gebruiken om bv. uw processen en projecten te ondersteunen / te beheren / te beheersen / te communiceren, het kwaliteitshandboek inclusief procedures te ontwerpen en beschikbaar te stellen, gericht informatie uit te wisselen met vooraf geïnformeerde gebruikers, ... én tegelijkertijd uw back-office en front-office uit te bouwen
• ga steeds na wat willen de gebruikers, wat kunnen de gebruikers en wat doen gebruikers, vergeet daarbij de visueel gehandicapten niet
• hou het vooral eenvoudig en actualiseer uw website periodiek. 
• doe regelmatig een zelfcontrole : surf minstens halfjaarlijks doorheen uw eigen website en ga na of de datum en hyperlinks op alle webpagina's nog actief / correct zijn, de aangeboden informatie / gegevens nog relevant zijn, ...
• ...

VALKUILEN :

• blindelings uitvoeren van voorstellen van gebruikers 
• ...

• http://europa.eu.int/comm/ipg/

Referenties :

1. "Schrijven voor het beedscherm. Internet, Contentmanagementsystemen, Intranet. " Willem Hendrikx. 2003. Sdu Uitgevers, Den Haag. ISBN 90 12 09778 9