Catégorie de l'article : Technique

Walboat : une escapade maritime

·
lecture 3 minutes
Frédéric Pineau - Expert Web Performance
publié par

Frédéric Pineau
Directeur Technique

 – Maman, les beaux bateaux qui vont sur l’eau ont ils un site ?
– Mais oui, s’il n’en avait pas, artwaï serait là, pour leur en faire un !

Le site walboat.com qui vous présente le LATINI 52 Race « SOLANO ».

Un graphiste à la hauteur

Le LATINI 52 Race « Solano » est un voilier à part. En portant son choix de prestataire sur artwaï, la société walboat attendait de nous la qualité de réalisation que nous défendions mais aussi une créativité à toute épreuve. Nous nous devions donc, d’assurer un site à la hauteur des courbes italiennes de ce bien beau bateau.
Sur ce point, on peut féliciter Tony d’avoir plus qu’assurer. En ayant proposé plusieurs mise en page, une dizaine de teinte différente, et tester le poids de tout ceci; le choix fut finalement  porté sur ce bleu nuit qui fait ressortir les magnifiques photos prises en mer.

Les fondamentaux habituels

Le site walboat.com ne déroge pas à la règle de notre application systématique des standards; à savoir : XHTML / CSS , le  tout vérifié dans notre brochette de navigateurs témoins : Firefox, Opéra, Safari et Internet Explorer.

Un prototype qui n’en est plus un !

Walboat.com Une fois de plus, nous nous appuyons sur prototype.js et la bibliothèque d’effets associés sciptaculous. Ici le défi était de parvenir à un résultat équivalent aux sites références de walboat qui eux utilisent la technologie flash pour leur diaporama. Ainsi la page d’accueil présente quelques photos avec cette barre horizontale faite à l’aide de scripacoulus.

On notera l’utilisation d’une lightbox pour une phototèque façon mur d’image.

Intermède : un souci « Microsoftien »

Malgré l’usage de prototype, nous avons pu constater un problème d’exécution des effets javascript sous Internet Explorer 7 (sous XP et Vista) qui n’existe pas avec la version 6 du navigateur de chez microsoft. Toutes les transitions en fondu avec changement d’opacité des images étaient saccadées voir inopérantes dans le suc-cité navigateur. Imaginez la tête de votre humble rédacteur devant la menace du retour à la technologie Flash*.
Quelques poignées de cheveux en moins plus tard, nous avons constater que les effets concernés fonctionnaient parfaitement dans un autre contexte CSS. La solution : remplacer une image au format png mis en fond d’un bloc par un format gif. Mais qu’est-ce à dire ? Il s’avère qu’Internet Explorer 7 digère très mal les changement d’opacité d’images sur des fonds avec des images png. Bref une fois résolu ceci, l’exécution des scripts se comportaient à merveille dans l’ensemble de nos navigateurs témoins.

* Attention, qu’il n’y ai pas de quiproquo : Flash est une technologie éprouvée très intéressante pour les animations complexes. Mais dans ce cas l’utilisation de Flash est inutile et complexifierait les mises à jours. Il est à noter que nous ne rechignons pas à utiliser cette technologie lorsque son usage est justifié, comme le prouve ce qui suit.

En action sur les vagues

Fier d’une promotion par DVD de son voilier, la société Walboat nous a demandé de mettre à dispositions des internautes son clip vidéo. En faisant appel à un partenaire (dont nous vous parlerons un autre jour), nous nous assurions de la qualité de mise a disposition de la dite video. En effet, il fallait que la vidéo soit légère, de résolution suffisante et diffusable en plein écran sans trop de pixel et en s’adaptant au format d’écran. Le choix du lecteur intégré fut porté sur sur le player JW FLV utilisant la technologie Flash qui vous permet de regarder la vidéo sans attendre son chargement complet.

Coté serveur

Rien d’exceptionnel puisque PHP 5 est utilisé essentiellement dans un objectif de factorisation des éléments composants les pages.

L’image de marque avant tout

On ne peut pas dire que technologiquement, le site walboat.com révolutionne le genre. Nous avons soignez la réalisation technique mais c’est avant tout le travail du graphiste et des photographes qui sont mis en avant. Notre accompagnement consiste essentiellement à la mise en ligne des ces biens jolies photos de ces escapades maritimes rafraîchissantes.

Articles similaires

Le mystère du LCP introuvable

Technique

15 octobre 2026

Si vous surveillez la perf de vos pages, vous scrutez régulièrement les valeurs de vos LCP. Eh bien, amateurs de sensations fortes, tenez-vous bien :...

Lire la suite de Le mystère du LCP introuvable

CrUX Ads Metrics : la réalité des pubs enfin visible !

Technique

Tendance

17 septembre 2026

Cela fait un moment que Google n’avait pas pondu de nouveaux indicateurs à se mettre sous la dent. Eh bien le 15 septembre dernier, Google...

Lire la suite de CrUX Ads Metrics : la réalité des pubs enfin visible !

Méthode HTTP QUERY : le verbe qui règle enfin le duel GET contre POST

Technique

21 juillet 2026

La méthode HTTP QUERY (RFC 10008) résout le vieux conflit GET vs POST sur les recherches complexes. On regarde où en est vraiment le support.

Lire la suite de Méthode HTTP QUERY : le verbe qui règle enfin le duel GET contre POST

Optimiser le Cache Navigateur avec No-Vary-Search

Technique

20 janvier 2026

Sciemment ou non, vous utilisez certainement des paramètres d’URL. Cela peut être des codes de tracking UTM ajoutés par vos campagnes marketing, des paramètres publicitaires,...

Lire la suite de Optimiser le Cache Navigateur avec No-Vary-Search