Ook al heb je nog zo lang nagedacht over het grafische ontwerp en de plaatsing van de content op je website: als je niet test, kan er van alles mis gaan.
Daar ben ik zojuist zelf ook weer achter gekomen.
Ik heb een website die alweer bijna een half jaar live staat. Voor het publiceren nog even gecontroleerd hoe hij eruit zag op Internet Explorer 7 en 8, Google Chrome en Firefox. Deze week zag ik de site tot twee keer toe op een manier zoals ik het niet bedoelde. In beide gevallen met browsers die ik niet had getest. In één geval was het menu opeens een stuk naar beneden verplaatst: de witte letters van het hoofdmenu vielen precies in een wit vlak.
Oeps.
In deze post bespreek ik twee gratis tools waarmee je de twee grootste veroorzakers van representatieproblemen met je site boven water kunt halen.
Browserverschillen: Spoon Browser Sandbox
Eén van de grootste veroorzakers van onjuist weergegeven webpagina’s zijn browserverschillen. Een site kan er op bepaalde punten anders uitzien in Firefox dan in Google Chrome. Zelfs tussen opvolgende versies van dezelfde browsers kunnen grote verschillen zitten.
De website die ik zelf niet (voldoende) getest had is Siteproof.nl. Wanneer je die site met de Chrome browser van Google bekijkt, ziet hij er als volgt uit:
In het geval van Chrome heeft het weinig zin om over versies te praten, de browser updatet zichzelf automatisch, zodat in principe iedereen met dezelfde versie werkt.
Dit is de website zoals ik die bedoelde. Ook in Internet Explorer 7 en 8, Firefox (alle versies), Opera en Safari versie 4 en 5 ziet de site er zo uit.
In Internet Explorer 6 daarentegen, is om één of andere reden het hoofdmenu iets naar beneden geplaatst:
In Safari 3 is het probleem nog groter. Doordat het menu nog iets verder naar beneden gezakt is, is een deel van de links niet meer leesbaar. De witte letters van het menu vallen weg in de lichte achtergrond:
Al met al valt de schade in dit geval nogal mee. Volgens StatOWL gebruikt nog maar één op de 400 Safari 3. Internet Explorer 6 is (nog) iets populairder, met een kleine 7% van de gebruikers. Bij IE6 is het probleem met de site slechts cosmetisch. Toch zijn er vast ergere gevallen van browserverschillen. Als iemand een goed voorbeeld heeft, hoor ik dat graag.
Spoon Browser Sandbox
Je hoeft niet elke browser te installeren om ervoor te kunnen testen. Het draaien van verschillende versies van één browser op één computer is zelfs (bijna) onmogelijk. Wat je nodig hebt is een emulatietool. Er zijn veel browser emulatietools te vinden, de meeste betaald en de gratis varianten zijn vaak tergend traag of onbetrouwbaar. Er is één uitzondering, bij mijn weten. Spoon.
Via Spoon.net kan je met één klik de browserversie van je keuze openen, om daarin naar de pagina te surfen die je wilt testen. Je moet even een plug-in installeren (die door Symantec als veilig wordt aangemerkt) en kan dan elke browser testen die je wilt.
Klik op de groene startknop en je kunt van start. In een nieuw scherm wordt de geëmuleerde browser geopend, waar je in de adresbalk de website kan kiezen. Op dit moment levert Spoon emulatie voor 18 verschillende browsers en (Beta)versies. Tussen haakjes het percentage gebruikers met die versie in augustus 2010.
Resolutieverschillen: Screen-Resolution.com
Niet alleen de browser bepaalt hoe een website eruit ziet: de schermresolutie heeft even zoveel invloed. Een website ziet er op een scherm met een hoge resolutie vaak heel anders uit dan op een scherm met een lage resolutie. Afhankelijk van hoe de sitebouwer de website heeft gebouwd kan dit voor flinke verrassingen zorgen.
Belangrijke informatie die de ontwerper bewust ‘boven de vouw’ heeft geplaatst, kan zo opeens niet direct zichtbaar zijn. Een tekst kan over hele lange, moeilijk te lezen regels verdeeld zijn. Of de gebruiker moet horizontaal scrollen, of zelfs moeite hebben om de kleine lettertjes te lezen. Wil je het zeker weten? Dan moet je weer testen.
Het is bijna onmogelijk om een website voor elke mogelijke resolutie te optimaliseren. Daarom is het handig vooraf onderzoek te doen naar de meest gebruikte schermresoluties. Voor computerschermen (bij mobiel gebruik ligt dit natuurlijk weer anders) zijn de volgende resoluties per januari 2010 het populairst:
De overige percentages zijn alle kleiner dan 1%. Opvallend is dat in 2003 bijna de helft de schermen nog op 800×600 stonden, waar dit nu nog maar 1% is. 2 Jaar geleden had de helft van de gebruikers nog een 1024×768 schermresolutie. Onderzoek dus vooraf altijd even de laatste statistieken (bron: w3schools)
Screen resolution
Op Screen-Resolution.com kan je heel eenvoudig je website controleren op een aantal veelgebruikte schermresoluties. Tenminste, als je Internet Explorer, Firefox, Opera of Safari gebruikt. Chrome gebruikers kunnen een Chrome extension installeren in hun browser, die ongeveer hetzelfde doet. De resoluties die je kunt testen op Screen-Resolution.com zijn:
Daarmee kun je de meest gebruikte resoluties (bij benadering) testen. Let er wel op dat een resolutie van bijvoorbeeld 1024×768 op een 22”scherm er weer heel anders uitziet dan op een 15” scherm. Dat komt door het formaat van de pixels. Er gaat dus niets boven testen op fysiek verschillende schermen.
Patrick Bakker is tekstschrijver voor Staaltaal en website analist voor Siteproof. Siteproof controleert en test websites op effectiviteit.
{ 4 comments… read them below or add one }
Geweldig artikel, Patrick. Zat ik al steeds moeilijk te doen met 2 computers en diverse browsers. Dat kan nu een stuk simpeler.
Dank jewel.
Precies wat ik eerst deed. Nog mooier zou het zijn als alle browsers een website op dezelfde manier zouden presenteren natuurlijk. Eens…misschien.
Jammer, ik kreeg deze melding:
‘Sorry, Spoon isn’t available on Macs yet!’
Jammer, de tool Spoon heeft de browser Internet Explorer uit het rijtje gehaald. En juist bij IE gaat het vaak mis….
Heb je nog een tip voor een tool waarmee IE wel te testen ?
{ 1 trackback }