Over de technische kwaliteit van websites

De eerste website die ik maakte in het kader van het ZOMDir project was Website Quality at a Glance.

Doelstellingen

Naast ervaring opdoen met Python op de Google App Engine was het doel om eenvoudig en snel de technische kwaliteit van een website beoordelen.

Criteria

Om de technische kwaliteit te beoordelen gebruik ik de volgende criteria:

1. De HTML code mag geen fouten bevatten;
2. De webpagina moet snel laden;
3. Er mogen geen vervallen / verouderde tags worden gebruikt;
4. De pagina moet vrij zijn van Flash, Silverlight en dergelijke;
5. De pagina moet 'vloeibaar' zijn, dat wil zeggen geen elementen hebben die een responsieve webpagina verhinderen.

Na een tijdje tweaken en testen lukte het inderdaad om snel een goed inzicht te krijgen in de kwaliteit van een website.

Resultaten

Al weer enige tijd geleden werd de 100.000 grens gepasseerd, wat een mooi moment is om de statistieken met jullie te delen. De belangrijkste bevindingen zijn:

1. Eén vijfde van de websites doet er lang over om te laden;
2. Drie kwart krijgt 2, 3 of 4 sterren;
3. Vijf sterren krijgen is blijkbaar erg lastig. Als ik kijk naar de laatste 1000 geteste pagina's dan lukt alleen ZOMDir het om 5 sterren te krijgen. 

Website Quality at a Glance is blijkbaar erg streng. Dat blijkt ook wel als ik kijk naar bijvoorbeeld website bureaus in Amsterdam. Van de ruim 200 website bureaus in Amsterdam zijn er slechts 4 die technisch perfect waren op het moment dat ze werden toegevoegd aan ZOMDir.com. Eerlijk gezegd vind ik dat zwaar tegenvallen.

Detailtoetsen

Met Website Quality at a Glance kan je snel een website beoordelen. Je weet dan echter nog niet hoe je je website kan verbeteren. Als extra service verwijs ik daarom na een test naar verschillende controle websites.

 

Ik zou denken dat al met al Website Quality at a Glance genoeg handvatten biedt om jouw website te verbeteren

Succes maar weer,
Hans

N.B. Meer tools voor het controleren van je website vind je op de pagina Websitepromotie voor ontwikkelaars.

--
ZOMDir.com is een startpagina en een Wiki
Ook jij voegt in 10 seconden een link toe
Voor meer informatie, ga naar Slideshare

Brakke Wi-Fi op vakantie? Gebruik de SetextBrowser

Recent moest ik "kamperen in eigen huis" omdat de vloer in de huiskamer opnieuw werd gelakt. De kat mocht niet naar binnen en kreeg daarom buiten zijn eten. Tegen het balkon stond een ladder zodat we via de slaapkamer ons huis in en uit konden. Eén ding moest ik natuurlijk wel regelen. 

Wi-Fi moet blijven

De Wi-Fi moest blijven werken. Het wordt bij ons in huis beschouwd als een basisvoorziening. De router hing daarom aan een draadje boven de vloer te bungelen. Een tweede router moest echter tijdelijk worden weggehaald. Het gevolg was dat we in huis (lees boven) slechter Wi-Fi hadden dan we waren gewend.

Brakke Wi-Fi

Of ik nu thuis ben of op vakantie, als ik brakke Wi-Fi heb, val ik altijd terug op de Setextbrowser. Waarom? Omdat er beduidend minder data benodigd is. Ik heb maar heel eventjes een beetje Wi-Fi nodig om een webpagina te kunnen lezen. Ideaal in dergelijke gevallen.

Wij van WC-eend ...

Mijn tip voor een vakantie met een brakke Wi-Fi verbinding is dan ook enigzins te vergelijken met Wij van WC-eend adviseren WC-eend. Mijn tip was:

Gebruik setextbrowser.zomdir.com bij een brakke Wi-Fi verbinding.

Fijne vakantie,
Hans

--
ZOMDir.com is een startpagina en een Wiki
Ook jij voegt in 10 seconden een link toe
Voor meer informatie, ga naar Slideshare

Heel het internet

Eén van de meest krachtige eigenschappen van het internet is dat je kan linken van de ene webpagina naar de andere webpagina. Een probleem daarbij is echter dat je meestal geen zeggenschap hebt over de pagina waar je naar linkt. Op het moment van linken is dat geen probleem, want dan kan je zien waar je naar linkt. In de loop der tijd kan dat echter wel een probleem worden. 

Webpaginas kunnen verdwijnen (sommige zeggen dan zelfs: "Het internet is stuk"), een redirect krijgen naar een andere pagina of zelfs (al dan niet gewenst) een heel andere vulling krijgen. Dat laatste kan vrij onschuldig zijn als de website omgezet is in een parking domein, maar wat als dat domein wordt overgenomen. Dan link je waarschijnlijk plotseling heel ergens anders naar. Recent overkwam dat Heinz en basisschool De Windroos / De Vlinder. 

Heel het internet

Ook al heb je geen zeggenschap over andere webpagina's. Je kan wel regelmatig controleren of je nog steeds linkt naar de pagina waar je naar toe wilde linken. Een link checker kan daarbij helpen. Weliswaar kan daarmee niet gecontroleerd worden of de content van een site verandert, maar je kan wel zien welke links nog werken en welke niet. 

Links welke worden omgeleid (301 of 302, redirected) kan je beter laten verwijzen naar de uiteindelijke pagina. Links die om een of andere reden niet meer werken (404, 408, broken) zou ik verwijderen dan wel er een alternatieve webpagina voor opzoeken. 

De toekomst van link checkers

Het controleren van goed werkende links wordt tegenwoordig ook wel gezien als onderdeel van technische zoekmachine optimalisatie. Het gaat dan ook om het juiste gebruik van kopjes, meta tags, bijschriften laadtijd en dergelijke. Vanzelfsprekend ;‑) vind je op ZOMDir een overzicht van:

• Broken link checkers
• SEO Tools

Succes, met het helen van jouw stukje internet,
Hans

N.B. Inmiddels is er een diepgravend onderzoek gedaan naar broken link checkers. Het resultaat is te vinden op Rusty Results.

--
ZOMDir.com is een startpagina en een Wiki
Ook jij voegt in 10 seconden een link toe
Voor meer informatie, ga naar Slideshare

Niet werkende links zijn #nooitgrappig

Een tijdje geleden waagde ik me aan het maken van de linkchecker Broken Links at a Glance. Het is een prima link checker voor de wat kleinere sites. 

Vandaag was ik nog even aan het testen hoe Broken Links at a Glance het doet met grotere sites. Omdat ik toch naar 3FM luisterde kwam spontaan op om 3fm ook eens te testen.

Zoals bijna elke site die ik testte had ook 3fm een paar niet werkende links, maar dat deze pagina niet werkt vraag echt wel om een woordgrapje ... 

Niet werkende links zijn #nooitgrappig

Dat uitgerekend de link naar nooitgrappig niet werkt, is stiekem best wel grappig.

Hans

--
ZOMDir.com is een startpagina en een Wiki
Ook jij voegt in 10 seconden een link toe
Voor meer informatie, ga naar Slideshare

Wordpress perikelen

Laatst heb ik me toch eens op Wordpress gestort. Dit omdat het zo gemakkelijk zou zijn om daar een knappe website mee te maken. Hmm, dat vond ik een beetje tegenvallen. In eerste instantie lijkt het er namelijk op dat je erg afhankelijk bent van bestaande templates. Op zich geen probleem natuurlijk, maar ... elk template heeft zo zijn onhebbelijkheden.

Ik vond het niet meevallen om een thema te vinden dat goed configureerbaar was en precies datgene laat zien dat ik er van verwacht.

Kwalitatief slechte code

Kijkend naar de HTML code die wordt gegenereerd schrok ik me helemaal het laplazerus. Wat een hoop code wordt er gegenereerd en wat een hoop requests zijn daarvoor benodigd zeg. En laat ik het dan maar niet eens over de kwaliteit van de code hebben. Vaak diep triest.

Na een paar thema's te hebben geprobeerd stond ik het op het punt om het op te geven. Gelukkig ontdekte ik net het fenomeen "blank theme". Dat zijn wordpress templates zonder al te veel toeters en bellen. Erg prettig als je HTML en CSS een beetje machtig bent.

Sandbox to the rescue

Op basis van het al wat oudere sandbox theme lukte het me veel sneller om wat voor elkaar te boxen dan met alle andere themes die ik heb uitgeprobeerd. Blijkt maar weer eens dat de kracht van eenvoud niet moet worden onderschat.

Mocht je overigens suggesties hebben voor ander gratis "blank theme", dan houd ik me aanbevolen.

Groeten,
Hans

--
ZOMDir.com is een startpagina en een Wiki
Ook jij voegt in 10 seconden een link toe
Voor meer informatie, ga naar Slideshare

Doe de noscript tag in de ban

Laatst kwam ik er achter dat Wave een Alert geeft als er een <noscript> tag wordt gebruikt.

Dat verbaasde me enigszins. Ik had nog steeds in mijn hoofd dat dat gewoon nette code was.

Wave stelt echter:

A <noscript> element is present. Content within <noscript> is presented if JavaScript is disabled. Because nearly all users (including users of screen readers and other assistive technologies) have JavaScript enabled, <noscript> cannot be used to provide an accessible version of inaccessible scripted content.

Sterker nog, het gebruik van de <noscript> tag zou eigenlijk helemaal niet nodig moeten zijn als je website opgezet is volgens Progressive enhancement. Het idee is dat je dan uitgaat van de meest simpele webpagina welke door alle oude browsers correct kan worden getoond. Vervolgens voeg je hier extra's aan toe zonder de basisfunctionaliteit in gevaar te brengen.

Het World Wide Web Consortium stelt zelfs dat het lomp is om de <noscript> tag te gebruiken.

The noscript element is a blunt instrument. Sometimes, scripts might be enabled, but for some reason the page's script might fail. For this reason, it's generally better to avoid using noscript, and to instead design the script to change the page from being a scriptless page to a scripted page on the fly.

Het is dus beter om met Javascript de pseudo noscript code te verwijderen, dan een <noscript> tag te gebruiken. Bijvoorbeeld aan de hand van onderstaande code:

<span id="noscript">The basic functionality you want to offer...</span>

<script type="text/javascript">
/* Remove the <noscript> code */
var noscript = document.getElementById('noscript');
noscript.parentNode.removeChild(noscript);

/* Your enhanced code, to give a better user experience */
/* ... */
/* ... */
</script>

Zie ook het voorbeeld "Noscript without <noscript>".

Weer wat geleerd.

Nog een leerpuntje is dat spammers in het verleden misbruik maakten van de <noscript> tag. Google negeert dan wel wantrouwt noscript code. Nog een argument dus om de <noscript> tag niet meer te gebruiken.

Groeten,
Hans

--
ZOMDir.com is een startpagina en een Wiki
Ook jij voegt in 10 seconden een link toe
Voor meer informatie, ga naar Slideshare

Onleesbare webpagina's toch lezen

Een van de subprojecten waar ik in in het kader van het ZOMDir project aan heb gewerkt was de Setextbrowser. Dit omdat ik voor ogen had het toevoegen van een nieuwe link zo eenvoudig mogelijk moest zijn.  In principe zou één invoerveld, voor het adres van de link, genoeg moeten zijn.

Na het opgeven van een nieuwe link zou dan automatisch de ankertekst en de tooltip tekst van de link moeten worden bepaalt op basis van respectievelijk de title en de description van de te linken webpagina.

Een groot probleem was indertijd dat ik geen idee hoe ik de tekst van een webpagina moest lezen, hetgeen reden genoeg was om de Setextbrowser te maken. Het idee daarvan was simpel:

Lees een webpagina in en toon deze vervolgens in het Setext formaat.

Onleesbare webpagina's toch lezen

In de praktijk niet alleen een leuke vingeroefening. Het is nog verdomde handig ook. Zo gebruik ik de Setextbrowser als:

• ik een hele slechte draadloze internet verbinding heb (de Setextbrowser reduceert het aantal bytes dat moet worden opgehaald aanzienlijk);
• de site die ik wil lezen slecht te lezen is (weinig contrast, veel reclame, blokkerend javascript, niet geschikt voor mobiel...);
• mijn werkgever, in mijn ogen ten onrechte, een website heeft geblokkeerd en ik meen deze toch te moeten lezen voor mijn werk.

Recent, met dank aan Jules Ernst, heb ik de Setextbrowser ook min of meer geschikt gemaakt voor het raadplegen van tabellen. 

Dus kom je een keer een niet lekker werkende website tegen, bekijk hem eens met de Setextbrowser. Wellicht kan je dan wel lezen wat er staat.

Gegroet,

Hans

--
ZOMDir.com is een startpagina en een Wiki
Ook jij voegt in 10 seconden een link toe
Voor meer informatie, ga naar Slideshare