Awwwards Conference 2015: progressive enhancement van het web

‘Websites that were built 30 years ago are still viewable in your modern webbrowser. That is the truly magical thing about the Internet.’ Dat zijn de woorden van Jeremy Keith op de Awwwards Conference 2015 in Barcelona. Het is ook het thema, progressive enhancement. Een methode waarbij nieuwe technologieën worden toegepast voor moderne browsers zonder verouderde browsers te breken.

‘Hebben we het daar nu alweer over?!’ hoor ik je al zeggen. Zo zat ik ook in de zaal, maar toch kwam ik daar snel van terug. Het web is namelijk heel ver gekomen en maakt elk jaar grote stappen. Alleen vergeten we snel wat het web zo uniek maakt. Het feit dat dit het enige medium is waarin alles wat erop wordt uitgegeven praktisch voor altijd kan worden geconsumeerd.

Webstandaarden

Wat we snel vergeten, is hoe zwaar er is gevochten om het internet zo te krijgen. Toen webstandaarden werden geïntroduceerd door Tim Berners-Lee begin jaren negentig, kreeg het eigenlijk geen erkenning. Totdat in 2000 het Web Standards Project (WaSP) bouwer Netscape kon overtuigen hun nieuwe browser uit te stellen tot zij webstandaarden beter ondersteunden. Daar kwam uiteindelijk Firefox uit voort. Toch duurde het vrij lang tot webstandaarden over het web werden ondersteund. In 2008 werden er nog steeds websites gemaakt die zich niet aan deze standaarden hielden.

Velen dachten ook niet dat het ooit zou gebeuren. Maar ruim 20 jaar later zijn we er. HTML5 en CSS3 zijn een feit en worden ondersteund door alle grote browsers. De standaarden worden beschermt door de W3C en in samenwerking met de browsermakers langzaam maar geleidelijk doorontwikkeld, onder de voorwaarde dat het oude web niet breekt.

Sourceset

Een goed voorbeeld hiervan is de uitleg van het ‘srcset’-attribuut (uitspraak: sourceset) door Bruce Lawson. Het biedt een oplossing voor responsive images. Browsers weten nu welke afbeeldingen zij het beste kunnen downloaden voor het gebruikte beeldscherm (retina of non-retina, of grootte van je beeldscherm). Het responsive web is als concept minimaal vier jaar oud en retinaschermen inmiddels vijf jaar, dus het werd tijd dat deze mogelijkheden worden geboden.

Hoe het srcet-attribuut werkt, is dat de browser een lijst van suggesties krijgt met daarin bestanden die beschikbaar zijn. Het is dat aan de browser om een keuze te maken welke zij het beste kunnen gebruiken.

In het bovenstaande geven we dus aan; gebruik bij een scherm van 1.5 pixelresolutie mooi-plaatje-hoge-resolutie.jpg en bij dubbele resolutie mooi-plaatje-hogere-resolutie.jpg. Maar, het belangrijkste, mochten beide keuzes niet voorhanden zijn of de browser weet niet wat ‘srcset’ betekent, gebruik dan gewoon ‘src’.

Dit kan nog verder getrokken worden om verschillende plaatjes in te laden voor verschillende schermgrootten door een ‘w’ te gebruiken in plaats van een ‘x’. Bijvoorbeeld: ‘breder-plaatje-1200.jpg 1200w’ zou inladen op schermen die 1200px breed zijn. Om het dan nog mooier te maken, kan men ook nog gebruik maken van de ‘picture’-tag om geheel andere bronbestanden op te geven.

Het wordt al heel snel ingewikkeld, maar wat we hier heel duidelijk zien is dat deze opzet van ‘srcset’ ruimte laat voor oudere browsers om alsnog iets te doen met het plaatje, ze kunnen altijd terugvallen op wat er in het ‘src’-attribuut staat. Niks breekt en toekomstige browsers kunnen gebruik maken van deze snellere manier van afbeeldingen inladen.

Het web is een continuum

Jeremy Keith legt uit waarom dit het web zo uniek maakt. Maak je namelijk een website in Flash en je hebt een Flash-plugin dan krijg je precies zien van wat iemand heeft gemaakt. Heb je de plugin niet, dan zie je niets. Simpel. Net als dat je een iOS app maakt en je hebt een iPhone dan krijg je 100 procent van die app te zien, maar op Android 0 procent. Op het web werkt dit niet zo. Op het web krijg je bijna nooit 100 procent te zien van wat iemand heeft gemaakt, maar je krijgt ook nooit 0 procent. Het zit er altijd tussenin en het doel is dicht bij de 100 procent te komen.

Er is ook een heel handige website voor mensen die wel vinden dat elke website 100 procent eruit moeten zien in alle browsers. Het antwoord luidt keihard ‘No!’. Daar staat echter wel tegenover dat elke browser iets van de website moet kunnen tonen. Aan de hand van het ‘srcset’-attribuut zien we hoe hard nagedacht wordt om dit mogelijk te maken.

‘Het web, in de woorden van Keith, is in die zin meer een continuum waar constant nieuwe technologische oplossingen worden ontsloten zonder specifieke startdatum, maar nog belangrijker, zonder einddatum.

Tussen de 0 en 100 procent

Vanuit zo’n invalshoek worden websites die gebouwd zijn met frameworks zoals AngularJS of EmberJS problematisch. Dit zijn namelijk Javascript-frameworks die heel sterk de neiging hebben om het web te breken. Gebruik je namelijk geen moderne browser of is je verbinding te traag om het script in te laden, krijg je al snel een geheel witte pagina te zien. In dat geval krijg je namelijk 0 procent van de ervaring. Dit terwijl het web juist alle mogelijkheden biedt om dat te voorkomen.

Natuurlijk kan dit een bewuste keuze zijn, maar in veel gevallen vraag ik me af of het wel een bewuste keuze was. Vaak zie ik dat het dingen gemakkelijker maakt voor de ontwikkelaar of ontwerper, maar de gebruiker valt al snel in deze overweging af. We moeten daar goed op letten.

Het web is gebouwd om mee te kunnen gaan met de tijd. Het biedt tools om gegradeerd nieuwe technologieën toe te passen, maar eveneens andere gebruikers nog steeds een ervaring te bieden. Misschien niet 100 procent, maar ook zeker niet 0 procent. Als we dan ook één ding meekregen op de Awwwards Conference is dat wij, als webgemeenschap, de tools die we tot onze beschikken hebben zo goed mogelijk moeten gebruiken. Vooral niet loslaten wat het web wel en wat het niet is. Bij het web zit het namelijk altijd tussen de 0 en 100 procent. Juist dat maakt het web zo magisch.