Ma grosse occupation de décembre dernier :
►http://www.flip-zone.com
J’ai entièrement recodé le bouzin, avec passage à #SPIP_3, HTML5, internationalisation en 10 langues sur un unique site SPIP, #responsive_web_design et, surtout, disparition totale de Flash.
Dans les prochaines jours je vais essayer de faire une série de messages décrivant des aspects techniques qui pourront soit intéresser soit servir à d’autres. Parce que du côté de la technique HTML/Javascript/CSS, c’est assez rigolo.
– Flip-Zone existe désormais depuis quelques années, je le gère avec @diala, et ça représente maintenant une partie non négligeable de notre revenu. De plus, c’est un site qui nous permet de faire la démonstration de certaines de nos compétences en matière de webdesign (ce qui reste notre activité principale).
– Récemment, j’ai découvert que la version arabe du site avait plus de 45% de ses visites sur support mobile. Les versions anglaises et françaises, aux alentours de 25%. Et le site n’était plus adapté à ces supports (la version arabe n’avait pas de version adaptée, et la version anglaises avait une vieille version iPhone datant de l’iPhone 1, et la version iPad était pas mal, mais uniquement pour la tablette d’Apple).
– Donc : passer intégralement en responsive design. J’ai lu le terme « tablet first » ; ça n’est pas totalement le cas ici, parce qu’on savait que le PC reste notre source principale de revenu. Donc le redesign est certes largement motivé par les supports tactiles, mais en gardant au centre des évolutions ce qui fonctionne (commercialement, s’entend) dans la version PC.
– Ne pas se voiler la face quand on parle de ce genre de webdesign : les bandeaux de publicité constituent la contrainte principale du projet. Les bandeaux sont moches et souvent vulgaires, rendent le graphisme incohérent et moche, ralentissent la navigation, compliquent l’aspect responsive et imposent leurs dimensions aux blocs, mais ce sont eux qui paient pour l’ensemble. Donc il faut réussir à les intégrer au mieux, et il faut que suffisamment de gens cliquent dessus (on ne peut donc pas les planquer dans un coin). Je rigole souvent en lisant les théories de webdesign qui, assez systématiquement, occultent la présence de ces affreux bandeaux. Dans la vraie vie, sur un site à vocation commerciale, hé bé ils sont le centre (moche et contraignant) du design.
– Adapter le chargement et l’affichage des images des collections (les fameux « flip-books » de Flip-Zone) à la taille de l’écran et à la haute définition (écran rétina).
– Remplacer mon ancien visualiseur de collections, qui était en Flash, par un nouvel outil HTML5. Répondre aux gestures des supports tactiles (tablettes notamment). Compatibilité des gestures sur Android (pas seulement iOS). Avoir un mode plein-écran de qualité (en pur HTML, oui oui). L’essentiel du boulot a porté sur ce point.
– Auparavant, on avait un site SPIP par langue. Ça nous faisait déjà 4 sites à gérer à chaque mise en ligne de collection. But de la nouvelle version : fusionner les 4 sites en un seul SPIP, avec un seul squelette multilingue. Du coup : passage à 10 langues (dont le japonais et le chinois). Et conserver la spécificité de la version arabe, qui est de promouvoir spécifiquement les créateurs libanais (avec le même squelette) – c’est-à-dire même contenu, même SPIP et mêmes squelettes, avec une structure de l’information présentée assez nettement différente.
On a lancé la nouvelle version juste avant Noël, et ça a l’air de tourner correctement. J’ai continue à modifier des détails, mais en gros ça semble très bien tourner. Graphiquement on est très contents, c’est assez spectaculaire ; les « flip-books » en HTML rendent très bien, sur tablette c’est vraiment épatant, sur smartphone c’est très utilisable (peut-être un bug avec les zooms des images immenses sur iPad retina, faut que j’arrive à confirmer), les nouvelles langues commencent tranquillement à avoir des visites, la gestion du site (au lieu de 4 auparavant) est nettement facilitée…