Pour naviguer sur le Web, les utilisateurs peuvent utiliser une grande variété d'appareils, comme les PC, les tablettes ou les smartphones. Pour rendre le contenu attrayant sur chacun de ces appareils et tailles d'écran, les pages Web doivent avoir un bon rendu et s'adapter en conséquence. C'est ce que l'on appelle le « Responsive design ».
Les visiteurs d'un site Web peuvent utiliser un smartphone s'ils veulent faire des achats en déplacement, ou une tablette pour commander quelque chose depuis leur canapé. Quel que soit l'appareil utilisé par tes visiteurs, nous nous en chargeons : ton site Web sera toujours affiché dans une version optimisée pour l'appareil utilisé. Le Responsive design garantit que le contenu que les visiteurs regardent s'adapte à leur appareil sans aufcun compromis sur la convivialité.
Cela s'applique en particulier, mais sans s'y limiter, à :
Dans les lignes qui suivent, nous te montrerons quelques exemples de la liste ci-dessus et la façon dont ces éléments pourraient apparaître sur les différents appareils.
Remarque
L'apparence des éléments spécifiques peut varier en fonction du thème choisi.En-tête
Dans l'en-tête de ton site Web, tu peux promouvoir tes arguments clés de vente. Si tu as ajouté plusieurs arguments clés de vente, il peut être difficile de tous les lire sur des écrans plus petits, p. ex. les smartphones ou les tablettes. C'est pourquoi les arguments clés de vente s'affichent sous la forme d'un ruban dès que tes visiteurs utilisent un appareil doté d'un écran plus petit. Les arguments clés de vente défileront les uns après les autres automatiquement selon un certain rythme, afin que les visiteurs puissent toujours tous les voir. De plus, les clients ont la possibilité de sélectionner manuellement la flèche afin d'afficher l'argument clé de vente suivant.
Grand écran :
Petit écran :
Barre de recherche
Étant donné que l'espace est plus restreint sur les petits écrans, la barre de recherche est réduite sur ces appareils. Mais les visiteurs peuvent facilement accéder à la barre de recherche complète en sélectionnant .
Grand écran :
Petit écran :
Menu de navigation
Le menu de navigation est également optimisé pour les plus petits écrans. Alors que le menu de navigation est visible directement sur les grands écrans, les visiteurs peuvent facilement sélectionner pour accéder au menu de navigation sur les plus petits écrans.
Grand écran :
Petit écran (avec menu de navigation ouvert)
Images dans les éléments de contenu
Un comportement réactif est également utile pour les images dans les éléments de contenu. Cela s'explique par le fait que ces images peuvent s'afficher en entier dans la version de bureau mais être recadrées dans la version mobile, ou l'inverse, en fonction de la taille initiale et de l'orientation de l'image.
Voici un exemple de la façon dont une image peut s'afficher sur les grands écrans :
Et voici la partie qui serait visible sur des écrans plus petits :
Comme tu peux le voir, la partie supérieure et la partie inférieure de l'image ont été légèrement coupées sur le grand écran. D'autre part, les côtés gauche et droit ont été légèrement coupés sur le petit écran.
Voici quelques conseils et astuces pour le traitement des images réactives :
- Aligner tes images dans les diaporamas afin d'éviter que les parties les plus importantes d'une image ne soient perdues en raison de la taille de l'écran.
- Télécharger des images qui respectent la taille recommandée.
- Essayer de placer le contenu le plus important dans le tiers central en hauteur pour les images téléchargées en orientation paysage afin d'assurer qu'il est toujours visible sur les grands écrans.
- Essayer de placer les parties les plus importantes dans le tiers central en largeur pour que les images très larges affichent toujours le contenu important sur les plus petits écrans.