10 tips voor optimale browsersupport

Met populaire browsers als Chrome en Firefox zou je het haast vergeten, maar lange tijd was Internet Explorer voor veel consumenten de enige deur naar het internet. Browseroptimalisatie was ook aanzienlijk eenvoudiger: ondersteun Internet Explorer en je website werkt optimaal voor nagenoeg alle bezoekers. Maar tijden veranderen.

Tegenwoordig is er voor elke internetbehoefte een aparte app en hebben we niet alleen toegang tot internet op pc’s maar ook via smartphones, tablets en laptops met uiteenlopende schermgrootten, verschillende besturingssystemen en de keuze uit diverse succesvolle browsers. Dat zorgt voor nieuwe mogelijkheden voor marketeers, ontwikkelaars en webdesigners, maar zeker ook enkele valkuilen. Zo kunnen de kosten flink oplopen voor bedrijven die uitgebreide browsersupport over de gehele breedte wensen.

Om als ontwikkelaar optimaal aan de wensen van de opdrachtgever te voldoen is het belangrijk om vooraf goede afspraken te maken over welke besturingssystemen en browsers ondersteund worden.

Nieuwe technologie, nieuwe vraagstukken

Browsersupport voor alle devices, browsers en systemen is in de meeste gevallen niet rendabel, daarom is het belangrijk om keuzes te maken. Gaan we testen op de nieuwste devices van populaire merken, zoals op de iPad Mini 2 die binnenkort verschijnt? Gaan we nieuw ontwikkelde apps, websites en platformen voortaan alleen testen op iOS7 of ook nog steeds op iOS6? En testen op de Samsung Galaxy S4 is vanzelfsprekend, maar hoe gaan we om met de oudere Galaxy SII? Om nog maar te zwijgen over alle verschillende browsers die op de telefoon geïnstalleerd kunnen worden.

Hieronder tien tips voor opdrachtgevers, projectmanagers en ontwikkelaars om de juiste keuzes en afspraken te maken.

1. Vergeet marktaandeelcijfers: ga uit van je doelgroep

Op marketing- en technologieblogs verschijnen regelmatig cijfers van het marktaandeel van de belangrijkste browsers. Nog vaak worden deze cijfers als uitgangspunt genomen bij het bepalen van browsersupport. Dat is niet altijd verstandig. Allereerst zijn het vaak cijfers van gebruik wereldwijd en verschillen de cijfers per werelddeel of zelfs per land. Maar belangrijker nog: er zijn grote verschillen te zien in browsergebruik tussen verschillende soorten gebruikers.

Zo kan het aantrekkelijker zijn om je te richten op Firefox en Safari om bepaalde groepen te bereiken dan op versies van Internet Explorer, een browser die opgeteld een veel groter marktaandeel heeft. Baseer browsersupport daarom liever op statistieken van de website zelf zodat je zicht krijgt op het browsergebruik van je doelgroep. Of indien dit nog niet mogelijk is, op statistieken van websites met een soortgelijke focus.

2. Ondersteun bezoekers in plaats van browsers

Maak het ondersteunen van bepaalde browsers niet een doel op zich en verlies de eindgebruiker niet uit het oog. Het gaat er uiteindelijk om dat een zo groot mogelijk deel van je websitebezoekers baat heeft bij optimalisaties. Maak daarom vooraf goede, meetbare afspraken gericht op de ondersteuning van bezoekers. Dit kan bijvoorbeeld leiden tot de afspraak om te ontwikkelen voor de laatste versie van Chrome en Firefox en niet de voorgaande versies, omdat de ervaring leert dat ruim 90 procent van deze gebruikers hun browser al binnen één a twee maanden updatet. Blijf nadenken over welke browsersupport nodig is om een zo groot mogelijk deel van je bezoekers te ondersteunen.

3. Bepaal de mate van ondersteuning

