Share
La conception Web réactive est un must de nos jours. Étant donné le nombre croissant d'utilisateurs de leur appareil mobile pour effectuer des recherches avant d'acheter un produit et pour se tenir au courant des dernières nouvelles, votre entreprise ne peut se permettre d'avoir un site Web non réactif..
Si vous ajoutez à cela le fait que Google privilégie les sites Web adaptables aux appareils mobiles dans leur algorithme de recherche, il devient évident que la conception adaptative est là pour rester. Si vous ne faites que démarrer votre site, les astuces pour une conception Web réactive décrites dans cet article vous aideront à concevoir un site attrayant et réactif. Et si vous modifiez un site existant, les mêmes conseils vous seront également utiles..
Les conseils suivants pour la conception de sites Web mobiles et la conception réactive vous aideront à vous assurer que votre site est à la fois réactif et compatible avec les appareils mobiles. Voici quelques-uns de nos meilleurs conseils pour une conception Web réactive:
Comprenez que les gens utiliseront les sites Web différemment sur les ordinateurs de bureau que sur les appareils mobiles. Pensez à interroger les visiteurs de votre site Web ou à utiliser des analyses pour déterminer pourquoi ils accèdent à votre site avec un appareil mobile et quelles pages et quels éléments ils ont le plus accès. Ces informations vous aideront à comprendre quelles pages et autres éléments de votre site Web doivent être facilement accessibles sur des écrans plus petits..
Par exemple, s'ils effectuent une recherche rapide sur votre site pour accéder à vos informations de contact, assurez-vous que votre page de contact s'affiche bien sur la navigation mobile..
Avant de concevoir votre site, il est utile de commencer par planifier la mise en page. En fait, la plupart des concepteurs Web commencent par créer une structure en fil de fer puis la conception visuelle du site Web avant de passer à la partie de codage. Cela vous aidera non seulement à créer l'apparence exacte que vous souhaitez, mais également à faciliter pour vous ou votre concepteur la personnalisation du modèle et son intégration transparente à votre marque..
Assurez-vous de créer plusieurs prototypes de votre site Web et de les tester sur différentes tailles d'écran pour vous assurer que le design final sera réactif. Voici quelques outils que vous utilisez pour créer des prototypes réactifs:
La navigation est la partie la plus importante de tout site web. Il sert de feuille de route pour vos visiteurs et leur permet d’accéder facilement aux autres pages de votre site. Sur les versions de bureau de votre site, votre navigation comportera généralement des liens visibles vers toutes les pages importantes. Sur les appareils mobiles, la pratique habituelle consiste à utiliser une icône hamburger et à masquer les liens situés derrière celle-ci..
Cependant, ce n'est pas toujours la meilleure approche car certains utilisateurs peuvent ne pas se rendre compte qu'ils doivent cliquer sur l'icône pour afficher le menu et rester frustrés, car ils ne peuvent pas consulter d'autres pages. Une meilleure approche consisterait à laisser les éléments de menu les plus importants visibles même sur des écrans plus petits et à utiliser le menu hamburger pour le reste des liens. Vous pouvez également inclure des liens vers d’autres pages dans le texte de votre page d’accueil pour faciliter la navigation..
Les images jouent un rôle important dans la conception de votre site Web. Ils peuvent vous aider à établir un lien émotionnel avec vos visiteurs et leur permettre de visualiser le produit qu'ils souhaitent acheter. En tant que tel, il est essentiel que vos images soient optimisées pour le Web..
Cela signifie que les images doivent être enregistrées au format approprié: JPG pour les images photographiques ou panoramiques et PNG-8 pour les icônes et les logos nécessitant un arrière-plan transparent. De plus, vous devez réduire la taille de l'image à l'aide d'un outil tel que TinyJPG et envisager d'utiliser des images optimisées pour différents points d'arrêt mobiles afin de réduire les problèmes de redimensionnement et de bande passante..
Une autre façon d’approcher responsive design consiste à concevoir d’abord une version mobile de votre site Web. Cela vous permet de voir à quoi ressembleront les images, le texte, les logos et d’autres éléments sur des écrans plus petits. S'ils s'affichent sans problème, vous ne devriez pas rencontrer de problèmes pour adapter votre conception à des écrans plus grands..
Les requêtes médias ont d'abord été esquissées dans le cadre de la proposition initiale de CSS, mais ne sont devenues une réalité que lorsque les navigateurs leur ont apporté un support officiel en 2012. Le rôle principal des requêtes média est qu'elles vous permettent d'optimiser la mise en page de votre site Web. pour différentes largeurs d'écran.
Lors de l'utilisation de requêtes multimédias, le contenu répondra à différentes conditions sur des périphériques spécifiques. En un mot, une requête de média va vérifier la résolution, la largeur et l'orientation du périphérique et afficher le jeu de règles CSS approprié. Un exemple de requête multimédia ressemble à ceci:
@media screen et (min-width: 500px) vos règles CSS ici
Il va sans dire que les formulaires sur votre site doivent s'adapter à la largeur et à la taille de l'écran. Cependant, vous pouvez aller plus loin et vous assurer que les champs de saisie déclenchent le type de clavier approprié. Vous pouvez facilement le faire en ajoutant un élément d'entrée à vos champs de formulaire..
Les champs qui nécessitent une saisie de texte, tels que nom, email, adresse, etc., doivent déclencher un clavier textuel, tandis que tout champ de saisie nécessitant un numéro doit déclencher immédiatement le clavier numérique. Cela améliore la convivialité mobile de votre site Web ainsi que l'expérience utilisateur..
N'oubliez pas de porter une attention particulière aux boutons de votre site Web. Parce que l’écran est si précieux, il est facile de tomber dans le piège et de réduire la taille de vos boutons afin qu’ils tiennent sur l’écran. Cependant, cela les rend également plus difficiles à cliquer.
Assurez-vous que vos boutons sont faciles à reconnaître:
En ce qui concerne la taille, envisagez d’utiliser un bouton de remplissage sur votre bouton pour augmenter la zone cliquable. Vous pouvez également suivre les recommandations de conception du matériau pour l’accessibilité des boutons et vous assurer qu’ils atteignent 36dp. (1dp = 1px).
En matière de texte, vous voulez vous assurer que le texte est lisible sur des écrans plus petits. Une bonne taille pour votre copie corporelle est 16px ou 1em, puis ajustez la taille de vos en-têtes en conséquence. Dans le même temps, vous voudrez ajuster la hauteur de ligne de votre texte à 1.5em pour vous assurer que vos lignes de paragraphe ont suffisamment de temps pour respirer..
Une autre astuce pour la conception de sites Web mobiles consiste à utiliser une police lisible. Évitez les polices décoratives ou de script pour la copie de corps ou les éléments de menu, car elles sont difficiles à lire, en particulier sur les écrans plus petits..
L’utilisation des micro-interactions est l’une des principales tendances qui se fait jour lentement dans la conception Web. Au cours des années précédentes, les animations et les fonctionnalités interactives étaient peut-être considérées comme "intéressantes" pour la majorité des sites Web commerciaux. Cependant, à mesure que les concepteurs s’intéressaient de plus en plus à l’expérience utilisateur, l’utilisation d’animations a fait un bond en avant, en particulier dans les formulaires..
Ils fournissent aux utilisateurs un retour rapide d'informations, ce qui est particulièrement utile sur les appareils mobiles, au lieu de recharger la page, ce qui peut augmenter considérablement l'utilisation de votre bande passante. Prenons cet exemple d’une entreprise australienne de nettoyage de fin de bail. Je leur ai parlé de leur utilisation des microinteractions. Voici ce qu'ils avaient à dire:
Notre formulaire de commande a été conçu pour aider les résidents de Sydney à obtenir facilement un devis de nettoyage de fin de bail. Nous voulions vraiment souligner le fait que c’était vraiment instantané et que rien ne l’a fait plus que par le biais d’une microinteraction. Lorsque vous demandez un devis, un reçu s’affiche derrière le formulaire, indiquant ainsi le prix total de votre lien. Nous pensons que ce petit moment de "ta-da" a vraiment augmenté nos taux d'achèvement pendant le processus de commande.
Un autre bon exemple de micro-interaction provient du site Web du Café Noir Studio. Leur boutique en ligne présente des cœurs animés qui traversent votre écran lorsque vous ajoutez un article à votre panier, ce qui incite les clients à apprécier immédiatement:
Vous pouvez gagner beaucoup de temps à concevoir un site Web réactif si vous ajoutez un cadre réactif à votre flux de travail. Un framework HTML tel que Bootstrap utilisé dans un modèle HTML constitue un bon point de départ si vous souhaitez concevoir des sites Web simples et statiques..
Vous pouvez également tirer parti des thèmes WordPress responsive prédéfinis si vous souhaitez créer un site Web plus complexe et intégrer un blog à votre stratégie marketing. De tels frameworks sont également un excellent choix si vous n'êtes pas un programmeur expérimenté mais que vous voulez tout faire vous-même..
Le design minimaliste a gagné en popularité au cours des dernières années et pour cause. Il élimine tout le fouillis, permet aux visiteurs de se concentrer plus facilement sur votre contenu, améliorant ainsi les taux de conversion, et accélère le chargement de votre site Web, car il utilise moins d'éléments. Cela convient également à la conception Web réactive, car cela peut vous aider à mettre en évidence des zones importantes du site Web et à attirer l'attention sur vos appels à l'action..
L'inclusion de boutons de partage sur votre site Web peut aider votre contenu à obtenir plus de visibilité et à générer plus de trafic. Cependant, les boutons de partage peuvent souvent bloquer votre contenu, rendant la lecture difficile sur des écrans plus petits. Assurez-vous que les boutons de partage s'adaptent bien sur des écrans plus petits en les testant sur un appareil mobile ou envisagez de les désactiver sur des écrans d'une taille inférieure à 768 pixels..
Une fois que vous avez mis en œuvre les astuces pour la conception Web réactive ci-dessus, il est rentable de vérifier si votre site est maintenant réactif. Il existe de nombreux outils en ligne qui vous permettront de tester la réactivité de votre site. Voici les trois principaux outils que nous vous recommandons d'utiliser:
Google a sa propre version du test compatible avec les appareils mobiles, qui est plutôt simple. Vous entrez l'URL de votre site Web et cliquez sur Analyser, puis attendez les résultats. Si votre site est compatible avec les appareils mobiles, un message de confirmation vert s’affiche. Si ce n'est pas le cas, le test vous montrera les raisons pour lesquelles votre site Web ne l'a pas réussi et vous indiquera des ressources pour vous aider à résoudre les problèmes..
Screenfly de QuirkTools vous montrera à quoi ressemblera votre site Web sur différentes tailles d'écran. Cet outil ne vous aidera pas en ajoutant des astuces et des suggestions utiles. Toutefois, vous pourrez voir comment votre site Web apparaît sur les smartphones, les ordinateurs de bureau et même les grands écrans de télévision..
Enfin, MobileTest.me vous permet de choisir un appareil mobile particulier, d'entrer votre URL et d'interagir avec votre site comme si vous vous trouviez sur l'appareil spécifié. Cet outil est particulièrement utile car vous pouvez voir comment votre site Web fonctionne sur un appareil mobile, tester des formulaires et des boutons et savoir si vos visiteurs bénéficieront d'une bonne expérience utilisateur. Vous pouvez l'utiliser seul ou avec les deux outils ci-dessus pour vous assurer que votre site Web est vraiment réactif..
La création d'une conception Web réactive n'est plus une option. C'est une nécessité. Une conception Web réactive facilite la consultation de votre site par tout le monde et peut avoir une incidence sur la réputation de votre marque ainsi que sur votre taux de conversion. Grâce aux conseils et astuces de conception de sites Web adaptatifs ci-dessus, vous pourrez donner à votre site Web professionnel une superbe apparence, quel que soit le périphérique utilisé par vos visiteurs, et leur garantir ainsi une expérience utilisateur exceptionnelle..
Accentsconagua