Avec la croissance constante du Web mobile et Google confirmant qu'il classe 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 se limite pas à étirer ou à comprimer 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 sur les meilleures 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 jusqu'à ce qu'ils aient atteint le plus petit. Trop souvent, ils incluaient des éléments fantaisistes qui ne se décomposaient pas bien pour s'adapter à un écran plus petit, ce qui a conduit la version mobile à être une copie édulcorée de l'original et à donner l'impression d'être 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. Beaucoup de gens utilisent encore un grand bureau, et encore plus passent d'un écran à l'autre tout au long de la journée.

La meilleure façon d'aborder ce problème est d'adopter une approche "mobile d'abord", en concevant d'abord pour 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 pour les points d'arrêt populaires, mais tenez également compte des écarts entre les deux - de nouveaux appareils arrivent sur le marché chaque jour et une taille d'écran à peine utilisée aujourd'hui pourrait être la nouvelle nouveauté du mois prochain. Et n'oubliez pas de considérer les personnes qui utilisent leurs tablettes 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 perdu.

2. Faites attention au contenu

Ne tombez pas dans le piège d'une approche "adaptée à la taille", où votre objectif est d'adapter 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 côtelette. Au fur et à mesure que vous augmentez les différentes tailles d'écran, remettez en question leur inclusion à chaque étape - si vous devez y réfléchir trop longtemps, il n'est probablement pas nécessaire d'y être. Une fois que vous avez défini le contenu et les 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 pratiquement mort. Les gens sont habitués au défilement - l'avènement de sites comme Facebook et Twitter y a veillé - alors concevez vos sites de manière à encourager le défilement, mais conserve 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 très important bouton "Ajouter au panier".

Hiérarchisez les éléments en fonction de leur importance pour l'utilisateur. Ainsi, si vous pouvez insérer du texte à côté d'une image sur un ordinateur de bureau, réfléchissez bien à ce qui est le plus efficace pour 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 complètement supprimés de la version mobile, laissant l'accent sur le contenu lui-même.

3. Expérimentez avec une 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 les 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 tailles. La navigation masquée est populaire sur de nombreux sites mobiles, avec une simple icône telle que le burger 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 balayer pour l'engager.

Quel que soit votre choix, ne niez pas complètement la cohérence - votre menu doit avoir une sensation similaire aux 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 images volumineuses ont un effet négatif sur les vitesses de téléchargement des appareils mobiles avec leurs faibles capacités de bande passante. Tout comme le contenu, vous devez remettre en question l'inclusion de chaque image pour chaque taille d'écran et n'inclure que celles qui sont absolument nécessaires, tout en reconsidérant des éléments tels que les curseurs qui contiennent plusieurs grandes images.

Optimisez vos images restantes, en les rendant flexibles avec un dimensionnement adaptatif, et stockez-les en utilisant 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 typographie

La typographie que vous choisissez nécessite une attention particulière 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. Équilibrez soigneusement vos titres – leur fonction doit être évidente, bien que s'ils sont trop grands, ils peuvent sembler trop dominants – et assurez-vous qu'il y a un contraste adéquat entre la couleur d'arrière-plan et la police.

Au fur et à mesure que vous augmentez 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. Conservez des longueurs de ligne d'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 ne doit pas seulement tenir compte des 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. Vous devez également optimiser votre expérience utilisateur pour les écrans tactiles. Oui, ils sont intuitifs de par leur nature même, mais des aides à la navigation subtiles, telles que des gestes de balayage, sont un ajout précieux.

7. Testez 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 vraie chose - beaucoup de ces émulateurs ne reproduisent que les différentes tailles d'écran mais pas les fonctionnalités des différents systèmes d'exploitation. Assurez-vous d'avoir une variété d'écrans de différentes tailles avec lesquels jouer et un certain nombre d'utilisateurs différents, et testez soigneusement vos conceptions. Cela apportera souvent 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 ce domaine 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 bande passante faible, 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.