Mark Roelofsen

Inleiding

Vanwege de fusie van de drie gemeenten; Wognum, Noorder-Koggenland en Medemblik tot de nieuwe gemeente Medemblik moest er uiteraard een nieuwe website gemaakt worden. Deze is online gekomen op 1 januari, de dag dat de fusie een feit is geworden. Vanwege mijn interesse in webdesign was ik natuurlijk erg nieuwsgierig naar de website en ben ik hem eens kritisch gaan bekijken. Ik was namelijk erg benieuwd in hoeverre de site zou voldoen aan moderne webstandaarden. In dit artikel volgt dus een nadere ontleding van de site inclusief alle kritische noten.

Algemene indruk

De algehele indruk van de site komt zeer positief op mij over. Uiteraard was het logo mij reeds bekend en had ik al het één en ander van de huisstijl gezien. In de huisstijl komt veel groen en blauw terug. Groen omdat de gemeente een zeer landelijke gemeente is gelegen in West-Friesland, de gemeente bestrijkt een groot gebied tussen Medemblik en Hoorn waar nog veel uitgestrekte landerijen zijn met lintbebouwing. De foto’s die verwijzen naar het agrarische landschap voegen een soort vertrouwdheid toe. De blauw kleur komt voort uit de watersport. In Medemblik wordt jaarlijks de Holland Regatta gehouden, een internationaal sportevenement waarin alle olympische klassen vertegenwoordigd zijn en waar de beste zeilers uit de gehele wereld naar toe komen.

De site doorkijkende blijkt wel dat de site de ruimte van het scherm slecht benut. De site is ontworpen voor een breedte van 800 pixels. Op zich is daar niets verkeerds aan, teksten kunnen namelijk beter gelezen worden als de kolombreedte smal blijft. Maar op de website blijft tijdens het gebruikt altijd de afbeelding van een tulp in beeld. Op zich is het mooi dat het agrarisch gevoel behouden blijft, maar het is zonde van de ruimte. De site kent drie kolommen waarvan de middelste bestemd is voor de daadwerkelijke content. De redelijke brede linker kolom wordt echter opgevuld door een verder zinloze tulp. Deze ruimte zou veel beter benut kunnen worden voor contextuele menu’s die helpen bij de navigatie over de site heen door gerelateerde links aan te bieden. Het plaatje van de tulp zou wel behouden kunnen blijven, maar zou naar onderen verdrongen kunnen worden door het context menu.

Wat ook opvalt is het hoge topmenu anex header van de site. Op schermen met een resolutie van 1024×768 neemt dit verder statische deel van de website bijna de helft van het beschikbare schermruimte in. Hierdoor wordt de daadwerkelijke content van de site als het ware buiten het blikveld van de bezoeker gedrukt en zal deze moeten scrollen om deze te bekijken. Het topmenu is echter van grote waarde voor de navigatie op de site, en aangezien resoluties steeds groter worden en men gewend is naar beneden te scrollen om een site te lezen is dit niet echt nadelig voor het gebruik van de site.

Inhoud van de site

Wetende dat de invulling van de site op dit moment nog niet optimaal is vanwege de fusie kan er nog geen oordeel gegeven worden over de inhoud van de site. Wel is er al een beeld te vormen van de basis-structuur van de site. Uiteraard is het zeer belangrijk dat een burger zijn weg goed kan vinden op de site. In ieder geval wordt het actuele nieuws goed naar voren gebracht op de index pagina. Veel burgers zullen de site echter bezoeken vanwege de vele producten en diensten die via de site worden aangeboden of voor achtergrondinformatie over iets dan men gelezen heeft, of iets dat men gezien heeft langs de weg.

Via de kopjes “bestuurlijke organisatie”, “gemeentelijke organisatie” kan men nadere informatie vinden over de organisatie van de gemeente. Dit soort informatie is in de regel altijd vrij makkelijk te vinden. Moeilijker wordt het vaak met het vinden van producten en diensten, een gemeente bied een enorm scala aan producten aan. Vaak zien mensen door de bomen het bos niet meer en moet er goed gezocht worden om het uiteindelijke product te kunnen vinden. Kijkende naar de site valt het kopje “Digitaal Loket” op, hier moeten we vast zijn om iets aan te vragen.

Klikkende op het kopje “Digitaal Loket” en vervolgens “Producten en diensten catalogus” blijkt dat er op diverse manieren gezocht kan worden tussen de verschillende producten en diensten. Puntje van kritiek is hier dat na de klik op “Digitaal Loket” meer ingangen getoond zouden kunnen worden naar de uiteindelijke producten toe. Nu moet eerst doorgeklikt worden naar de catalogus toe. Een mogelijkheid voor een directere benadering van de producten en diensten zou gerealiseerd kunnen worden door de rechter of linker kolom beter te benutten met contextuele menu’s met de meest gevraagde producten en diensten.

Na het klikken op de “Producten en diensten catalogus” blijkt dat er diverse ingangen zijn om een product te vinden, namelijk via; Een “zoekterm”, “Thema”, “Doelgroep”, “Levensgebeurtenis”, en via de eerste “Letter”. De links naar deze ingangen komen echter niet helemaal uit de verf, bij de verdere uitwerking van de site denk ik dat de zoekwijzen meer tot uitting zouden moeten komen. Bijvoorbeeld door direct het zoekvenster te tonen.

