9 règles essentielles pour les galeries d'images réactives
Le design réactif est une partie essentielle et nécessaire du développement Web. Un des problèmes les plus importants liés à la conception Web réactive a été les images. Beaucoup débattent de la meilleure façon d'afficher des images sur un site réactif. Et puis, qu'en est-il des galeries d'images?
Les galeries d'images présentent beaucoup plus de complexité que les images individuelles. Il y a encore plus de variables et d'éléments à prendre en compte lors de la mise en œuvre de galeries d'images réactives complètes sur votre site Web. Jetons un coup d'oeil à quelques conseils utiles pour mettre en œuvre des galeries d'images réactives de la bonne manière.
1) Diaporamas: masquez autant que possible la navigation
Il se peut que vous n'ayez pas d'éléments de navigation sur une tablette ou un appareil mobile, mais sur un ordinateur de bureau, il est recommandé de masquer ces éléments jusqu'à ce qu'ils soient nécessaires. Les éléments tels que les flèches avant et arrière et les points de navigation doivent être définis pour ne s'afficher que lorsque quelqu'un passe la souris sur la galerie d'images glissante. Cela évite les distractions et évite les conflits entre le contenu et les éléments de navigation. L'expérience entière se sent moins confuse.
2) Évitez trop d'images de portrait
Si vous implémentez une galerie qui est une grille d'images, vous voudrez choisir des images orientées paysage ou carrées si possible. Cela facilite leur affichage sur un petit écran. Les images de portrait conviendraient bien sur un téléphone intelligent en mode portrait, mais la zone de visualisation étendue d'un téléphone orienté paysage rend difficile la visualisation d'images de portrait. Le paysage est le meilleur, mais vous pouvez vous contenter du carré si le paysage n’est pas une option. Toutes les images peuvent être définies pour tenir dans une zone de visualisation, mais les images de portrait sur un écran de paysage apparaîtront très petites. Vos images ne seront pas vues comme des images carrées ou panoramiques, ce qui remplira une plus grande zone de l’écran et sera plus grande. Lors de la sélection des images, assurez-vous de garder la personne en vue.
3) Utiliser des gestes sur les tablettes et mobiles
Les gens aiment utiliser des gestes sur leurs écrans tactiles. Ils se sentent plus autonomes quand ils ont l'impression de glisser une image, car l'expérience est plus immersive. Tenter de taper de petites flèches ou des points de navigation sur un appareil mobile est trop fastidieux. Il est beaucoup plus naturel de pouvoir prendre votre doigt et balayer une image vers le haut, le bas, la gauche ou la droite.
4) Évitez les lightboxes: désactivez-les sur votre mobile
Si vous avez des images de produits, comme des machines ou des articles, qui doivent être visualisés avec plus de détails (tissus, bijoux, etc.), une boîte à lumière comportant des images plus grandes a du sens. Même alors, ils ne devraient être utilisés que sur le bureau. Lorsque vous définissez une taille d'écran pour tablette et mobile, les lightbox doivent être désactivées. Ils peuvent causer un certain nombre de problèmes d’expérience utilisateur. Si quelque chose se produit et que la lightbox ne se taille pas correctement, il est possible que le bouton de sortie ne soit pas accessible ou que les images ne s'affichent pas correctement.
5) Lorsque vous utilisez des éléments de navigation, faites-les discrets
Si vous avez une galerie d'images glissante avec un nombre important de diapositives, la navigation est logique. Vous ne voulez pas faire attendre les utilisateurs pour parcourir tout. Ils peuvent facilement cliquer à leur propre rythme, entrer, obtenir ce dont ils ont besoin et sortir. Lorsque vous utilisez ces éléments, assurez-vous de les ranger dans des endroits éloignés. Ne faites pas passer des points de navigation sur du texte ou d'autres liens. Evitez également les contrôles trop complexes. Celles-ci prennent beaucoup de place, distraient les utilisateurs du contenu et créent un aspect encombré. Avoir des points sur lesquels les utilisateurs peuvent cliquer pour parcourir certaines images ou les parcourir, et avoir des flèches vers l’avant et vers l’arrière est suffisant. N'en faites pas trop!
6) Ne pas mélanger les images et les vidéos
Mélanger différents médias est généralement acceptable, mais mélanger des vidéos là où on ne s’y attend pas peut causer des problèmes. Vous ne voulez pas qu'un utilisateur lance une vidéo par inadvertance, ce qui permet à tous de les entendre. Séparez les vidéos et les images afin qu'elles sachent à quoi s'attendre. Personne n'aime ces types de surprises.
7) Assurez-vous que les images ne sont pas plus larges que leur largeur maximale
Ceci est important, car vous pouvez éviter la mise à l'échelle pixélisée des images trop petites pour un espace. Les images doivent être suffisamment grandes pour remplir 100% d'un appareil mobile (dans la plupart des cas), mais les sites de taille bureautique ne doivent définir que la largeur maximale à 100%. J'ai vu des cas où quelqu'un a un de ces grands écrans de 27 pouces, et quand ils déplacent la largeur du navigateur, l'image est adaptée à sa taille.
8) Mise à l'échelle de l'image
Si vous avez des images à l'échelle, assurez-vous qu'elles diminuent et non pas. Il est préférable de définir des dimensions exactes pour vos images. Plusieurs fois, un pourcentage est utilisé pour une dimension, tandis que l'autre dimension est définie sur auto. Par exemple, si vous souhaitez qu'une image couvre 50% de la largeur du navigateur, définissez la largeur de l'image sur 50% et la hauteur sur auto .
9) Évitez d'utiliser des légendes d'image
Les légendes d'image ou tout autre texte d'accompagnement peuvent causer toutes sortes de problèmes pour vous et vos utilisateurs. Le premier problème est qu’il est difficile d’adapter le texte à un appareil mobile. Avec les smartphones, vous disposez d’un espace limité, mais essayer d’ajouter du texte peut compliquer l’expérience. Un autre problème est que vous êtes limité dans la quantité de texte que vous pouvez utiliser. L'ajout d'une légende ou de tout texte supplémentaire ajoute la variable du texte réactif dans le mixage. Vous devez tenir compte des sauts de mots et de la façon dont plusieurs lignes de texte finiront par ressembler à votre image. Si le texte est utilisé comme une superposition, vous devez également vous préoccuper de l'endroit où il se trouve sur l'image. Un texte clair sur une zone claire de l'image rendra le texte illisible. Le contraste est essentiel et chaque image est différente.
Conclusion
En bout de ligne, chaque aspect de la conception de sites Web doit fonctionner correctement et tenir compte de l’utilisateur. Si personne ne peut utiliser votre site Web, ils ne reviendront pas. Si vous ne suivez pas ces procédures simples, les galeries d'images réactives vous permettront de ne pas rencontrer de problèmes lors de la visualisation de vos images.