Votre guide de conception Web réactive pour WordPress
Publié: 2022-09-29Il y a de fortes chances que plus de la moitié du trafic de votre site Web provienne d'appareils mobiles. Utilisez-vous une conception Web réactive pour WordPress?
L'une des plus grandes erreurs que vous puissiez commettre lors de la création d'un site Web est de concevoir et de créer uniquement pour les navigateurs de bureau. Nous avons compris. Nous avons tous été coupables de cela auparavant. La plupart d'entre nous ne construisons pas de sites Web sur nos téléphones. Nous les construisons à partir de notre configuration préférée, que ce soit sur un ordinateur portable devant le téléviseur ou dans un bureau avec deux écrans géants côte à côte.
Mais construire pour le bureau et traiter le mobile comme une réflexion après coup aliène la plupart des visiteurs de votre site Web. Vous ne dirigeriez pas un restaurant de restauration rapide où la majorité de vos clients se trouvent au service au volant et passeriez tout votre temps à attendre les gens dans la salle à manger. Plus de la moitié de vos revenus proviendront du service au volant, vous devez donc optimiser vos opérations là-bas tout en servant les clients du restaurant.
Cet article montre comment et pourquoi votre site Web doit fonctionner pour les personnes sur toutes les tailles d'écran. Vous apprendrez également les meilleures façons d'intégrer une conception Web réactive pour les sites Web WordPress.
Pourquoi la conception Web réactive est essentielle
Vous connaissez la frustration de travailler avec de petits objets comme essayer d'ouvrir un fermoir de collier ou de mettre des chaussures sur une Barbie ? C'est comme ça pour les visiteurs mobiles lorsque votre site Web n'est pas réactif.
Lorsque votre site Web ne s'adapte pas à la taille de l'écran, les visiteurs sont plus susceptibles de rencontrer des difficultés. Le responsive design est une manière de construire des sites web dont la conception et la mise en page s'adaptent à la taille des écrans des utilisateurs.
Les problèmes liés aux conceptions de sites Web non réactifs incluent :
- Les boutons et les navigations sur le site sont trop petits pour être cliqués
- Le texte est trop petit pour être lu
- Les images, les tableaux ou tout autre contenu sont trop larges pour l'écran et sont coupés
Les visiteurs du site Web ont peut-être négligé ces défis à un moment donné. Mais maintenant, les gens s'attendent à ce que votre site fonctionne parfaitement sur leur téléphone. Si votre site n'est pas adapté aux mobiles, les visiteurs partiront et trouveront le site d'un concurrent qui fonctionne sur leur téléphone.
Les clients ne sont pas les seuls à vous pénaliser par manque d'optimisation mobile. Les moteurs de recherche vérifient également régulièrement la compatibilité des sites avec les mobiles. Ils pénaliseront votre site avec des classements de recherche inférieurs s'il n'est pas conçu pour fonctionner sur de petits écrans.
Comment vérifier la compatibilité mobile de votre site
Google prend la convivialité mobile tellement au sérieux qu'il a créé un outil spécial que vous pouvez utiliser pour tester votre site.
Voici comment vérifier la compatibilité de votre site avec les mobiles :
- Allez sur https://search.google.com/test/mobile-friendly
- Saisissez le domaine de votre site Web
- Cliquez sur l'URL de test
- Attendez vos résultats. Cela pourrait prendre quelques minutes.
- Consultez votre rapport. Si l'outil détecte des erreurs, il répertorie ce que vous devez corriger pour rendre votre site adapté aux mobiles.
Comment mettre en œuvre une conception Web réactive pour WordPress
Utiliser une conception Web réactive pour votre site Web WordPress est simple. Vous pouvez soit choisir un thème réactif, soit modifier votre thème ou votre design existant pour qu'il soit réactif.
Choisir un thème réactif
Si vous choisissez un thème moderne régulièrement mis à jour, il y a de fortes chances que ce soit un thème réactif. Les développeurs de thèmes ne perdront pas de temps à créer des thèmes non réactifs. Ils savent que la plupart des utilisateurs de WordPress veulent un thème qui fonctionne sur toutes les tailles d'écran.
Lorsque vous prévisualisez des thèmes, ne vous contentez pas de les regarder sur un bureau. Utilisez votre téléphone ou un simulateur pour voir à quoi cela ressemble sur un appareil mobile.
Modification de votre thème ou design existant
Vous pouvez modifier un thème ou un design non réactif en ajustant le CSS du thème. Ce tutoriel de W3Schools est un excellent endroit pour apprendre à écrire votre propre CSS pour mettre en œuvre une conception Web réactive.
Si vous utilisez un CSS personnalisé, lisez cet article sur la façon de conserver le CSS personnalisé lors de la mise à jour de votre thème .
Considérations sur la conception réactive dans WordPress
Que vous choisissiez un thème réactif ou que vous encodiez le vôtre, soyez à l'affût des éléments qui pourraient rendre votre site Web peu convivial sur les appareils mobiles.
Vérifiez vos plugins
Les plugins peuvent modifier la conception ou la mise en page de votre site Web. Lorsque vous utilisez un nouveau plugin pour ajouter des fonctionnalités à votre site, testez-les sur de petits écrans. Ne laissez pas les options de votre plugin annuler la réactivité de votre thème.
Soyez prudent avec les fenêtres contextuelles
Les pop-ups peuvent être un problème sur les appareils mobiles. Quiconque recherche une recette en ligne peut témoigner des problèmes qu'elle cause. Alors que vous faites défiler une histoire décousue sans rapport avec la recette, une fenêtre contextuelle vous encourage à vous abonner à une newsletter ou à télécharger un livre de cuisine. Le problème est que la fenêtre contextuelle est plus grande que l'écran de votre mobile et que vous ne pouvez pas voir l'option de fermeture. Ne soyez pas cette personne. Désactivez les grandes fenêtres contextuelles sur les petits écrans pour maintenir la convivialité mobile.
Attention aux longueurs de menu
De nombreux thèmes sont réactifs par défaut, mais cela ne signifie pas que toutes les conceptions de bureau se traduisent facilement en sites mobiles réactifs. Les menus de navigation peuvent créer plusieurs problèmes. Si votre menu est incroyablement long avec plusieurs niveaux, il peut être fastidieux de l'utiliser dans une liste déroulante mobile. Envisagez d'utiliser une version simplifiée de votre navigation pour les appareils mobiles.
Comment la qualité de l'hôte affecte la convivialité mobile
Au-delà de votre conception Web réactive, la vitesse de votre site joue un rôle important dans ce que les visiteurs mobiles pensent de votre site Web. Lorsqu'ils ne sont pas connectés au Wi-Fi, les navigateurs mobiles traitent souvent des connexions Internet beaucoup plus lentes. Un site à chargement lent avec une connexion Internet lente est une recette pour un désastre.
Vous ne pouvez pas faire grand-chose pour réparer les connexions Internet lentes et la mauvaise couverture cellulaire, mais vous pouvez vous assurer que votre site est aussi rapide que possible. La rapidité de chargement de votre site dépend beaucoup de la qualité de votre hébergeur. Chez Pressable, nos serveurs ont été construits par les mêmes génies derrière WordPress.com, WordPress VIP et WooCommerce. Nous connaissons WordPress de fond en comble et avons construit les serveurs les meilleurs et les plus rapides pour les sites WordPress .
Inscrivez-vous aujourd'hui et commencez à découvrir la différence Pressable.