Verder klikkend komen we bij de daadwerkelijke producten en diensten. Wat mij opvalt is de pagina verdeling. Natuurlijk is het niet klantvriendelijk om alle 120 producten in één keer op het scherm te zetten. Echter een lijst van ca. 50 producten zoals bij “bouwen & wonen” mits logisch gesorteerd en eventueel onderverdeeld in subkopjes is beter te doorzoeken dan het moeten klikken door 5 pagina’s met 10 producten waarbij het een verrassing is wat men op de 5e pagina aantreft. Deze navigatiewijze spreekt mij niet direct aan.

Contactformulier

Het volgende dat veel zegt over de bruikbaarheid van de site is de opbouw van formulieren. Het enige formulier dat op dit moment beschikbaar is, is het contact formulier. Ik heb al diverse sites bekeken en mij valt vaak op dat contact formulieren altijd van die pietepeuterige invulvakjes hebben. Een contactformulier vul je in omdat je iets te melden hebt, daarom moet het invoervak voor de tekst van redelijke afmetingen zijn. Misschien wordt het gedaan in de hoop dat men het formulier niet gebruikt, maar dat kan de bedoeling natuurlijk nooit zijn. Een textarea voor een contactformulier zou minimaal 50 tekens per regel moeten kunnen bevatten en toch minstens 10 regels hoog moeten zijn. Voor formulieren waar men meer tekst in kwijt moet zou dat zelfs nog meer kunnen zijn. In de stylesheet is voor textarea’s echter een hoogte van 60px opgegeven waardoor na drie regels al een scrollbalk verschijnt en men moet scrollen, voor mensen die lang van stof zijn zoals ik uiteraard een groot nadeel. In de breedte kunnen in de textarea maar 35 tekens gezet worden. De oplossing is om voor textarea’s de beschrijvende tekst boven het veld te zetten en de textarea’s de gehele breedte van de content kolom te laten innemen.

Validatie

Nu komen we bij het technische gedeelte van deze beoordeling. Valideert de site, wordt er gebruik gemaakt van semantische html code en is de structuur van de html in orde? Om dit artikel ook in de toekomst kloppend te houden heb ik de site van 1 januari gekopieerd naar mijn eigen webspace zodat de html structuur klopt met het verhaal. Wel is de indenting van de code bijgewerkt om de leesbaarheid van de html te verbeteren.

Kopie: Website Medemblik 1 januari 2007

De html validator extensie in Firefox geeft op de index pagina 30 warnings aan. Laten we eerst eens kijken wat dit allemaal te betekenen heeft.

1. “line 29 column 3 – Warning: </head> isn’t allowed in <body> elements”
2. “line 41 column 2 – Warning: discarding unexpected <body>”

Deze melding wordt veroorzaakt doordat er een noscript element is opgenomen in de head sectie van het document. Dit triggered deze warning omdat hier impliciet een body wordt geopend. Een noscript element mag alleen voorkomen in de body van een document aangezien het visuele content betreft en geen document informatie. Het verwijderen van het noscript element lost in ieder geval al twee warnings op.

3. “line 53 column 5 – Warning: missing </span> before <form>”
4. “line 55 column 1 – Warning: inserting implicit <span>”
5. “line 59 column 5 – Warning: discarding unexpected <span>”
6. “line 55 column 1 – Warning: <span> anchor “topzoeken” already defined”

Deze vier meldingen worden veroorzaakt doordat het formulier in een span element staat. Het form element is echter een block-level element en mag daarom niet in een inline-element geplaatst worden. Een div of in het geheel geen omringend element had hier een betere keus geweest. Het wijzigen van een span naar een div kan zoals blijkt zonder nadelige effecten uitgevoerd worden.

De volgende 21 warnings komen voort uit toepassen van het & element in de html zonder deze te converteren naar de entity &. Dit komt voor in vrijwel alle links op de site en één maal in de Disclaimer & Copyright notice onderaan in de footer.

28. “line 54 column 6 – Warning: <form> attribute “target” lacks value”

Het target attribuut van het formulier heeft een lege target. Weghalen of invullen is de oplossing. Aangezien het target attribuut geen toegevoegde waarde heeft kan deze weggelaten worden.

29. “line 87 column 8 – Warning: <img> lacks “alt” attribute”

Een afbeelding zonder alt attribuut. Dit betreft het plaatje van een nieuwsbrief. De alt van dit plaatje dient dus nieuwsbrief te zijn, hetzelfde als de tekst die op het plaatje zelf staat. Als toevoeging kan de title van de image ingevuld worden met de tekst “Nieuwsgierig naar het laatste gemeente nieuws”.

30. “line 20 column 3 – Warning: trimming empty <style>”

Een leeg style element, waarschijnlijk wordt dit element door de site heen gebruikt om extra css properties mee te geven voor specifieke pagina’s. Op de index heeft dit element echter geen nut en zou deze achterwege gelaten moeten worden.

Voila, we hebben een perfect validerende index.

Conclusie

De website ziet er netjes uit maar er zijn best nog wat kritische puntjes waar aandacht aan besteed kan worden om de gebruiksvriendelijkheid en navigatiestructuur van de site te verbeteren.

In een volgend artikel zal ik wat nader ingaan op de html structuur van de website. Opvallen is namelijk de grote hoeveelheid spans en divs in de html. In de regel kunnen in plaats van deze elementen vaak h1/h6 en paragraaf elementen gebruikt worden die een meer betekenisvolle functie hebben dan de zuiver structuur elementen zoals de spans en divs.

development Medemblik, Werk Reageren en trackback's plaatsen is niet mogelijk.