Meilleures pratiques pour l'en-tête de site Web réactif
En travaillant sur la conversion d'un site Web obsolète pour être plus réactif, je suis tombé sur un problème avec l'en-tête du site Web. Le client souhaite conserver son grand graphique ( à la fois l'image et le texte sont 1, pas 2 entités distinctes ) pour l'en-tête du bureau vers le mobile.
L'image est lisible au niveau du bureau mais semble difficile à visualiser au niveau du mobile. J'ai pensé à changer l'image en une police Web (lors de l'utilisation de media-queries) au niveau mobile mais j'ai pensé que ce serait déroutant pour les utilisateurs s'il y avait un grand graphique au niveau du bureau et juste du texte à le niveau mobile. Les en-têtes de site Web peuvent-ils passer d'une image à une police Web sur tous les appareils?
Le client souhaite également faire passer les couleurs d'en-tête du bleu au niveau du bureau et de la tablette au vert au niveau du mobile. Les couleurs ne devraient-elles pas rester les mêmes sur différents appareils?
Divisez l'en-tête en deux.
Oui, vous pouvez modifier l'en-tête du site Web sur tous les appareils. Cependant, l'exemple montre ce qui ressemble à un logo au-dessus d'une image d'arrière-plan. Pensez à diviser l'en-tête en une image raster (l'arrière-plan) et une image vectorielle (le logo). Cela permettra à l'arrière-plan de se réduire à un appareil mobile tout en permettant au logo de se réduire sans flou pour plus de lisibilité.
Les couleurs peuvent être différentes d'un appareil à l'autre, mais le jeu de couleurs doit être cohérent.
La cohérence est importante dans une bonne expérience utilisateur, et le jeu de couleurs global est plus important que les couleurs elles-mêmes pour renforcer cette cohérence. Le Nielsen Norman Group a écrit sur cohérence et expérience utilisateur entre le Web (ordinateur de bureau) et les appareils mobiles :
"Une expérience utilisateur cohérente, quel que soit le canal, est l'un des 4 éléments clés d'une expérience cross-canal utilisable. La cohérence entre les canaux aide à établir la confiance avec les clients."
Malgré la demande de couleurs différentes, il devrait y avoir un moyen de conserver la cohérence. Par exemple, voici un site réactif qui change de couleur à mesure que la largeur diminue, mais conserve un schéma de couleurs cohérent.
En ce qui concerne l'image d'en-tête, vous pouvez utiliser des requêtes multimédias pour basculer les images à un point d'arrêt où cela est logique de le faire, afin de tirer le meilleur parti de l'espace d'écran disponible.
Par exemple:
.header {
background-image: /* mobile-friendly version of image by default */;
}
@media (screen and min-width: 480px) { /* arbitrary breakpoint for simplicity */
.header {
background-image: /* larger version of image */;
}
}
Cela nécessite la préparation de deux versions de l'image d'en-tête, mais garantit qu'elles semblent bonnes aux tailles d'écran appropriées.
Vous avez bien sûr la possibilité d'utiliser une police Web pour l'en-tête à la place d'une image, et de la dimensionner de manière appropriée pour différentes tailles d'écran. L'utilisation de requêtes multimédias vous donne beaucoup de flexibilité - vous pouvez même utiliser une version de police Web pour les petits écrans et une image pour les écrans plus grands.
Par votre autre question re. en changeant de couleur, vous pouvez également le faire à l'aide de requêtes multimédias (voir l'exemple ci-dessus), mais il peut être judicieux de conserver des couleurs cohérentes pour correspondre à la marque ou au thème du site.
Les en-têtes de site Web peuvent-ils passer d'une image à une police Web sur tous les appareils?
Sûr. En utilisant des points d'arrêt CSS réactifs et/ou JS, vous pouvez faire à peu près tout ce que vous voulez pour chaque vue particulière.
Les couleurs ne devraient-elles pas rester les mêmes sur différents appareils?
Il doit y avoir une conception visuelle et cohérente de la marque établie pour le client. En règle générale, sur cette base, non, vous ne souhaitez pas modifier les couleurs en fonction de la taille des fenêtres. Vous pouvez certainement d'un point de vue technique. Ce n'est probablement pas un problème majeur d'UX/convivialité. Mais cela ressemble à une demande de conception visuelle/de marque étrange.