Les sites Web réactifs sont essentiels à votre entreprise. Être réactif offre un moyen facile de maintenir la cohérence avec votre marque et votre site Web sur tous les principaux appareils. Et vous devez vous assurer de choisir correctement les bannières pour les sites Web réactifs. Avez-vous déjà essayé de charger un site Web avec votre téléphone uniquement pour trouver un désordre brouillé sur l'écran? C'est ce qui arrive si un site n'est pas réactif ou mobile.

Les images sont l'un des aspects les plus frustrants des sites Web réactifs, en particulier les images de bannière / pleine largeur. Ce sont les choses les plus susceptibles de se casser. Ou ne pas apparaître correctement sur l'écran. Pourquoi cela arrive-t-il? Pour le comprendre, nous vous expliquerons ce que cela signifie pour votre site web d'être réactif. (Pour en savoir plus, voir: Voici à quoi ressemble un site de grande qualité. )

La clé de la réactivité

Les sites Web réactifs réduisent les dimensions de votre site Web horizontalement. Cela signifie que lorsque le site Web change horizontalement, tout sur votre site Web est repositionné. C'est ce qu'on appelle une mise en page fluide. Étant donné que les sites Web réactifs redimensionnent et modifient les mises en page en fonction de votre appareil, il peut être difficile de voir tous les détails d'une image de site Web si la page ne répond pas. Les bannières sont particulièrement dures, car elles sont très grandes et presque toujours pleines de détails.

Vous trouverez ci-dessous quelques bonnes pratiques pour vous lorsque vous choisissez des bannières pour des images réactives avec les sites Web Advisor.

Comment choisir les bannières pour les sites Web réactifs

Assurez-vous que la taille de la photo n'est pas trop petite. Nous vous recommandons d'utiliser des images de bannière pour les sites Web réactifs d'un minimum de 2 000 pixels par 600 pixels pour obtenir la meilleure qualité d'image. Tout ce qui est inférieur à cette taille (pour la largeur ou la hauteur) donnera une image floue. Plus l'image est grande, plus nous avons de marge de manœuvre pour recadrer la bonne section de votre bannière.

Essayez de sélectionner des images sans focus. Choisir des images de bannière qui n'ont pas d'objectif principal, comme un paysage, est l'une des meilleures images à avoir sur la bannière de votre site Web. Peu importe l'appareil, le spectateur pourra distinguer les détails de l'image. Comme il n'y a pas d'objectif, nous pouvons placer l'image sans se soucier de la façon dont le site sera redimensionné sur les appareils. Voici quelques exemples:

Comme vous pouvez le voir, l'image se rétrécit horizontalement, mais comme le paysage est si grand, les clients peuvent toujours voir ce que l'arrière-plan est.

Choisir une image avec un focus. Imaginons que vous souhaitiez voir une photo d'une personne ou d'un objet sur votre site Web. Lorsque vous utilisez des photos avec mise au point, il est très important de conserver le focus principal au centre de l'image. Puisque les images de bannière sensibles aiment à rétrécir horizontalement, nous perdons une grande partie des côtés (espace blanc) des images. (Pour la lecture connexe, voir: Cette seule chose peut ruiner le site Web de votre cabinet-conseil. )

Dans les exemples, vous pouvez voir le rocher et l'individu sont au centre de l'image. Cela permet une image propre et redimensionnée.

Surtout, testez vos images. Le meilleur moyen de tester vos images est de les essayer sur votre site Web. Tester des images vous aidera également à comprendre quel type de photos fonctionne et ne fonctionne pas. Vous pouvez l'essayer vous-même ou travailler avec notre formidable équipe de support. (Pour plus de détails, voir: Comment le contenu de votre site Web peut attirer des clients. )

- Cet article a été écrit par Shaheen Mahani et est apparu pour la première fois sur les sites Web des conseillers.