Une navigation faussement horizontale intelligente sur We Are Tennis
Au mois de décembre dernier [1], j’ai été invité par BNP Paribas (merci Marie) à l’open de tennis de Bercy, l’occasion pour moi de voir deux matchs sympas en loge, de me gaver de petits fours, et de découvrir We Are Tennis, le site du groupe BNP Paribas dédié au… tennis, ah ben ça alors.
Si vous me suivez un tant soit peu sur Twitter (et ailleurs), vous ne pouvez pas ne pas savoir que j’aime le tennis. J’y joue (souvent, trop même aux dires de ma femme), j’en regarde énormément, et je m’enquille un peu tout ce qui passe sur le sujet d’une manière générale. We Are Tennis n’était pourtant pour moi qu’une page de publicité (de plus) dans mon Tennis Magazine mensuel.
Quand je suis arrivé sur le site, j’ai eu trois réactions – dans l’ordre :
- Mais c’est quoi noir et vert à la Matrix ? On dirait mon site de hacking en 1998 !
- Rhaaaa encore un site en Flash ?
- Euh, mais c’est pas un peu bordélique là ?
Un petit coup de Matrix reloaded ?
On va commencer par les choses qui fâchent : je n’aime pas les couleurs. Autant je travaille toute la journée avec un éditeur de texte à fond noir, autant le vert fluo du site m’explose un tout petit peu les yeux, en particulier le carousel qui mange près de la moitié de l’écran en 1440x900. Heureusement, la consultation des articles se fait en blanc sur fond noir, et dans ce cas l’image de fond n’est pas trop gênante, mais il est impossible de se débarrasser de la barre latérale autrement qu’à grands coups de Firebug.
Encore un site en Flash ?
Eh bien non, pas cette fois, c’est une des bonnes surprises réservées par l’utilisation de Firebug pour virer cette saloperie de <header /> vert fluo : header, nav, b, i… le site est en HTML5, même si les Javascripts (chargés en bas de page, on voit que les bonnes pratiques ont fait du chemin depuis mon passage chez BNP Paribas IE6 only il y a 5 ans) montrent le chargement de SWF Object.
Une bonne utilisation de la navigation horizontale
J’en arrive au point le plus intéressant – et le plus contestable après l’utilisation du vert fluo – l’utilisation d’une navigation faussement horizontale. Le site est divisé en 7 rubriques, toutes affichées sur la même page, d’où l’impression de bordel, mais sans scroll horizontal. L’utilisateur passe d’une section à une autre soit via le menu situé en haut de page, soit en cliquant sur l’en-tête de la section suivante, le tout avec un joli effet de transition latérale. Une fois la section choisie, le défilement se fait naturellement de haut en bas.
C’est une utilisation très astucieuse du scroll horizontale, là où ce mode de navigation me donne juste envie de fermer la fenêtre : elle permet au contenu de prendre tout l’espace de la fenêtre aussi importante soit votre résolution, mais sans perdre en confort de lecture avec des lignes de 2 kilomètres. J’ai eu un peu de mal à comprendre comment ça fonctionnait, probablement parce que mon ascenseur se situe tout à droite de la fenêtre, et que le défilement ne se fait que sur la section en cours, et non sur la page entière, ce qui est un peu déroutant.
Et le contenu dans tout ça ?
Côté contenus, on n’est pas en restes. Le site propose l’actualité du tennis professionnel, des résultats, le calendrier de l’ATP et la WTA, un blog plein d’analyses avec lesquelles je suis plutôt d’accord : le Federer - Djokovic en demi finale de Roland Garros était le match du siècle, mais si vous n’y étiez pas, vous ne pouvez probablement pas comprendre. On y trouve enfin une section dédiée à l’engagement de la BNP qui se présente comme la banque de tous les tennis. Et c’est sur ce point que j’ai été le plus déçu : il manque clairement une section dédiée au tennis local, il y a autre chose dans la vie que l’ATP et la WTA.
[1] Je sais je suis à la bourre, mais cet article m’était sorti de la tête jusqu’à ce matin, et l’ouverture de la vente des places de Roland Garros, aux licenciés de la FFT seulement, les autres il vous faudra attendre.
