Contexte
2016 l'agence WEBCOM fait appel à moi pour intégrer la maquette du site Hutiane Croisières à son CMS maison. Hutiane propose des séjours à la carte vers des destinations variées sur son catamaran de luxe, équipé pour de multiples loisirs aquatiques.
MA MISSION
Intégrer les pages en respectant le wireframing fourni (responsive ou adaptative) - Offrir la possibilité de suivre en direct la position du bateau - Mettre en oeuvre l'UX - Développer un diaporama
Menu animé En CSS
Quand on arrive sur le site le menu est fermé par défaut. L'ouverture / fermeture se fait au clic et l'animation est soutenue par des fonctions translate en CSS3. Pour conserver cette action d'une page à l'autre nous avons opté pour une gestion via javascript (la variable est envoyée à l'url), plutôt que via des cookies.
Listing type
La difficulté principale des listing, présents sur quasi toutes les pages, résidait dans l'alternance des lignes : une ligne simple, puis une ligne divisée en deux colonnes, une ligne simple, puis à nouveau une ligne de deux colonnes mais inversées, puis on reprend sur une ligne simple, etc... le genre de complexité qui force à une syntaxe CSS efficace.
Localisation Gmap Live
Google Map permet de suivre la localisation du catamaran en direct. Une cartouche d'accès en bas de toutes les pages ainsi qu'une page dédiée permettent, depuis le site, de suivre l'avancée du bateau où qu'il soit.
Responsive Fluide
Pour le multi-supports, malgré le module adaptative natif du CMS Webcom, le choix s'est porté sur une gestion CSS en fluid responsive (tailles relatives et breakpoints). A mon sens bien plus simple et efficace que l'adaptative, si on l'applique intelligemment sur les images.
Intégration web responsive pour un organisateur de croisières
Agence / Annonceur
Webcom (Paris) / Hutiane Croisières
Prestation
Intégration responsive UX / UI
Développement d'un diaporama
Intégration d'une appli gmap.
Outils
HTML5 / CSS / Javascript.