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.

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

À propos de ce site, du contenu, de l'auteur
Je poste parfois ici des humeurs ou des pensées. Parfois je change, parfois je me trompe, parfois j'apprends, et souvent le contexte lui-même évolue avec le temps. Les contenus ne sont représentatifs que de l'instant où ils ont été écrits. J'efface peu les contenus de ce site, merci de prendre du recul quand les textes sont anciens. Merci

À toutes fins utiles, ce site est hébergé par Scaleway, ONLINE SAS, joignable par téléphone au +33 (0)1 84 13 00 00 et joignable par courrier à l'adresse BP 438 - 75366 Paris Cedex 08.