Browsersupport is een breed begrip. Maak daarom vooraf goede afspraken over wanneer je spreekt van ondersteuning. Het functioneel werkend krijgen van een applicatie in een bepaalde browser is immers wat anders dan een precieze weergave van het design waarbij iedere pixel op de gewenste plek staat. Bovendien zijn er op dit gebied nog allerlei nuances aan te brengen, bijvoorbeeld door de mate van adoptie van HTML5- en CSS3-features als uitgangspunt te nemen.

Bespreek ook hoe uitgebreid getest moet worden. Een ervaren (front-end)ontwikkelaar kan bijvoorbeeld redelijk inschatten hoe een website in diverse browsers zal worden weergegeven en functioneren. Maar om te kunnen garanderen of die inschattingen werkelijk kloppen, is testen een vereiste.

4. Browseroptimalisatie op basis van bereik

Houd bij het bepalen van de browseroptimalisatie ook rekening met het bereik van je website. Dat een bepaalde browser door slechts één procent van je doelgroep wordt gebruikt, zegt op zichzelf weinig. Voor een website met duizend bezoekers per maand is optimalisatie van die browser waarschijnlijk niet rendabel. Voor een website met een miljoen maandelijkse bezoekers kan die ene procent van je bezoekers tot veel extra conversie leiden.

5. Test wat je belooft

Maak transparant wat je test en bepaal vooraf hoe ver je wilt gaan. Vanzelfsprekend brengt de afgesproken mate van ondersteuning de verplichting met zich mee om ook daadwerkelijk gedisciplineerd alle representatieve systemen te testen. Wanneer je belooft ondersteuning te bieden voor Internet Explorer voor pc, Safari voor de Mac of Chrome voor Android-tablets, bespreek dan ook altijd voor welke versies precies.

Testen is een tijdrovend proces dat uitgebreid moet worden besproken tussen opdrachtgever en -nemer. Voor de ontwikkelaars onder ons: vergeet niet te testen op de browser die je opdrachtgever gebruikt. Dat is minder vanzelfsprekend dan het klinkt. Het is immers goed mogelijk degene die je werk beoordeelt zelf niet tot de beoogde doelgroep behoort.

6. Bepaal de balans tussen snelheid en kwaliteit

Het ontwikkelen voor verschillende browsers kost tijd, zeker wanneer je wilt profiteren van HTML5 en CSS3. Deze technologieën worden in nieuwere versies ondersteund, maar zijn in nog geen enkele browser volledig doorgevoerd. Dat betekent dat er constant moet worden overwogen om fallbacks te ontwikkelen voor oudere browsers of juist een veilige traditionele oplossing te kiezen die direct in alle browsers zal werken.

Kies een juiste balans tussen snelheid en kwaliteit. Testen in zoveel mogelijk browsers blijft echter in alle gevallen belangrijk. Bij grote projecten kan testen echter veel tijd kosten. In dat geval kun je ervoor kiezen om alleen functionele conversiepaden met een hogere regelmaat te testen en niet bij iedere verbeterronde een volledige cross browser test te doen.

7. Optimaal testen: haal je oude computer van zolder

Als het gaat om testen: test zoveel mogelijk in native browserversies. Hier ligt een uitdaging aangezien het vaak niet mogelijk is om meerdere browserversies parallel te draaien op één systeem. Ook zijn browsers soms gekoppeld aan een besturingssysteem, waardoor een browser überhaupt niet geïnstalleerd kan worden. Met name voor de vele, nog veelgebruikte, versies van Internet Explorer kan dit een probleem zijn.

Om die reden wordt vaak de compatibiliteitsweergave van Internet Explorer gebruikt. Deze modus geeft een redelijke simulatie van oudere versies waarmee grove problemen snel opgespoord kunnen worden. Ook emulators als IETester bieden uitkomst. Toch kan de weergave, bijvoorbeeld de rendering van fonts en de gebruikerservaring in native browsers in een aantal gevallen echt anders zijn. Kies daarom indien mogelijk voor een virtuele machine of voor een oude machine om je website te testen. Een traag, ouder systeem is bovendien representatiever door de verouderde hardware waarop oudere browsers draaien.

