Scroll infini et au-delà … !

Buzz Lightyear running

Le multipage a toujours été un véritable casse-tête pour tout développeur se respectant un tant soit peu. Heureusement pour nous, il existe une solution alternative (avec un peu de javascript saupoudré de génie) : le scroll infini.

Mais le scroll infini, c’est quoi au juste ?

Le scroll infini est le chargement en bas de la même page (qui n’est pas rechargée donc) de nouveaux articles (ou éléments), de sorte que l’on obtienne une consultation fluide et sans interruption.

Cela devient pratique dés lors que l’utilisateur évite un certain nombre de clics à l’instar d’une pagination standard.

Avant il y avait le multipage … mais ça c’était avant...

La pagination standard consiste en la segmentation d’un contenu (ou rubrique) en plusieurs pages.

Le problème avec ce type de pagination est que l’on multiplie le nombre de clics, ce qui ne va pas rendre la navigation très fluide et naturelle.

On risque aussi de se confronter à un autre souci : le référencement.

Des optimisations SEO (Search Engine Optimization) permettent de contourner le problème en déclarant dans le header les deux techniques suivantes :

Le scroll infini en démonstration

De nombreuses démonstrations de scroll infini sont visibles en ligne :

Google images
https://www.google.fr/search?q=zinedine+zidane&source=lnms&tbm=isch

#Silverstone50
http://50.silverstone.co.uk/

Pinterest
http://www.pinterest.com/all/

Tumblr
http://www.tumblr.com/search/chenille

Le scroll infini dans la pratique

Sachez qu’il y a de nombreuses façons d’implémenter un scroll infini (jQuery, WordPress, Drupal …) mais l’architecture principale repose sur des technologies AJAX javascript.

jScroll
http://jscroll.com/

Infinite AJAX Scroll
http://infiniteajaxscroll.com/ (licence complète jusqu’à 29$)

Infinite-Scroll (plugin WordPress)
https://wordpress.org/plugins/infinite-scroll/

Views Infinite Scroll (plugin Drupal)
https://drupal.org/project/views_infinite_scroll

Conclusion & recommandations

Le principal intérêt du multipage standard réside dans les petites listes finies et dans le fait que l’on sache par avance sur quelle page se trouve mon contenu ou mon article.

Le scroll infini sollicite la même charge au niveau du serveur qu’une pagination classique.

Mes principales recommandations concernent principalement le footer (si vous en avez un) qui doit être de préférence toujours visible à l’écran.
Un bouton de chargement manuel de contenu à l’instar d’un Google image et un autre de retour en haut de page sont les bienvenus.
Enfin sachez que les applications tactiles (mobiles et tablettes) se marient particulièrement bien avec ce type de scroll.

En guise de conclusion, je vous recommande de prendre le temps de concevoir votre application et regarder s’il y a un réel avantage à passer d’un multipage standard à un scroll infini … et au-delà !