In Apple Safari en Google Chrome komt het nog wel eens voor dat de navigatie verspringt of het complete frame lager begint dan in andere browsers. Het probleem zit hem in de css.

De meeste templates die we ontwikkelen hebben fixed width (er wordt bij ons dan ook vaak gewerkt met afbeeldingen om de vormgeving te bepalen). Om gemakkelijker een ontwerp cross-browser pixelprecies te krijgen beginnen we de stylesheet met de volgende declaratie:

* {
margin: 0;
padding: 0;
}

Deze declaratie zorgt ervoor dat alle elementen een margin en padding van 0 krijgen. We kunnen dan verder zelf bepalen welke elementen hoeveel margin en padding meekrijgen.

Safari en Chrome passen deze regel helaas niet overal toe, wat voor problemen in de template kan leiden. Bij de volgende elementen (voor zover ik weet) passen deze browsers de regel niet toe: body, ul. De ‘bugs’ in de template kunnen op de volgende manier opgelost worden, declareer bij de body en de ul opnieuw de margin en padding:

body, ul {
margin: 0;
padding: 0;
}

Na het toevoegen van deze regels in de css werkt in de meeste gevallen de template weer goed in Safari en Chrome.

In veel statistiekpaketten (zoals bijvoorbeeld Google Analytics) kun je zien welke browsers je bezoekers gebruiken, maar als webmanger wil ik graag in het algemeen weten welke browsers het meest gebruikt worden: bij deze browsers moeten de websites die we maken in ieder geval werken! Ik zou dit allemaal zelf kunnen gaan samenstellen aan de hand beschikbare statistieken, maar dit zou veel tijd in beslag gaan nemen. Gelukkig zijn er andere mensen die hier mooie overzichten voor maken, zelfs dynamische overzichten waar je het gebruik over een langere periode kunt bekijken. Statcounter geeft browserstatistieken beschikbaar om te kunnen bekijken.

Top 8 browser versies in Nederland - maart/april 2009

Source: StatCounter Global Stats – Browser Version Market Share

Hierboven zie je de statistieken voor het gebruik van de diverse browsers tijdens de afgelopen week. Je kan heel duidelijk zien dat Internet Explorer nog steeds de overhand heeft, maar dat Firefox toch ook door veel mensen gebruikt wordt. Ook is goed te zien dat bijvoorbeeld Safari en Chrome nauwelijks gebruikt worden ten opzichte van de eerder genoemde browsers. Betekent dit dat we hier niet meer voor hoeven te testen? Nee. Safari wordt door ongeveer 2% van de mensen gebruikt, maar op 1000 bezoekers zijn dit wel 20 mensen: dit zouden 20 klanten kunnen zijn! Moet je dan je website voor echt elke browser optimaal maken en testen? Ik denk van niet, dit zou de kosten namelijk uit de pan doen rijzen. Mijn ervaring is dat wanneer websites zoveel mogelijk volgens standaarden ontwikkeld wordt, deze op de meest moderne browsers gewoon correct werkt. Uitgezonderd Internet Explorer 6 dan…

Zelf ook testen maar niet de luxe voor meerdere besturingssystemen? Probeer dan browsershots eens. Hier kun je automatisch een pagina laten testen in meerdere browserversies op meerdere besturingssystemen. Op webbl.nl kun je meer informatie lezen over het testen van websites.

De website is gebouwd met behulp van CMS Made Simple en maakt gebruik van een aantal aanvullende modules. Om bij te kunnen houden hoeveel mensen op welke pagina’s komen wordt Google Analytics gebruikt.

In de komende tijd zal ik nog regelmatig wijzigingen doorvoeren aan de website om deze steeds verder te verbeteren.

Middelpunt van deze campagne is de website waar meldingen van verrommeling verzameld worden.

Op de website kun je zelf een melding van verrommeling maken. Je kunt hier naast een algemene omschrijving ook een foto en positionering via Google Maps toevoegen.

De website heb ik op mijn werk (Nilsson Creatieve Communicatie) gebouwd in Drupal nadat het design gemaakt is door mijn collega’s.