Et si on agençait des photos sur une page web mobile ?

J’ai commencé à vouloir mettre en pratique mes études sur l’agen­ce­ment de photos dans une page web et… j’ai tout repris à zéro.

Quand je donne un lien vers mes photos, il est quasi­ment toujours ouvert en premier sur mobile. Sauf à y faire des minia­tures illi­sibles, on peut y mettre une ou deux photos maxi­mum en largeur. La vue à la Flickr n’a aucun sens.

Du coup je suis reparti d’une vue mobile, avec des agen­ce­ments prédé­ter­mi­nés. J’ai en trouvé quatre, même si bien évidem­ment certains peuvent s’in­ver­ser :

Tech­nique­ment les calculs pour que les agen­ce­ments avec plusieurs images tombent « juste » sont les mêmes que dans la vue Flickr décrite au précé­dent billet.

* * *

La vraie ques­tion c’est le choix de l’agen­ce­ment en fonc­tion du format des diffé­rentes photos et de leur ordre d’ap­pa­ri­tion.

La mauvaise idée de départ c’était tenter de faire des règles complexes pour choi­sir l’agen­ce­ment en fonc­tion des prochaines images et de leur format. L’ap­proche naïve était simple mais le résul­tat assez mauvais visuel­le­ment. Il aurait fallu faire plus complexe que verti­cal / carré / hori­zon­tal mais si je commence à distin­guer sept caté­go­ries, les combi­nai­sons explosent.

Autant calcu­ler les quatre agen­ce­ments possibles et voir lequel est le plus perti­nent. J’ai pris deux axiomes :

1– L’im­por­tant visuel­le­ment c’est la surface affi­chée de chaque image plutôt que sa taille en largeur ou hauteur.  Trop gros est aussi mauvais que trop petit. Je compare donc la surface de l’image à évaluer à celle d’une image de réfé­rence (une hori­zon­tale au format 3/2 affi­chée en pleine largeur).

2– Il suffit d’une seule image illi­sible pour tout gâcher. Je calcule donc le score de chaque image indi­vi­duel­le­ment et le score d’un agen­ce­ment de plusieurs images corres­pond au plus mauvais score des images concer­nées.

Le résul­tat est plutôt réussi. J’ai tenté de bidouiller et ajou­ter d’autres règles complexes mais ça n’a pas donné des amélio­ra­tions visuelles signi­fi­ca­tives.

* * *

Je calcule la gale­rie au fur et à mesure. Parfois il me reste une image verti­cale à la fin et je n’ai plus qu’à l’af­fi­cher en grand, même si c’est déme­suré. Une solu­tion pour­rait être de calcu­ler réel­le­ment toutes les combi­nai­sons pour toute la gale­rie avant de faire mon choix. Ça risque d’être un peu lourd pour ce seul défaut, surtout pour des gale­ries assez longues, donc pour l’ins­tant je ne suis pas allé sur ce chemin.

Aujourd’­hui je garde l’ordre des photos. Je pour­rais aussi éven­tuel­le­ment iden­ti­fier les cas où tous les agen­ce­ments testés sont mauvais, et tenter de modi­fier un peu l’ordre des images avec celles juste après, pour voir si c’est mieux.

Tant que je ne repère pas de cas vrai­ment moche, je vais toute­fois rester sur du simple.

* * *

Le choix assumé c’est de faire du mobile-first. Si j’ai plus d’es­pace hori­zon­tal je peux tenter de faire deux colonnes avec ce même algo­rithme.

Si je trouve un point pivot et que je découpe la gale­rie en deux sections, je pour­rai choi­sir de les enchaî­ner verti­ca­le­ment ou hori­zon­ta­le­ment sans avoir besoin de calcu­ler quoi que ce soit en javas­cript.

Si j’ai vrai­ment une grande surface en hauteur et en largeur, un mur d’images à la Flickr est peut-être plus perti­nent mais je ne m’in­ter­dis pas de simple­ment garder deux colonnes de grande largeur. Je vais attendre de voir ce que ça donne avant de faire mon choix.