— Publié le 2 octobre 2021 —
En informatique, on a l’habitude d’être précis sur les mots qu’on emploie car chaque mot a un sens précis donc autant les utiliser à bon escient. Cependant, cela peut parfois induire des malentendus avec nos clients car notre définition du diaporama est différente de la sienne et on ne parle pas du tout de la même chose, sans s’en rendre compte du coup.
Cet article est l’occasion de bien définir les termes Diaporama, Slider, Carousel et Galerie photos et d’éviter de tourner en rond loll (merci JF pour la blague).
Slider, Diaporama et Carousel
Carrousel, Carousel, Diaporama et Slider sont 4 mots pour désigner la même chose : un élément graphique dynamique qui permet de faire défiler plusieurs diapositives.
En français, on parle de Carrousel ou de Diaporama. En anglais, on parle de Carrousel (avec un ou 2 « r ») ou de Slider car une diapositive se dit « slide » en anglais.
Chaque diapositive peut contenir une image, du texte, une vidéo, des boutons d’actions. Voici un exemple simple avec des images.
Un carrousel peut s’utiliser pour présenter pour différentes informations :
- débuter sa page d’accueil, en présentant l’activité / la société,
- afficher des références clients ou des témoignages,
- présenter les produits d’une produits d’une boutique,
- présenter les actus d’un blog.
Nous n’allons pas vous présenter ici les différents rendus que peuvent prendre un carrousel mais sachez que selon celui que vous utilisez, vous pouvez jouer sur les paramètres suivants :
- la rotation automatique ou non
- la vitesse de défilement entre 2 diapositives
- le temps d’affichage de chaque diapositive
- l’affichage des flèches de défilement par défaut ou au survol de la souris
- l’affichage ou non des puces en bas de carrousel pour montrer combien de diapos il contient
- la façon dont 2 diapos s’enchaînent : est-ce que la diapo suivant arrive de la gauche, du haut, sous forme de fondu enchaîné…
- le rythme d’affichage de calques qui viennent sur l’image / vidéo : si vous avez 2 blocs de texte et un bouton, ils peuvent s’afficher d’un coup ou en décaler.
Et dans tous les cas, il faut manier cet élément graphique avec précaution pour ne pas nuire aux performances du site web (attention au poids des visuels / vidéos), à l’expérience de l’utilisateur en abusant des animations ou à son rendu sur mobile.
Galerie photo
Une galerie photo est un affichage « statique » de vos images. Statique dans le sens où il n’y a aucun défilement, en revanche, vous pouvez donner des effets à vos images au passage de la souris : une ombre, un zoom ou un dézoom, une légère animation.
En paramétrant votre galerie, vous pouvez ajuster les options suivantes :
- le nombre de colonnes
- la largeur entre 2 colonnes
- l’aspect grille ou masonry : dans une grille, on choisit un nombre de colonnes et la largeur des images s’adapte sur cette base. Dans un masonry, les images sont arrangées de manière moins rigide, les proportions des images sont gardées si elles sont de hauteurs différentes. Ca donne un aspect décalé tout en gardant un espace optimisé.
- la taille des images : fixe ou automatique. Cette option n’est disponible que si vous choisissez une présentation en grille. Si vous fixez la taille, les images auront la même taille, certaines d’entre elles seront donc « forcées ». On obtient dans ce cas un alignement bien net. En auto, les images gardent leur largeur d’origine et donc la hauteur dépend du ratio initial.
- l’effet au passage de la souris : dans l’exemple ci-dessous, j’ai choisi un léger zoom
- l’affichage d’une bordure autour des images
- l’arrondi ou non des angles
Conclusion
Voilà, nous espérons que cet article vous aura permis d’y voir plus clair dans ces différentes façons d’afficher vos images et d’utiliser le bon vocabulaire. Si vous souhaitez que nous vous présentions davantage d’exemples de carrousel ou de galeries photos, dites-le nous.
Et si vous avez des questions, posez-les en commentaires ci-dessous.
N’hésitez pas à partager vos propres retours d’expérience !
Laisser un commentaire