Pleidooi voor digitale discriminatie

We hebben er allemaal wel eens mee te maken gehad. Browserstatistieken, oudere sites die uit elkaar vallen in Internet Explorer 8, rekening houden met Safari, Chrome en Opera, uren verbranden voor die ene browser waarin de zoekfunctie niet goed werkt. Hoeveel tijd mag dit eigenlijk kosten? En is het wel echt zo belangrijk?

In mijn dagelijkse beslommeringen als ontwikkelaar bij Tam Tam heb ik met vele doelgroepen en diverse browsers te maken. In ieder project dat ik ontwikkel spendeer ik enige tijd aan het conformeren van de website voor de verschillende browsers. Klanten willen tenslotte gelijkheid blijheid voor iedereen, dus dat is wat een goede front-end developer zichzelf dan ook als hoogste doel stelt. Alleen, browsers zijn nooit hetzelfde geweest. Iedere versie van Internet Explorer was compleet anders, ook nu nog. Firefox 3.5 is veel krachtiger dan Firefox 2. Dus als iedere browser iets anders rendert, waarom dan zoveel moeite doen om het terug te brengen tot een uniform ontwerp?

Een voorbeeldje; een klant bezoekt je website. Op een PC. Met Vista. In Internet Explorer 8. Hoe groot acht je de kans dat deze klant je website bekijkt in deze browser, en dan denkt; “Goh, hoe zou deze website er eigenlijk uitzien in Firefox 3.5?”. Precies, dat komt zelden voor. In de praktijk heeft de gemiddelde gebruiker hooguit 2 browsers op zijn of haar computer geïnstalleerd. Veelal is dit een versie van Internet Explorer in combinatie met een alternatief zoals Firefox of Chrome (die van de abri-reclames, u weet wel). Daarnaast zijn ook Safari (met name op de Mac) en Opera redelijk populair, maar onder een vrij beperkte groep mensen. Microsoft’s Internet Explorer is sinds de browser wars met Netscape nog altijd de populairste browser; zoals onderstaande grafiek aangeeft had Internet Explorer een marktaandeel van iets meer dan 60% in Nederland gedurende de afgelopen maand.

Helaas is het zo dat Internet Explorer het minst slimme jongetje van de klas is. Andere browsers, en dan met name Safari en Chrome zijn wat intelligenter, de strebertjes. Zij kunnen het beste overweg met de suggesties die worden gedaan vanuit de diverse stuurgroepen. Laten we dat even onder de loep nemen.

De droom van iedere developer

De huidige ‘standaard’ (afschuwelijk woord) dateert uit 2002, en luistert naar de naam XHTML 1.0, verkrijgbaar in de smaken Strict (streng naar opbouw van code en de beste ondersteuning van standaarden) en Transitional (de Light-versie). Er is de afgelopen tijd gewerkt aan een opvolger (2.0), maar de ontwikkelingen zijn stilgelegd wegens de opkomst van een nieuwe variant die vooralsnog vooral niet als standaard wil worden gezien, maar in ieder geval veelbelovend is, en door de community maar al te graag als standaard wordt aangenomen. Beste lezer, ik stel je met plezier voor aan HTML5 en CSS3, het perfecte echtpaar met de gouden toekomst.

Sinds de intrede van het buzzword web 2.0 zijn ronde hoekjes helemaal hip. Of bijna passé, maar dat terzijde. Enfin, ronde hoekjes zijn jarenlang de nachtmerrie van front-end developers geweest. Omdat je flexibele hoogte en breedte wilt kunnen geven aan de ‘blokken’ van de website waren vaak minstens 3 en soms zelfs 9 losse vlakken nodig om de opmaak goed te realiseren. Over het gebruik in combinatie met tintverlopen en schaduwen kunnen we beter maar zwijgen. Natuurlijk zijn er diverse JavaScript-oplossingen geschreven door de jaren, maar dat werkt in veel gevallen vertragend, onbetrouwbaar, en bovendien ontoegankelijk.

CSS3 maakt dit allemaal overbodig. Je geeft het element een border-radius van bijvoorbeeld 5 pixels, et voila, het element heeft ronde hoeken. Met box-shadow geef je het blok een mooie schaduw in iedere willekeurige kleur en omvang, en je hebt zo ongeveer een half uur tot een uur tijd bespaard. Per blokje. En niet te vergeten; de pagina laadt sneller, werkt ook zonder Javascript, en schaalt netjes mee met tekstgrootte-instellingen. Geweldig toch? En het werkt in bijna alle browsers! “Sorry? Bíjna? Hoe bedoel je bíjna?”

