7 conseils WordPress pour un site Web adapté aux mobiles


Il n'y a rien de pire que d'avoir un site Web de bureau magnifique et un site mobile qui ne fonctionne pas correctement.

La plupart des correctifs de conception sont simples mais nécessitent une attention si vous voulez que les visiteurs restent sur votre tout en naviguant sur un appareil mobile.

Cet article mettra en évidence sept problèmes et correctifs pour les sites Web adaptés aux mobiles.

  • Les modifications apportées ne s'affichent pas sur mobile
  • Navigation peu conviviale
  • Disposition réactive cesse de fonctionner soudainement
  • Les images prennent trop de temps à charger
  • Le contenu le plus important n'est pas évident
  • Trop d'informations
  • Données pour petits écrans
  • Les mises à jour de sites Web adaptés aux mobiles ne s'affichent pas

    Vous venez de passer beaucoup de temps effectuer des mises à jour de votre site Web. Ils ont fière allure sur votre bureau, mais n'apparaissent pas sur votre appareil mobile.

    L'une des raisons les plus courantes est la mise en cache. Votre navigateur mobile peut afficher une ancienne version de votre site que vous avez précédemment téléchargée. Une autre raison peut être que votre site Web conserve l'ancienne version de votre page et n'affiche pas vos modifications.

    Si tel est le problème, vous devrez vider le cache pour télécharger la version révisée. Un plugin de mise en cache tel que WP Super Cache, W3 Total Cache ou WP Fastest Cache peut aider à résoudre ce problème.

    In_content_1 tout: [300x250] / dfp: [640x360]->

    Voici quatre étapes pour vous aider à vider le cache de votre site Web et votre navigateur pour permettre à la nouvelle version de s'afficher sur votre site mobile.

    1. Actualisez votre navigateur plusieurs fois sur votre ordinateur de bureau et appareil mobile.
    2. Testez votre site Web sur différents appareils mobiles.
    3. Effacez votre site avec un plugin de mise en cache.
    4. Vérifiez auprès de votre hébergeur pour voir si il existe un autre système de mise en cache sur votre serveur qui doit être effacé.
    5. Navigation peu conviviale

      Il peut être difficile de créer un menu de navigation qui fonctionne bien sur les appareils mobiles. Si la navigation de votre site Web comporte de nombreux éléments et sous-menus, il est encore plus difficile de tout compresser sur un écran plus petit.

      Par exemple, si vous n'avez que trois ou quatre éléments dans la navigation de votre site Web, cela devrait bien paraître sur le mobile. Cependant, si vous avez plus d'éléments et de sous-menus, ils s'empileront les uns sur les autres et auront l'air bondés.

      Voici quelques façons de résoudre ce problème pour un site Web adapté aux mobiles:

      • Transformez votre navigation en menu déroulant pour les appareils mobiles.
      • Affichez votre menu de navigation en tant qu'éléments de bloc, afin qu'ils apparaissent verticalement.
      • Utilisez une icône de menu qui peut être basculé pour occuper moins d'espace.
      • Créez un menu de navigation mobile à l'aide de jQuery.
      • Utilisez le menu Hamburger (de nombreux thèmes incluent cela en option ou vous pouvez  utiliser un plugin.)
      • La mise en page réactive cesse de fonctionner soudainement

        Si votre mobile est adapté le site cesse soudainement de fonctionner, cela peut être dû à un plugin sur votre site.

        L'installation d'un nouveau plugin ou une mise à jour d'un plugin existant peut provoquer un conflit avec d'autres qui affecte votre mise en page réactive.

        Commencez par désactiver chaque plugin un par un pour voir si c'est la cause. Ne les désactivez pas tous en même temps ou vous ne saurez pas quel plugin pourrait être le coupable.

        Les modifications de code sont une autre cause possible. Si vous avez modifié un code accidentellement ou intentionnellement, restaurez la base de code d'origine et voyez si votre site Web réactif recommence à fonctionner.

        Lorsque vous vérifiez la réactivité de votre site pour votre mobile, vous devez toujours le tester sur un appareil mobile.

        Parfois, il semble fonctionner lors du redimensionnement de la fenêtre du navigateur sur votre bureau mais ne s'affiche pas correctement sur mobile.

        Si une ligne de code manque dans un fichier d'en-tête HTML, il peut briser la conception réactive. Cette seule ligne de code manquant fera en sorte que votre appareil mobile suppose que le site que vous consultez est un site Web de grande taille.

        Le site rendu sera la taille de la fenêtre d'affichage (la taille de la zone de la page Web visible par l'utilisateur).

        Pour corriger votre site adapté aux mobiles, ajoutez la ligne de code suivante dans la section d'en-tête:

        Parfois, lorsqu'un thème est mis à jour, ce code peut disparaître.

        Les images prennent trop de temps à charger

        Optimiser les images et réduction de la taille du fichier image est logique. Les images volumineuses non optimisées peuvent ralentir la vitesse de chargement de vos pages Web. Cela peut être frustrant pour les utilisateurs mobiles.

        WordPress version 4.4 et supérieure sert automatiquement la plus petite version d'une image sur votre serveur.

        Si vous utilisez déjà la dernière version de WordPress , mais votre site ne se charge toujours pas assez rapidement, vous pouvez:

        • Installer un plugin tel que  Optimisation d'image fluide, compression et chargement différé pour redimensionner et optimiser vos images
        • Utilisez un outil de compression et d'optimisation avant de télécharger des images sur votre site, telles que TinyPNG, Compresser JPEG ou Optimiseur d'image en ligne.
        • Le contenu le plus important n'est pas évident

          Certains sites Web sont chargés avec beaucoup de contenu inutile pour remplir l'espace vide lorsqu'ils sont ouverts sur un bureau.

          Les sites Web développés sans être conscients des utilisateurs mobiles entrent généralement dans cette catégorie. Ces sites prennent plus de temps et de bande passante à charger.

          Si les pages ne sont pas conçues de manière appropriée pour les appareils mobiles, une partie du contenu peut ne pas apparaître sur mobile sans beaucoup de défilement.

          La plupart du temps, un élément de votre page Web apparaîtra à sens unique sur un ordinateur et complètement différent sur un appareil mobile.

          Par exemple, une page de tarification avec trois colonnes les affichera côte à côte sur un ordinateur.

          Cependant , sur un appareil mobile, les colonnes sont empilées les unes sur les autres car la taille de l'écran est plus petite. Ce comportement est à prévoir.

          Assurez-vous que votre tableau de prix est en première position sur votre page Web afin qu'il apparaisse en premier lorsqu'il est affiché sur mobile. Si vous avez beaucoup de texte sur votre tableau, les utilisateurs mobiles devront faire défiler vers le bas pour le voir et peut-être pas.

          Pour une expérience utilisateur mobile la plus optimale, placez les éléments de contenu les plus critiques vers le haut de la page. Si un utilisateur a besoin de faire défiler beaucoup avant de pouvoir afficher votre contenu, il ne le fera probablement pas.

          Trop d'informations

          Sites avec des utilisateurs complexes- des éléments d'interface tels que des tableaux, des formulaires en plusieurs étapes et des fonctionnalités de recherche avancées peuvent produire une mauvaise expérience utilisateur mobile.

          Ces éléments contiennent trop d'informations qui peuvent encombrer un écran mobile et interférer avec un utilisateur qui trouve les informations qu'ils veulent.

          Une approche consiste à supprimer ou masquer du contenu aux utilisateurs mobiles. Cependant, ce n'est pas une solution idéale pour les visiteurs qui souhaitent avoir accès à ces éléments.

          Pour éviter ce problème, optimisez au maximum votre site mobile. Supprimez également tous les éléments inutiles tout en vous concentrant sur la structure principale de votre site Web.

          Données pour petits écrans

          Des tableaux complexes avec de nombreuses lignes et colonnes peuvent être un problème lorsqu'il est affiché sur de petits écrans mobiles. La meilleure solution consiste à utiliser des tableaux réactifs.

          Un plugin tel que  Tableau réactif WP peut rendre cela facile à réaliser.

          Comme avec le tableau de prix ci-dessus, lorsqu'elles sont affichées sur un appareil mobile, les colonnes seront empilées sur s'adapter à l'écran plus petit.

          Les autres façons d'afficher les données sur les appareils mobiles incluent:

          • Créer un petit tableau sans la disposition de la grille pour éviter d'avoir à faire défiler horizontalement.
          • Basculer un tableau sur le côté pour s'adapte mieux sur un écran plus petit.
          • Remplacement de tableaux plus grands par des tableaux plus petits qui pointent vers la version complète.
          • Conversion de tableaux en diagrammes circulaires.
          • Comme l'utilisation mobile augmente de façon exponentielle, il est impératif que les sites Web d'entreprise soient optimisés avec des versions adaptées aux mobiles. Améliorez l'expérience utilisateur sans sacrifier les fonctionnalités en suivant les étapes ci-dessus.

            Vous devez également toujours surveiller les performances de votre site et apporter des modifications si nécessaire pour améliorer les performances et l'expérience utilisateur.

            7 conseils pour éradiquer le spam sur WordPress

            Related posts:


            14.10.2019