webdesign

à la demande : navigation avec survols et images

Chaque année, un ou plusieurs étudiants me demandent le code pour une navigation avec survols et apparitions d’images de ce type :

See the Pen Nav + survol by Benoît Wimart (@benoitwimart) on CodePen.0

J’ai mis en ligne sur codepen un prototype rapide (sans « class »), car je ne suis pas complètement opposé à ce type de menu, néanmoins plusieurs points négatifs peuvent être observés avec cet exemple :

  1. la mise en page selon le nombre d’éléments ne sera pas toujours simple ;
  2. la dégradation sur écran tactile, à tester soit avec un peu de persévérance avec l’inspecteur de Chrome, soit via votre mobile, tablette… le « touch » fait apparaitre l’image quelques millisecondes avant d’aller sur le lien (il faut trouver une solution) ;
  3. le poids des images (très très léger sur le codepen) pourrait rendre l’effet moins élégant (ex : un ou plusieurs survols ne marchent pas tout de suite).

Il est possible de rendre l’expérience plus fluide en ajoutant une couche de JavaScript, d’Ajax et de « Loading », mais avec un coût plus important et des performances moindres.

maquette et prototype à l’échelle

Avant de commencer à coder un projet, une première étape consiste à faire une maquette avec un logiciel de dessin adapté (Sketch, Adobe XD et leur clone) ou l’outil que vous maitrisez le mieux (Photophop, Illustrator, InDesign et leur clone).
Une fois la maquette finalisée, il est indispensable de faire son export en bitmap. Ce qui donne un certain avantage à travailler avec un logiciel comme Sketch ou Photoshop par rapport à InDesign.
Il est aussi conseillé de commencer par la version mobile et de choisir l’écran adapté à cette déclinaison, par exemple une maquette pour mobile entre 320 et 640 px.
Dans la vidéo ci-dessous, j’ai ciblé un modèle précis, le Nexus 5, j’ai donc créé une image bitmap de 412 pixels de large (mais je garde en tête qu’il existe des smartphones de 320 px).

Si votre image exportée est en résolution « retina », ici 412 × 2 = 824 px de large, l’aperçu sur un écran retina sera plus précis, plus net.

Application

Par étapes :

  1. premièrement, je réalise une image à la bonne taille, avec le bon nombre de pixels (retina ou pas) ;
  2. je la glisse dans Chrome (dans la barre d’url) ;
  3. je passe en mode responsive via l’inspecteur ;
  4. je rafraichis la page (pour les problèmes de zoom) ;
  5. enfin, j’ajuste les options.