• Je crois que, tant que je n’ai pas amélioré le code, il faut recommander de visiter ce site avec Chrome, qui offre l’expérience la plus fluide, et déconseiller Firefox, qui n’a pas l’air de pré charger les images.

      Sinon, réduire la taille de la fenêtre réduira les images. Et essayer sur smartphone, qui est le support qu’on a ciblé en priorité (ça n’empêche pas que j’essaie d’optimiser, mais d’ici là...)

    • Je viens de faire beaucoup de modifications sur les scripts, qui devraient corriger pas mal de choses (il y avait une boucle infernale, les images n’étaient pas correctement préchargées dans Firefox…).

      Les copains vous pouvez ré-essayer avec différents brouteurs (notamment Firefox, qui avait l’air d’être le plus pénible) ?

    • @arno firefox sur PC pas tout récent, débit correct sans plus, ça fonctionne très bien. Bravo !

      Et sinon c’est toujours aussi bien. Eventuellement, je me demande si de temps en temps les changements d’images, ajout, passage à une autre vue deux secondes plus tard, un voiture passe, ne pourraient pas être un poil plus lente et que pour les changements de points de vue, travelling, panorama ou mise au point, on ne puisse pas repasser vers l’état initial comme sur deux images en rollover.

      Sinon c’est toujours aussi bien. Merci.

    • je t’ai envoyé hier un mail avec des suggestions pour recompresser tes images, je ne sais pas si tu l’as reçu ?

    • @fil : oui, c’est au sujet de la compression des images. C’est un aspect que je vais regarder, mais je me doutais qu’il y avait des problèmes de script avant tout (c’était mon urgence).

      Pour les images, ce n’est pas du tout évident, parce que tout ça passe par mon script image_responsive, puisque la BD balance des images à la bonne taille de l’écran du visiteur. Et ça va pas être super-fastoche puisque ça touchera tout le site.

    • @arno Oui, j’ai bien compris que l’on se trouvait dans un mode de lecture expérimental pour lequel on manque de références, de points de comparaison, en revanche je me demande si la persistance rétinienne est un truc qui fonctionne avec deux images seulement (j’aurais plutôt tendance à répondre non, mais sans certitude) et d’autre part, je suggère, sans insister, que les mouvements de souris et autres actions du lecteur puissent avoir leur influence sur la lecture, pas forcément pour ce projet mais pour le suivant.

      Et par ailleurs, bien que tu n’y sois pour rien, oui, c’est très bien. Et j’ai hâte de lire la suite.

    • Aaah ouiii !!! Ça tourne sous firefox (dernier en date) sous osx et sur mobile (firefox aussi) c’est fluide en portrait (mais petit), en mode paysage ça saccade encore un peu, mais là c’est une question de puissance du téléphone à gérer les fondus (grrr).

      Remarque aux auteurs, j’ai de la peine avec les animations qui arrivent après une seconde d’attente (comme les bulles de dialogue). J’ai tendance à attendre un mouvement, un effet, mais pas assez longtemps et je clic sur suivant au moment ou ça se met à jouer. C’est assez frustrant. Contrairement à ce qu’on pense ce « langage » bd a déjà des années d’expérimentations dans les dents et on a pu dégager quelques bonnes pratiques. Perso je préfère (mais vous faites comme vous voulez hein), les anims qui démarrent au clic de souris, sans attente. Pour les effets de bulles qui viennent dans un deuxième temps et les effets d’attente en général, on laisse le lecteur provoquer l’apparition avec le bouton suivant, tout simplement. Le lecteur donne le rythme à la lecture, comme en bd classique finalement il décide quand il change de case :)

      Et bravo pour tout le boulot ! J’en veux encore !!


  • J’ai fait avec Mosquito le site d’Avec-Vous Design (avec qui on travaille régulièrement sur les installations d’écrans interactifs) :
    http://www.avecvousdesign.com/spip
    http://www.avecvousdesign.com/spip/S-21-Fontainebleau

    C’est #SPIP #HTML5 #responsive évidemment.

    À noter :

    – le menu de navigation déclenché par un menu hamburger (en haut à gauche), qu’on privilégie désormais (malheureusement encore beaucoup de clients n’en veulent pas en grand écran) ; ici particularité : le logo de la boîte qui slide vers le haut du menu de navigation en changeant de largeur ;

    – dans le slider de page d’accueil (oui, je sais…), le petites transitions CSS qui provoquent l’apparition du texte, c’est assez mignon comme trouvaille,

    – pas mal de boulot sur les pages du « portfolio » :
    http://www.avecvousdesign.com/spip/TMT-Francois-Xavier
    l’image en plein écran en haut de page évidemment, mais surtout les deux colonnes qui scrollent de manière différenciée (à gauche le texte, à droite les images), de façon à démarrer et terminer en même temps le scroll (généralement : la colonne d’image scrolle moins vite que la colonne de texte). Pas évident à régler… (sur petit écran, présentation différente avec un pavé d’images en bas de page).

    – la présentation des rubriques de portfolio (les carrés qui s’animent, la sélection de sous-rubriques dans la même page…) :
    http://www.avecvousdesign.com/spip/Portfolio

    – sur la page « Actualités », en mode #longform :
    http://www.avecvousdesign.com/spip/Actualites
    La présentation de plusieurs images successives sur la même ligne (ou plusieurs lignes selon la taille de l’écran).

    • C’est joli et très clair, super. :)

      Mais :

      malheureusement encore beaucoup de clients n’en veulent pas en grand écran

      Et ils ont raison !

      Masquer le menu principal dès le départ, c’est une mauvaise pratique ergonomique. Et apparemment les dernières études utilisateurs ont fait re-changé l’ergonomie de nombreux gros acteurs du web (qui, c’est certain, sont assez bien informés vu le retour sur investissement qu’ils cherchent, et qu’ils font tous très attention au moindre changement d’interface) pour revenir à afficher au moins les entrées principales les plus importantes dès le départ SANS hamburger, directement visibles, et cela y compris en mobile tout petit écran. FB, Google, Twitter, Airbnb et plein d’autres sont tous revenus a des menus directement visible pour les entrées principales…

      Donc c’est exactement l’inverse que l’état actuel des connaissances (et des utilisateurs, car les utilisateurs changent évidemment) conseille actuellement :
      1) bien garder le menu principal visible en grand écran (au moins les entrées principales) sans rien avoir à cliquer
      2) le garder aussi en petit écran, au moins pour les 3/4/5 entrées principales

      Quand il y a beaucoup d’entrées (ce qui n’est pas le cas de ton site là) la solution est d’afficher 3 ou 4 choses plus un dernier bouton « more » (que ce soit un hamburger, trois petits points horizontaux ou verticaux, ou un mot « more », « plus »…)

      http://seenthis.net/messages/397625
      +
      http://seenthis.net/messages/258219

      Et au passage, quand on utilise un bouton de menu et qu’il n’est pas dans une barre de menus avec plusieurs entrées (ce qui permet de deviner que tous les éléments de la même barre sont cliquables), les tests utilisateurs montrent apparemment que l’icône hamburger seule est très mal comprise :
      http://seenthis.net/messages/241675

      Et que ce qui compte c’est :
      1) avoir un fond ou des bordures qui permettent de deviner que c’est un bouton cliquable (la bordure augmente beaucoup les clics)
      2) avoir un mot « menu », avec ou sans icône, augmente encore beaucoup plus les clics : l’icône hamburger peut alors décorer en plus le mot, mais c’est juste une déco, l’important étant d’avoir un vrai mot

      | ≡ Menu |

      (et donc @visionscarto n’est pas super de ce point de vue là non plus :D)

    • Hello @arno, dis moi, ton truc de « synchronisation du scroll entre deux colonnes », à tout hasard, l’aurais-tu codé dans une fonction un peu générique ? Est-ce qu’on peut l’appliquer à n’importe quelle paire de colonnes côte à côte ?

      J’utilise Sticky Kit, qui fait un truc similaire mais pas pareil : ça fait devenir « fixed » la colonne la plus petite le temps qu’elle rattrape l’autre, puis ça s’arrête.
      http://leafo.net/sticky-kit

      Mais toi ta méthode c’est de faire un effet de ralentissement du scroll sur la plus petite colonne, je trouve ça plus sobre et plus discret.

      Yorait moyen d’en faire une lib générique, tu penses ?