8. Bezuinig niet op tablets en mobiele telefoons

De verleiding om te testen op emulators in plaats van mobiele devices is groot. Er zijn genoeg varianten die prima werken en bovendien lopen moderne desktopbrowsers wat betreft rendering redelijk parallel aan de browsers op mobiele telefoons. Voor de basis van je ontwerp is het gebruik van een emulator geen enkel probleem. Voor de verdere uitwerking is het echter belangrijk om met enige regelmaat op echte devices te testen.

Dit om twee belangrijke redenen: de hardwarecapaciteit wijkt teveel af en het is onmogelijk om de bediening goed te testen op een desktop. Zo is de vinger op een touchscreen veel minder nauwkeurig dan het gebruik van een muis bij een pc. Hiermee moet je rekening houden bij het bepalen van het ‘klikgebied’. Verder zijn de meeste mobiele devices hardwarematig vele malen minder krachtig, wat invloed heeft op de performance. Met name bij animaties is dit merkbaar.

Voor wie het niet rendabel is om alle representatieve mobiele devices in huis te hebben: bij Open Device Lab kunnen bedrijven kosteloos een dagje komen testen op een scala aan devices.

9. Laat je niet verrassen door trends

Zorg dat je op de hoogte bent en blijft van de ontwikkelingen van bekende en minder bekende gebruikersgroepen en bedenk wat de ontwikkelingen technisch gezien betekenen voor je werk. Volg bijvoorbeeld de release notes van Firefox en Chrome. En verdiep je in mogelijk opkomende markten of onbekende gebieden zoals Firefox OS, de Safari ‘in-app’-modus of duik in de developers preview van een nieuwe iOS. Wat betekent de opkomst van touchlaptops? Hoe eerder je erbij bent, des te sneller pas je het toe in je eigen werk en ben je concurrenten een stapje voor.

10. Dwing gebruikers om browsers te updaten

Niet ieder bedrijf komt ermee weg en het is een utopie om te denken dat gebruikers hun browser direct updaten na een nieuwe release. Maar voor wie zich richt op early adopters en beschikt over voldoende lef, kan deze aanpak werken. YouTube zette jaren geleden al de trend door als één van de eerste platformen Internet Explorer 6 niet meer te ondersteunen. Een ander voorbeeld is de notitieclouddienst Evernote met het drastische besluit om hun iPhone-app uitsluitend beschikbaar te maken voor iOS7. Waarom geld steken in fallbacks, fixes en workarounds als je je kunt richten op de verbetering van nieuwe features? Een gedurfde strategie en een sterk statement.

Duidelijkheid vooraf: een structurele aanpak

Browsersupport is de laatste jaren aanzienlijk complexer geworden. Het optimaal ondersteunen van alle browsers en devices is in de meeste gevallen niet rendabel en het is noodzakelijk om keuzes te maken. Om dit goed te doen, is het belangrijk dat ontwikkelaars, projectmanagers en opdrachtgevers op één lijn zitten. Maak daarom vooraf concrete afspraken, zodat er geen ruimte meer is voor aannames.

Een manier om dit structureel te doen is door een gestandaardiseerd document in te zetten bij ieder te ontwikkelen website, app of online platform. Nuances tussen ‘perfecte weergave en functionaliteit’ en ‘werkbaar’ in de gewenste browser hebben veel invloed op de kosten. Houd ook rekening met zaken als doorlooptijd. Bij een uitgebreide, doorlopende campagne horen andere afspraken dan bij een eenvoudige website. Een sales-applicatie die uitsluitend op een iPad hoeft te werken, kost aanzienlijk minder tijd dan een internationale consumentenwebsite of overheidswebsite die breed uitgerold moet worden.

Een gestandaardiseerd document helpt deze nuances zichtbaar te maken. Het leidt tot betere resultaten, schept de juiste verwachtingen en voorkomt frustraties achteraf.