Avec la généralisation des tablettes, iPad en tête, la question du mode de navigation dans les sites web demande à être repensée. En particulier dans les photoblogs et galeries photo. On prend vite l’habitude de naviguer d’un balayage de l’index d’une image à l’autre ; le clic pour changer de page et l’utilisation des ascenseurs dans les navigateurs traditionnels prennent soudainement un coup de vieux. Apple, aux premières loges pour observer ces changements d’habitudes ergonomiques, annonce l’arrivée prochaine de son nouveau système d’exploitation Lion qui proposera les gestes multi-touch et les apps plein écran. Il est temps de réfléchir à la forme que devront prendre photoblogs, galeries et portfolios en ligne dans un futur très proche.

The big picture sur mon mac : le site porte bien son nom…
la première photo ne s’affiche pas en entier avec le logo du site et le texte d’intro…

Ajoutons la capacité accrue des tuyaux du web qui rend possible le téléchargement rapide de pages plus lourdes, permettant des photos en plus grande résolution et en plus grand nombre. Jugez-en avec le site pionnier en matière de reportages photo The Big Picture de boston.com : ce reportage sur les incendies dans l’Arizona propose 35 photos de 990 pixels de large sur la même page. La photo la plus lourde pèse plus de 700 Ko (à titre de comparaison, je recommande 100Ko en taille maxi pour les photos publiées dans lavieengris.com), et la page plus de 18 Mo ! Même si je suis convaincu que les fichiers pourraient être optimisés sans perdre en qualité, c’est du lourd, mais ça passe. On peut passer à l’image suivante en appuyant sur la touche j (k pour la précédente) afin de contourner le scrolling ascensionnel. Si on consulte le site sur iPhone ou iPad, les images se redimensionnent, mais l’expérience est plus concluante quand il est consulté via l’app Big Picture dédiée (le confort de consultation vaut les 2,39 €).

The big picture sur iPad : la légende disparait si on met le doigt sur la photo

Mais tout le monde ne peut pas s’offrir le développement d’une app perso (même s’il existe des solutions comme iSites) et la visualisation sur mobiles et tablettes de photoblogs et galeries photo est souvent difficile, voire impossible quand elles sont en Flash. Ajoutons que si une app peut correspondre au besoin de visites régulières, elle n’est pas adaptée à un visiteur occasionnel, qui vient par exemple d’un lien sur un autre site. De plus, cela impose de maintenir en parallèle un site web classique et une app (ou plusieurs, si on prend en compte toutes les plateformes non Apple).

Up on a Hill sur iPad

Arrivent à la rescousse les nouvelles générations de langages web : hmtl 5, CSS, javascript, dont la combinaison devrait faciliter le développement de sites web multi-plateformes. Une des stars de la programmation web, Joe Hewitt, qui a quitté Facebook au printemps après avoir entre autres développé son application pour iPhone, s’est attelé à la tâche avec sont projet open source Scrollability. Il explique que la plupart des sites sur mobiles utilisent toujours les boutons sur lesquels il faut cliquer / taper alors qu’il serait plus approprié de faire défiler avec le doigt, ce que Hewitt nomme Inertial scrolling. En particulier dans les galeries photos où l’on peut combiner navigation horizontale (dans une série) et verticale (pour passer à la série suivante). Son code est encore expérimental, mais on peut le voir à l’Å“uvre dans son photoblog Up on a Hill. Celui-ci, à partir d’un même contenu et d’une même source, prend des formes différentes selon qu’il est visionné sur poste fixe, mobile ou iPad.

La légende apparaît sur la première photo, défile doucement avec le doigt, ou disparait si le mouvement est plus brusque. Un coup d’index horizontal pour passer aux photo suivantes.

L’expérience est concluante sur iPad, même s’il reste pas mal de points à régler, du côté technique mais je trouve aussi du côté esthétique. Le point qui me chiffonne en particulier est de ne voir la photo dans son intégralité que dans son orientation native : iPad tenu verticalement pour une photo à la française — »portrait », comme on dit en anglais—, horizontalement pour les photos à l’italienne —paysage—, et je suppose aucun des deux pour les formats carrés. D’un autre côté, on est vraiment immergé dans la photo, et les textes défilants sont assez élégants.

A visiter donc si vous croisez un iPad, et à méditer pour la prochaine version de votre site. Ce n’est pas encore mûr, mais au train où va le web…

Et vous, comment voyez-vous votre site photo idéal ?

Cette initiative a été repérée sur Techcrunch