• Een browser test is, net zoals zoekmachine optimalisatie, bij uitstek een onderdeel waarvan veel mensen weten dat het nodig is. Wat het echter concreet inhoud voor je eigen website is een ander verhaal. De opmerking: “hij moet er goed uitzien op alle browsers” of “ik wil dat hij browser compatibel” is een vage, niet-sturende opmerking die nuancering noodzaakt.

                        In dit artikel maken we korte metten met deze onduidelijkheid en leggen uit wat een browser test inhoudt. Met deze omschrijving kun je zelf aan de slag als website eigenaar of kun je overleggen met een klant wat het beste is voor haar website.

                      • Het doel van een browser test

                        Het doel van een browser test is dat een website op een dusdanige manier is gecodeerd dat ze niet noemenswaardige verschillen toont voor het overgrote gedeelte van de website bezoekers. 

                        Het doel van browser testen is dus geenszins dat een website precies hetzelfde eruit moet zien op elke denkbare browser en browser versie. Dit is per definitie onmogelijk.

                      • Browser afbakening

                        Browser testen beperkt zich in het algemeen tot de 5 grootste browsers op de markt. Deze zijn:

                        • Chrome
                        • Internet Explorer 
                        • Firefox
                        • Safari 
                        • Opera

                        In de meeste gevallen zal het voldoende zijn om de bovenste drie browsers, Chrome, Internet Explorere en Firefox te nemen omdat zij ongeveer 90% van de markt bezitten. Wil je zekerheid dien je inzage te hebben in je Google Analytics cijfers.

                      • StatCounter browser gebruik wereldwijd

                        Via de StatCounter website is het mogelijk inzage te krijgen in allerlei statistieken op zowel wereldwijd niveau als regionaal. Één van de statistieken is het gebruik van browsers.

                      • Browser compatibiliteits check

                        Een browser compatibiliteits check probeert onvolkomendheden in het weergeven van een website in een bepaalde browser te constateren door een vergelijking te trekken met de weergave in andere browsers. Deze onvolkomendheden zijn te ondervangen in 3 gebieden:

                        1. Website elementen worden totaal niet weergegeven Indien je een browser gebruikt die bepaalde nieuwere stukken code niet kan interpreteren, zal de browser deze overslaan en totaal niet weergeven.
                        2. Website elementen worden onvolledig weergegeven Het is mogelijk dat de browser een gedeeltelijke interpretatie van de code doet waardoor het website element wel wordt getoond maar niet in haar volledigheid.
                        3. Website elementen worden onjuist weergegeven Door een onjuiste interpretatie van elementen die verantwoordelijkheid zijn voor grootte en breedte kan het zijn dat de pagina layout in de war wordt gegooid, hetgeen resulteert in website elementen die op de verkeerde plaats staan.

                      • Waar ligt de focus op bij een browser test?

                        De website elementen waar de focus op ligt bij het verkrijgen van browser compatibiliteit, onderscheiden zich in de volgende onderdelen:

                        • Website brede elementen die op meerdere pagina's terugkomen (header, sidebar, footer)
                        • Individuele website pagina templates die verantwoordelijke zijn voor het weergeven van de hoofdcontent.
                        • Elementen die worden weergegeven middels javascript en / of jquery
                        • Navigatie elementen
                        • Oudere browsers (met slechte of geen ondersteuning van HTML5 en CSS3 indien hier gebruik van wordt gemaakt in de website)
                        • De volledige Internet Explorer serie omdat ze zich niet of nauwelijks houden aan HTML standaarden

                      • De CSS reset

                        Elke browser heeft haar eigen manieren om HTML elementen weer te geven. Een website zonder zogeheten “CSS reset” zal geheid verschillen tonen tussen de verschillende browser. Een must voor een browser test is om die reden het opnemen van de CSS reset. 

                        CSS zorgt voor de styling van een website zoals de kleuren, lettertypen en plaatsing van HTML elementen. De reset zorgt er voor dat HTML elementen geen initiële styling meekrijgen. Dit zorgt er voor dat bijvoorbeeld een invulveld die in de  ene browser een gekleurde rand heeft met een bepaalde hoogte terwijl dat niet in een andere browser het geval is, tenietgedaan.

                      • De CSS reset

                        Dit is een screenshot van de code van de CSS reset zoals ze wordt gebruikt in de WordPress theme van deze website. Te zien is dat vrijwel alle styling elementen die mogelijkerwijs weergegeven zouden kunnen worden in een browser op nul worden gezet of worden verwijderd.

                      • Degradatie en fallback scenario's voor CSS3

                        CSS3 is een manier voor webdesigners om uitgebreide styling aan te brengen in een website. Denk hierbij aan het toevoegen van ronde hoeken, schaduw, kleurovergangen en transitie effecten indien er met de muis interactie plaatsvind (door met je cursor over het desbetreffende element te gaan).

                        CSS3 is relatief nieuw en lang niet alle elementen van CSS3 worden evengoed ondersteund in browserversies. Om er voor te zorgen dat een website toch blijft functioneren wordt er wel over “graceful degradation” of “fallback” scenario’s gesproken. Dit houdt in dat in plaats van een tonen van een kleurovergang bij een bepaald element er terug gevallen kan worden op een enkele achtergrondkleur. 

                        Professionele webdesigners zijn op de hoogte van welke CSS3 elementen enigszins worden ondersteund in de meest gebruikte browsers en versies en weten welke fallback scenario’s ingebouwd dienen te worden.

                      • Browser testen bij mobiele websites

                        Waar voorheen de focus voornamelijk lag in het op de juiste manier tonen van een website in een statische container (voor de verschillende versies van Internet Explorer) heeft browser compatibiliteit een extra uitdaging erbij. Het gaat hier om websites die gebruik maken van “responsive web design” en anders worden weergegeven op mobiele apparaten.

                        Elk apparaat, of het nou een iPad met als browser Safari is, of een BlackBerry met Opera Mini heeft zijn eigen operating systeem en eigen keur aan browsers. De praktijk leert dat al deze browsers op mobiele platformen weer hun eigen complexiteit introduceren, los van het feit dat een mobiele website coderen een vak apart is.

                        Ook hier geldt dat een vage opmerking als “hij moet er goed uitzien op een mobieltje” een non-opmerking is waar je een webdesigner waar hij of zij niet mee uit de voeten kunt. Een mobiele website maken is van een andere orde dan de “standaard” vaste breedte versies.