Helaas is Internet Explorer grote spelbreker in deze kwestie waarbij er geen enkele ondersteuning is – behalve IE9, maar deze verschijnt pas op z’n vroegst 3e kwartaal 2010. Laat ik overigens vooral ook benadrukken dat de andere browsers óók verschillende interpretaties kennen van sommige declaraties, hoewel in bovenstaand voorbeeld de belangrijkste browsers naast Internet Explorer allen goed omgaan met de border-radius en box-shadow. Een cross-browser oplossing is er dus niet behalve door gebruik te maken van afbeeldingen, maar dat kost bijzonder veel meer tijd. Gelukkig zijn dit soort browserverschillen ook verwaarloosbaar; de content is immers gelijk en nog steeds goed bereikbaar in alle browsers. Gelijkheid blijheid op datgene dat er echt toe doet. Browsercompatibiliteit betekent immers niet automatisch identiek.

Progressive Enhancement

De titel van dit artikel staat haaks op mijn politieke voorkeur; ik zou een pruik moeten dragen om een dergelijk statement zonder enige vorm van schaamte over de bühne te kunnen brengen. Wanneer we het echter projecteren op ons eigen vak, sta ik wel degelijk achter dit statement. We hebben jarenlang het verkeerde ideaal nagestreefd, en daarmee de mogelijkheden niet altijd volledig benut.
We moeten net als in het dagelijks leven uitgaan van de kracht van het individu, of in dit geval de individuele browser. Ontwikkel de websites in basis voor de meest uitgeklede browser: Internet Explorer 6/7/8. Maak daarnaast gebruik van de krachten van Firefox, Safari, Chrome en Opera om te zorgen dat iedere gebruiker in zijn of haar browser de optimale beleving heeft van jouw website. Het feit dat alleen Safari en Chrome op dit moment het gebruik van CSS3 animaties ondersteunen betekent niet dat deze fantastische mogelijkheden dan maar achterwege moeten worden gelaten. Integendeel; werk naar de toekomst toe!

Deze manier van werken heet in de developers community progressive enhancement, maar beter nog is de term progressive enrichment zoals Dan Cederholm het noemt. Deze werkwijze houdt in dat je de website bouwt met de minimale eisen als fundament. Iedere laag die je daarna aanbrengt is voor de eindgebruiker en gaat daarbij uit van de functionaliteiten zoals de browser die ondersteunt. Daarbij kun je naast de genoemde browser ook denken aan mobiele browsers op de iPhone, iPad en Android- en Symbian-telefoons.

Even teruggrijpen op de eerdere afbeeldingen. Dat houdt dus in dat in IE6, IE7 en IE8 de gebruiker geen ronde hoeken ziet, afbeeldingen niet ziet vervagen als de muis de foto weer verlaat, geen animaties meer ervaart maar louter de statische afbeeldingen. Is dat erg? Nee, ik denk het niet, omdat de gebruiker immers geen referentiekader heeft waarin dat ooit wel zo was. De gebruiker kan overal bij, alle content is beschikbaar en omdat het geen afhankelijkheid van Javascript kent is het ook volledig toegankelijk voor tekstbrowsers, zoekmachines of welke andere doelgroep dan ook. En daarnaast heeft 40% van je gebruikers wel die rijke ervaring! Bovendien zal dat getal alleen maar groeien de komende tijd. IE9, de veelbelovende browser van Microsoft, ondersteunt namelijk wel een groot deel van deze experience enriching elementen, en komt naar verwachting eind 2010 uit. Natuurlijk zullen we nog af en toe IE6 t/m 8 tegenkomen in onze statistieken, maar dat zal hoe dan ook een uitstervend ras blijken.

“Oke, leuk, maar wat nu?”

Stop met het remmen van innovatie in webapplicaties, ook aan de esthetische kant. Ontwikkel niet wederom een ‘gemiddelde’ website. Geef niet toe aan de gebreken of beperkingen van browsers. Laat het begrip ‘browsercompatibiliteit’ los en benut de kansen die er zijn voor de verschillende browsers en zorg voor de optimale gebruikerservaring die past bij de individuele eindgebruiker, in plaats van bij de oudste browser of die vastgeroeste developer. Waarom?

• Meer value for money: Minder tijd kwijt aan corrigeren en dus meer tijd voor de optimale interface.
• Flexibiliteit is belangrijker dan compatibiliteit: Eén site die je kunt gebruiken op alle platformen inclusief de mobiele platformen en touch-interfaces; dat scheelt een hoop losse investeringen!
• Met de stroom mee, in plaats van er tegenin: Zoals gezegd, browsers zijn verschillend, dus waarom zou je enorm veel tijd verliezen aan het corrigeren van deze verschillen in plaats van ze optimaal te benutten?

Deze ideeën zijn niet nieuw. Deze blogpost is een combinatie van de visies van grootheden als Andy Clarke, Jeremy Keith, Eric Meyer, en vele anderen – vrij vertaald door mijzelf, in combinatie met de ervaringen uit mijn dagelijks werk. En oké, vooruit; een stukje optimisme voor de toekomst.