Avec la croissance régulière du Web pour mobile et la confirmation par Google de classer les pages en fonction de leur réactivité, il est essentiel que votre site Web puisse s’adapter à une variété d’appareils et de tailles d’écran différents.
Mais la conception Web réactive ne consiste pas simplement à étirer ou à presser votre mise en page pour l’adapter. Il s’agit de fournir un site Web unique de différentes manières tout en conservant le contenu et les fonctionnalités.
Dans cet esprit, voici sept conseils pratiques pour une conception Web réactive.
1. Pensez réactif
Lorsque la conception Web réactive a commencé, les concepteurs ont commencé par planifier les plus grands écrans, puis ont réduit leur taille jusqu’à ce qu’ils atteignent le plus petit. Trop souvent, ils incluaient des éléments sophistiqués qui ne se décomposaient pas bien pour s’adapter à un écran plus petit, ce qui a conduit à ce que la version mobile soit une copie édulcorée de l’original et donne l’impression d’être un peu une réflexion après coup. Aujourd’hui, les appareils mobiles représentent le plus grand volume de trafic pour de nombreux sites Web, de sorte que les utilisateurs mobiles attendent et méritent la même qualité d’expérience de navigation que les autres utilisateurs. Mais cela ne signifie pas non plus que les tailles d’écran plus grandes doivent être ignorées. De nombreuses personnes utilisent encore un grand ordinateur de bureau et encore plus passent d’un écran à l’autre tout au long de la journée.
La meilleure façon d’y remédier est d’adopter une approche «mobile d’abord», en concevant d’abord le plus petit écran, puis en ajoutant des éléments si nécessaire à mesure que vous augmentez la taille de l’écran.
Concentrez-vous sur la conception des points d’arrêt populaires, mais tenez également compte des écarts entre les deux: de nouveaux appareils arrivent sur le marché tous les jours et une taille d’écran à peine utilisée aujourd’hui pourrait être la nouvelle grande nouveauté le mois prochain. Et n’oubliez pas de considérer les personnes qui utilisent leur tablette en mode portrait – cela peut passer sous le radar et finir par ressembler à un bureau écrasé ou à une disposition mobile de base avec beaucoup d’espace gaspillé.
2. Faites attention au contenu
Ne tombez pas dans le piège d’une approche «adaptée à la taille», où vous vous concentrez sur l’adaptation de tous les éléments sur une page sans tenir compte de leur contexte. Commencez par vous concentrer sur le contenu et les fonctionnalités qui sont les plus importants, et soyez brutal sur les éléments qui font face à la hache. Au fur et à mesure que vous progressez dans les différentes tailles d’écran, remettez en question leur inclusion à chaque étape – si vous devez y penser trop longtemps, il n’a probablement pas besoin d’être là. contenu et fonctionnalités dont vous avez besoin, vous pouvez commencer à travailler sur la mise en page. La grande variété de tailles d’écran signifie que le concept traditionnel de «au-dessus du pli» est à peu près mort. Les gens sont habitués au défilement – l’avènement de sites comme Facebook et Twitter y a contribué – alors concevez vos sites de manière à encourager le défilement, tout en conservant les informations les plus importantes vers le haut de l’écran. Cela inclut les coordonnées, les CTA et sur les sites de commerce électronique, le bouton très important «Ajouter au panier».
Hiérarchisez les éléments en fonction de leur importance pour l’utilisateur. Par conséquent, si vous pouvez placer du texte à côté d’une image sur un ordinateur de bureau, réfléchissez bien à ce qui est le mieux à même de capter l’attention de vos utilisateurs sur un appareil mobile et assurez-vous que cela vient en premier. D’autres éléments, tels qu’une image de blog d’accompagnement sur une page d’aperçu, pourraient être supprimés complètement de la version mobile, laissant ainsi l’accent sur le contenu lui-même.
3. Expérimentez la navigation évolutive
La navigation est l’un des aspects les plus difficiles de la conception Web réactive, mais c’est aussi l’un des plus importants. Contrairement à la plupart des règles de conception Web, c’est un endroit où vous n’avez pas besoin d’être cohérent – les grands menus complexes utilisés sur de grands écrans ne fonctionneront tout simplement pas sur les mobiles, il est donc parfaitement acceptable de créer un type de navigation différent pour différents écrans. La navigation cachée est populaire sur de nombreux sites mobiles, avec une simple icône comme le hamburger indiquant la présence du menu. Vous pouvez soit faire glisser le menu vers le bas sur le contenu ci-dessous, soit le superposer sur tout l’écran. Une autre option consiste à opter pour le balayage horizontal, où le contenu disparaît évidemment du côté de l’écran et les utilisateurs peuvent glisser pour l’engager.
Quel que soit votre choix, n’annulez pas complètement la cohérence: votre menu doit avoir une sensation similaire à celle des autres versions en termes de caractéristiques visuelles, même s’il a des fonctionnalités différentes.
4. Tout sur les images
La qualité des images sur les sites Web est cruciale, car elles constituent une grande partie des premières impressions d’un visiteur sur un site. Mais les grandes images ont un effet négatif sur les vitesses de téléchargement des appareils mobiles avec leurs capacités de bande passante plus faibles. nécessaire, tout en reconsidérant des éléments tels que des curseurs qui contiennent plusieurs grandes images.
Optimisez vos images restantes, en les rendant flexibles grâce au dimensionnement adaptatif, et stockez-les dans le format approprié. N’oubliez pas qu’il est peu probable que vous ayez besoin de la fonctionnalité «agrandir l’image» sur un mobile, car l’image sera probablement en plein écran de toute façon. Si vous devez inclure des galeries d’images, optez pour une navigation à défilement long ou utilisez le balayage horizontal pour vous déplacer entre elles.
5. Pensez à la typographie
La typographie que vous choisissez nécessite un examen attentif car de nombreuses polices de caractères qui fonctionnent sur un écran moyen ou grand deviennent trop difficiles à lire correctement lorsqu’elles sont réduites pour les tailles d’écran plus petites, alors testez toujours soigneusement sur différents écrans. – leur fonction doit être évidente, même si elles sont trop grandes, elles peuvent apparaître trop dominantes – et s’assurer qu’il y a un contraste adéquat entre la couleur d’arrière-plan et la police.
Lorsque vous montez dans les différentes tailles d’écran, faites attention à la longueur de ligne de votre contenu – si une ligne est trop longue, elle peut être difficile à lire. Limitez la longueur des lignes à environ 60 à 75 caractères et, sur des écrans plus larges, remplissez l’espace avec une barre latérale ou des images.
6. Optimiser pour les écrans tactiles
La conception Web réactive n’a pas seulement besoin de prendre en compte différentes tailles d’écrans. il doit également être optimisé pour différentes méthodes de saisie. Et les écrans tactiles peuvent être délicats, il est donc préférable d’être généreux avec la taille de vos boutons et vos liens, en visant une zone cliquable d’environ 44 points carrés. Oui, ils sont intuitifs de par leur nature même, mais les aides à la navigation subtiles, telles que les gestes de balayage, sont un ajout précieux.
7. Test sur des appareils réels
Enfin, bien que la planification de votre conception soit une étape cruciale, ne vous fiez pas uniquement à la théorie. Il existe des émulateurs mobiles qui vous aideront à vérifier vos conceptions et vos points d’arrêt CSS, mais rien ne vaut les tests sur la réalité – beaucoup de ces émulateurs ne répliquent que les différentes tailles d’écran mais pas les fonctionnalités des différents systèmes d’exploitation. Vous disposez d’une variété d’écrans de tailles différentes avec lesquels jouer et d’un certain nombre d’utilisateurs différents, et testez vos conceptions à fond. Cela fera souvent apparaître un nouveau point de vue et confirmera que vous êtes sur la bonne voie ou vous montrera où des améliorations peuvent être apportées.
La conception Web réactive évolue et se développe continuellement, et nous n’avons fait qu’effleurer la surface ici. Les meilleures pratiques dans le domaine de la Création site web changent également fréquemment, il est donc avantageux de se tenir au courant des derniers développements. N’oubliez pas que de nombreux utilisateurs ont une faible bande passante, une faible résolution et une faible puissance de traitement sur leurs appareils.Votre site doit donc être simple, bien organisé, propre, facile à utiliser et avoir une belle apparence sur une variété d’écrans différents.
Si vous avez aimer cet article, veillez cliquez ici pour d’autres