Check je website met handige tools

Voor een website is het belangrijk dat hij goed werkt voor zoveel mogelijk mensen: elke bezoeker telt. Natuurlijk gebruiken de meeste mensen Internet Explorer (IE), maar als je site alleen werkt in IE, dan loop je (meer dan) 15% van je bezoekers mis. Check je website daarom in verschillende browsers en zorg ook dat hij toegankelijk is voor mensen met alternatieve manieren van internetsurfen, door toegankelijkheidstoetsen te gebruiken. Er zijn online gelukkig veel gratis tools voor te vinden.

Inhoud

• Check je code
• Check in verschillende browsers
• Check je site op toegankelijkheid
• Check op laadtijd
• Check je site m.b.v. browsertoolbars of -extensies
• Tot slot

Check je code

Fouten in je (X)HTML en CSS kunnen er voor zorgen dat je site er niet uitziet zoals je had bedoeld. Gebruik daarom een correct doctype en haal je code door een codechecker.

• (X)HTML check je in de W3C-markupvalidator
• CSS check je in de W3C-CSS-validator

Overigens betekent gevalideerde (X)HTML-code niet per definitie dat je kwalitatief goede code hebt; het betekent slechts dat je pagina aan bepaalde voorwaarden voldoet.

Check in verschillende browsers

De ene browser is de andere niet. Met name IE5.x en IE6 bevatten gigantisch veel CSS-bugs, waardoor het misleidend kan zijn wat je in die browsers te zien krijgt. Als je een site in een moderne browser als Safari, Opera of Firefox bekijkt, dan krijg je een realistischer beeld van je site. Het is dan ook aan te raden om altijd eerst te testen in deze browsers voordat je het test in IE. Bugs in IE kun je altijd nog achteraf aanpakken. Vergeet niet in meerdere versies van IE te testen.

• Download Opera
• Download Safari (ook voor Windows)
• Download Firefox
• Download Google Chrome
• Download verschillende versies van IE
• Download een officiële standalone IE6, IE7 of IE8
• Evolt browserarchief (van Mosaic tot Flock, het is er allemaal)

En je kunt natuurlijk Linux en één van de vele browsers voor Linux installeren.

Daarnaast kun je online screenshots laten maken van je site , die gemaakt zijn door verschillende browsers:

• Browsershots (diverse browsers)
• Netrenderer (IE5.5 t/m IE8)
• Browsrcamp (Safari)

Check je site op toegankelijkheid

Na het checken van je code en het checken in verschillende browsers kun je ook nog testen of je site toegankelijk is voor mensen die op een alternatieve manier op internet surfen. Dat hoeven overigens niet eens gehandicapten te zijn, dat kunnen ook mensen zijn die surfen zonder keyboard, mensen met een PDA of mensen met slechtere ogen (ouderen). De laatste twee groepen zullen de komende jaren alleen maar groeien, wat de toegankelijkheid alleen maar belangrijker maakt.

• Webrichtlijnen quickscan
• Opera Mini simulator (PDA-simulator; vereist Java)
• W3C tekstbrowser-simulator

Check op laadtijd

Een laatste check is om te kijken hoe snel je site laadt. Hoewel een groot aantal mensen inmiddels een breedbandaansluiting heeft, is er duidelijk nog steeds een groot deel dat geen breedbandverbinding heeft. Daarnaast blijven internetters ongeduldig, hoe snel de verbinding ook moge zijn. Dus hoe sneller je site laadt, hoe prettiger voor de bezoeker.

• Pingdom Tools: Full page test (laadtijd meten)
• Web Page Analyzer (op welke punten kun je de laadtijd verkorten)
• HTTP-compressiechecker (hoeveel het scheelt wanneer je compressie toepast op webpagina’s)

Check je site m.b.v. browsertoolbars of -extensies

Zoals je ziet, is het nogal veel checken. Tenminste, als je het goed wilt doen. Wanneer je werkt volgens webstandaarden, zul je merken dat het zich gelukkig veelal beperkt tot kleine wijzigingen (veelal wijzigingen voor IE). Om het checken makkelijker te maken, zijn er diverse toolbars te installeren. Zo kun je met een druk op de knop je pagina checken.

• IE Developer Toolbar (toolbar voor IE6 en IE7)
• Firefox Web Developer Toolbar
• Firefox Firebug development tools
• Site check bookmarklet (één bookmarklet, meerdere checks)

Diverse browsers hebben tegenwoordig ook handige, ingebouwde toolbars om je website te checken:

• Opera 10+ bevat Opera Dragonfly, de opvolger van Opera developer tools
• Safari 4+ bevat Safari web developer tools
• IE8 bevat de IE developer toolbar

Tot slot

Mocht je aanvullingen, verbeteringen, suggesties, etc. hebben voor deze lijst met tools, laat het me weten! (Het is overigens niet mijn bedoeling om een zo compleet mogelijke lijst te maken, maar slechts een handige lijst.) Welke tools gebruik jij?

Aanvullende artikelen

• Why we won’t help you (Engels artikel waarom codevalidatie belangrijk is)
• Publiceren? Eerst valideren! (Nederlands artikel waarom validatie belangrijk is, plus extra uitleg over validatietools)
• Evaluation, testing, and tools (artikelen over testen voor toegankelijkheid)

Update 19 maart 2008: Safari uit beta-fase, dus informatie aangepast.
Update 29 november 2008: nieuwe browser Google Chrome toegevoegd.
Update 25 maart 2009: info over IE8 aangevuld.
Update 4 augustus 2009: link toegevoegd met extra achtergrondinformatie over validatie.
Update 10 december 2009: ingebouwde webdevelopertools aangevuld.