Dans un précédent billet, je vous parlais de la flashite, cette maladie des sites Web réalisés en Flash qu’il serait bien plus simple et efficace de réaliser en JavaScript. Famous.be est un très bon exemple de site ayant la flashite. Gucci est un très bon exemple de site ayant osé jouer la carte JavaScript. Jusque là, j’étais triste de n’avoir jamais eu l’occasion de réaliser un tel site…
Pikaboo est une boîte bruxelloise dont le core business est la vidéo et la 3D.
Il y a quelques mois, Pikaboo a décidé de nous confier (en complémentaire) la réalisation de leur nouveau site. Comme certaines contraintes le justifiaient (QuickTime principalement) et que rien ne l’empêchait, nous avons décidé de réaliser le site avec les technologies XHTML/CSS/JavaScript alors que ce site avait toutes les caractéristiques pour devenir un site Flash.
MooTools et sa panoplie d’effets visuels a retenu notre attention.
En plus de MooTools, vous aurez certainement reconnu Shadowbox de Michael Jackson (pas le chanteur, le développeur Web). SimplePie est utilisé pour récupérer les flux RSS de Twitter et de Flickr (pour les news et les photos).
Nous avons décidé de créer une navigation intuitive, où il existe plusieurs façons différentes de réaliser une même action. Vous pouvez naviguer sur le site via le click mais aussi avec le clavier et la roulette de votre souris.
Par exemple, pour scroller dans les vidéos, vous pouvez utiliser :
* Les boutons flêchés
* Les flêches haut et bas de votre clavier
* La roulette de la souris
Ce site présentait pour nous plusieurs défis :
* Pouvoir réaliser un site “Flash-like” en JavaScript avec des animations fluides et harmonieuses.
* Pouvoir réaliser un site qui se défend au niveau accessibilité et référencement. Essayez de désactiver JavaScript ET CSS, le site reste naviguable (même si c’est moche). Tous les liens mènent vers des URL existantes et pertinentes !
* Pouvoir dégrader gracieusement ce site dans des navigateurs (merdiques) comme Internet Explorer 6. En gros, tout reste pareil, seuls les PNG sont remplacés par des GIF ayant une bordure d’un pixel.
Ce site n’entrera certainement pas dans l’histoire du Web, comme ce fut le cas pour Gucci. Ce fut néanmoins une expérience personnellement très enrichissante.
PS : Donnez-nous un coup de pouce en votant pour Pikaboo sur Digg et Scoopeo. Merci !
EDIT : petit aperçu du site dans lynx (thx Marin) !
Le blog de Vincent Battaglia 
Nice job!
Et c’est un type qui fait du Flash qui dit ça… :-p
LikeLike
Joli boulot!
Juste pour chipoter un peu: sans js, aucun contenu n’est accessible. 😉
LikeLike
Oui, j’en suis conscient. Par contre, si tu désactives CSS ET JavaScript (les deux en même temps), le site reste naviguable. Ca reste de toute façon cent fois mieux qu’un site full-Flash, ce qui était le but au départ.
LikeLike
Cent fois mieux, au niveau accessibilité, comprenez bien.
LikeLike
Très chouette!
LikeLike
» Ca reste de toute façon cent fois mieux qu’un site full-Flash
Ben justement, je n’en suis pas si sûr 😉
LikeLike
@Benjamin : tu peux argumenter un peu ?
LikeLike
petit aperçu du site dans lynx (thx Marin) !
LikeLike
Bonjour,
Les sites en Flash sont de véritables calamités au niveau accessibilité (non, ou mal voyants).
En ce qui concerne l’Ajax, pas de problème, tant qu’une alternative non-javascript existe (balise noscript).
Le site Pikaboo est en ce sens une “demi réussite”, il faut EGALEMENT se passer des styles pour l’utiliser sans javascript, dommage.
Naviguer dans un site riche en élément multimédias, comme c’est le cas ici, avec Lynx reste pour moi une énigme.
On voudrait pouvoir faire ce que l’on veut sans ce genre de contrainte, je sais, mais bon, si on veut aller au fond des choses …
Ceci-dit, c’est qd même du très bon boulot, l’initiative “no flash” est à remarquer.
LikeLike
Hello,
Une petite rectification: non, Flash n’est pas une technologie complètement non-accessible. Il y a des composants d’accessibilité pour Flash. Par contre, il peut y avoir des limites ou bugs:
1. au niveau des navigateurs, et de l’intégration navigateur/player flash;
2. au niveau des lecteurs d’écran et autre technologies d’aide;
3. au niveau des flasheurs.
C’est bien sûr le troisième type de limite qui contribue le plus, à l’heure actuelle, à l’idée fausse selon laquelle Flash n’est pas du tout accessible. 😉
LikeLike
@COcopocoloco : Merci pour ton commentaire. J’aimerais bien que tous les sites que je réalise soient de telles “demi réussite”, franchement ! Je ne sais pas si tu as déjà essayé de désactiver le JavaScript sur gucci.com mais ça ne marche pas non plus… Pourtant, je ne pense pas qu’on n’ait jamais reproché à ce site ce défaut (qui pour moi, n’en est pas vraiment un… ben ouais, si tu désactives Flash sur un site en Flash, ben ça marche pas non plus… En plus, avec les animations Flash actuelles, chargées via SWFObject, les sites en Flash ne fonctionnent pas non plus si on désactive JavaScript…)
@Florent V. : oui, ils ont fait des efforts pour fournir la meilleure accessibilité possible et on ne peut que les féliciter pour ça. Toutefois, pour le même budget et le même temps de développement, un site en pur XHTML/CSS/JS sera toujours plus accessible qu’un site en Flash.
LikeLike
L’information doit être accessible sans javascript. Point barre.
gucci.com n’est pas une référence, comme un tas d’autres “gros sites”.
Pas de vexation inutile, mon commentaire se veut constructif. Rappeler qu’il n’y a pas que le flash dans la vie est une bonne initiative, bravo à toi.
LikeLike
Je ne me vexe pas, ne t’inquiète pas. Je te remercie une seconde fois pour apporter ton point de vue très pertinent, il n’y a pas de problèmes là-dessus.
Juste pour remettre les choses au point : je n’ai pas présenté ce site comme le summum de l’accessibilité (j’ai dit : “il se défend” ce qui n’est pas faux). Par contre, et c’est surtout là dessus qu’on a mis l’accent, le site est parfaitement indexable par Google, qui le voit à la manière de lynx.
LikeLike
Une version iPhone, maintenant ? Pour le sport. Là, pas de problème, No flash allowed !
LikeLike
Figure-toi que c’est prévu ! Et un flux RSS pour iTunes également !
LikeLike
Simplement excellent et très original.
On en reparle très vite !
LikeLike
Excellent travail !
Le seul petit bémol : sans js avec le css activé tu n’as que le fond mais bon ce n’est pas bien méchant.
LikeLike
Hop ,
Je trouve le site super réussi tant niveau js, que design !
Par contre, là où j’aurais bien vu du flash, c’est dans l’affichage des vidéos.
Puis j’ai lu que vous vouliez faire une rss-iTunes, et j’ai compris 🙂
Nice job !
LikeLike
on peut avoir une idée du budget ?
LikeLike
Je préfère garder cette information pour moi 😉
LikeLike
@Matou
Il est possible d’utiliser des fichiers h264 avec un lecteur vidéo flash (celui-ci p. ex.: http://www.jeroenwijering.com) depuis les dernières mises à jour d’Adobe -> compatibilité iTunes. J’me trompe ?
LikeLike
Ben non pourquoi ? Ce serait bien de partager un peux …
Graphisme/intégration/ 5j ?
LikeLike
Hey Vinch, voilà là c’est bien moi qui te fais un petit coucou …
LikeLike
En dehors de tous ces commentaires techniques et la guerre javascript/css/flash, je trouve ce site vraiment très réussi. La naviguation est très intuitive et n’étant moi même pas un grand fan de flash [car à part sur certains portfolios, les bannières et les vidéos, les sites full flash n’ont plus de raisons d’être] Ce site est donc pour moi une belle alternative et démontre bien qu’on peut faire aussi bien (voir mieux dans ce cas) avec d’autres techniques dites classiques. Excellent boulot. Par contre, j’aurais utilisé flash pour la vidéo mais je suppose que quicktime vous était imposé?
LikeLike
@alEx : merci ! En fait on a utilisé QuickTime car il offre une bien meilleure qualité que le FLV et parce qu’un flux RSS iTunes est prévu au programme 😉
LikeLike