Oneindig scrollen via progressive enhancement

Wie regelmatig websites oplevert die moeten voldoen aan de overheidsrichtlijnen voor websites (de webrichtlijnen), zal weten dat het voldoen aan die richtlijnen eigenlijk helemaal niet zo moeilijk is als sommige mensen willen doen geloven. Een van de meest gehoorde fabels in deze context is "Die mooie feature gebruiken kan niet, want het gebruik van Javascript* is tegen de webrichtlijnen.". Waarbij je Javascript kunt vervangen kan worden door een hoop andere technieken (Flash, Silverlight, etc).

In principe mag er gebruik gemaakt worden van alle mogelijke technieken, zolang er maar alternatieven zijn voor gebruikers die niet over de gebruikte techniek kunnen (of willen) beschikken. Dit wordt in de webrichtlijnen gelaagd bouwen genoemd. Tot een aantal jaren geleden was graceful degradation de meest gebruikte manier om die gelaagdheid op te bouwen: je bouwt een site met alle toeters en bellen, en zorgt voor een bruikbaar alternatief voor als gebruikers de site niet kunnen zien zoals deze bedoeld is.

De trend van de laatste jaren is progressive enhancement, waarbij dit proces eigenlijk wordt omgedraaid. Je begint met een basis-versie die voor iedereen goed werkt, en voegt hier zodanig andere technieken aan toe, dat ze de basisfunctionaliteit verrijken voor iedereen met een browser die dat ondersteunt. Vaak gaat dit hand in hand met het gebruik van de techniek unobtrusive Javascript .

jQuery plugin jquery.endless-pager.jsCollega Gerard schreef gisteren op zijn eigen weblog een stukje over een toepassing van progressive enhancement: Endless scrolling based on a simple HTML pager. Het concept van oneindig scrollen is de laatste jaren een stuk bekender geworden, met name omdat Facebook en Hyves dit in een aantal belangrijke pagina's hebben ingebouwd. Het idee is dat als je door een webpagina scrollt, er automatisch content wordt ingevoegd als je bijna onderaan de pagina bent. Gerard laat in zijn artikel zien dat een basisfunctionaliteit (doorklikken naar andere pagina's met content) heel eenvoudig te enhancen is met behulp van Javascript, waarmee die basisfunctionaliteit wordt overschreven en verrijkt.

Bekijk hier het artikel, het voorbeeld en de broncode van de jQuery plugin.

09-02-11 Gepost door: Jelle-Jan van Veelen Comments (3) Categorie: technologie

Reacties

Willem - 2011-02-09 13:12

Twitter.com gebruikt ook een oneindig scrollingtechniek die behoorlijk slecht is uitgevoerd. Op het moment dat er content wordt geladen onderaan de pagina verspringt het scherm naar een onlogische positie waardoor de focus compleet zoek is. Het voorbeeld van Gerard doet dat wel goed.

JJ - 2011-02-09 13:18

Ik ben zelf overigens ook geen fan van endless scrolling, maar dat komt omdat ik een Wacom gebruik. Ik scroll dus door daadwerkelijk de scrollbar te verslepen, in plaats van een scrollwheel te gebruiken. In die situatie is het voornamelijk erg irritant dat de positie van het sleep-blok op de scrollbar steeds verspringt.

Hyves doet het overigens ook niet heel handig: zij hebben een footer met een hoop linkjes onderaan hun endless scrolling page. Het aanklikken van iets in die footer wordt op die manier onmogelijk :P

Gerard - 2011-02-09 14:20

Ik ben er ook geen fan van, maar ik vond het wel een mooie case voor progressive enhancement, daar was het me vooral om te doen.

De implementatie kan natuurlijk ook heel eenvoudig aangepast worden om de volgende pagina onclick of op basis van een ander event in te laden.

Add Comment


E-Mail addresses will not be displayed and will only be used for E-Mail notifications.

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA