5 Bonnes pratiques pour une conception Web réactive

La Création de site Web réactive n’est pas seulement une question de compression et d’étirement.

Il s’agit de proposer un site Web d’innombrables façons en fonction de la largeur de l’écran.

Quoi ajouter? Que supprimer? Comment prioriser ce qui est le plus important? Quelles sont les implications pour les classements de recherche? Et comment faire tout cela avec une seule base de code?

Il faut vraiment un expert pour coder un site Web de manière réactive.

Nous avons donc l’un des meilleurs concepteurs Web réactifs de vous donner un aperçu de ce qu’il faut pour créer un site Web approprié, responsable et réactif.

Que vous engagiez Tim ou décidiez d’ajouter vous-même de la réactivité à votre site Web, conservez-le comme une ressource pour savoir ce qui doit être fait.

Menus de navigation cachés.


Sur des écrans plus petits, le masquage du menu de navigation principal est un bon moyen de simplifier les mises en page. Une icône, un texte ou une combinaison des deux indique à l’utilisateur où se trouve le menu.

Vos options incluent un menu déroulant simple où le menu glisse vers le bas et couvre le contenu principal ci-dessous ou la méthode de superposition où le menu se développe et couvre tout l’écran.

Menus horizontaux à glisser.


Une autre façon d’afficher les menus sur des écrans plus petits consiste à les garder visibles tout en laissant le contenu déborder du bord de l’écran. L’affichage d’une partie du texte coupée indique qu’ils peuvent faire glisser pour révéler.

Le menu de défilement horizontal sur Google est une liste de liens en texte brut, qui débordent du bord de l’écran – un moyen simple d’indiquer plus de contenu à l’utilisateur. Chaque lien texte a un menu déroulant qui apparaît lorsque vous appuyez sur.

Donnez aux boutons et aux liens de grandes zones cliquables.


Plutôt que de réduire la taille des boutons sur mobile, agrandissez-les pour qu’ils soient plus faciles à toucher. En fait, cela ne s’applique pas seulement aux petits écrans, il est bon qu’ils soient grands quel que soit l’appareil, des tablettes tactiles aux ordinateurs de bureau.

Les gros boutons améliorent la convivialité. En plus d’agrandir les boutons, les liens de texte ont l’avantage d’être plus grands. Si, par exemple, vous avez une grille de titres d’actualités, avec un lien texte qui dit “Lire la suite” à l’intérieur de chacun d’eux, plutôt que d’en faire le lien, faites en sorte que tout le contenu bloque un lien, afin que l’utilisateur puisse cliquer n’importe où .

Utilisation plus simple. Une meilleure expérience pour tous.

Équilibrez le poids et la taille des polices.


Le rapport de taille entre les en-têtes et le texte des paragraphes doit être bien équilibré. Les grands en-têtes n’ont pas l’air bien sur mobile, surtout s’ils s’étendent sur quelques lignes. Tout doit être redimensionné de manière appropriée.

Les nouveaux appareils mobiles ont des écrans haute résolution, ce qui rend le texte plus lisible et plus facile à lire. Vous pouvez vous permettre d’aller un peu plus petit sur les écrans mobiles et d’augmenter la taille des polices lorsque vous obtenez un écran plus grand.

Mettez les informations importantes vers le haut sur le mobile.


Afficher les numéros de téléphone, les coordonnées, acheter maintenant des appels à l’action, etc. en haut sur mobile. Les utilisateurs mobiles veulent des informations rapidement, mais cela fonctionne également bien sur n’importe quel appareil.

Même avec des tailles de navigateur si variées maintenant et l’idée du «pli» n’existant plus vraiment, placer un appel clé à l’action en haut de la page est toujours important. Par exemple, sur une page de détails d’un produit de commerce électronique, il est bon que le bouton “Ajouter au panier” soit visible par la majorité des utilisateurs, sans qu’ils aient à faire défiler.

Si vous avez aimé cet article, cliquer ici pour d’autres




Admin

Revenir en haut de page