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 attrayant et un site mobile qui ne fonctionne pas correctement.

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

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

  • Les(Are) modifications apportées ne s'affichent pas sur mobile
  • Navigation peu conviviale
  • La mise en page(Responsive Layout) 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 du site Web adapté aux mobiles ne s'affichent pas(Mobile Friendly Website Updates Not Showing Up)

Vous venez de passer beaucoup de temps à mettre à jour 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.

Vous trouverez ci-dessous 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 adapté aux mobiles.

  1. Actualisez votre navigateur plusieurs fois sur votre ordinateur de bureau et votre 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 s'il existe un autre système de mise en cache sur votre serveur qui doit être effacé.

Navigation peu conviviale(Unfriendly Navigation)

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 presser 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 mobile. Cependant, si vous avez plus d'éléments et de sous-menus, ils s'empileront les uns sur les autres et sembleront encombrés.

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

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

La mise en page réactive cesse de fonctionner soudainement(Responsive Layout Stops Working Suddenly)

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

L'installation d'un nouveau plugin ou d'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 s'il en 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 changements de code(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é mobile de votre site, vous devez toujours le tester sur un appareil mobile. 

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

S'il manque une ligne de code dans un fichier d'en-tête HTML , cela peut casser la conception réactive. Cette seule ligne de code manquante fera supposer à votre appareil mobile que le site que vous consultez est un site Web de taille normale.

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

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

<meta name=”viewport” content=”width=device-width”>

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

Les images prennent trop de temps à charger(Images Are Taking Too Long to Load)

L'optimisation des images et la réduction de la taille du fichier image(reducing image file size) sont logiques. Les images volumineuses qui ne sont pas 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 que votre site ne se charge toujours pas assez rapidement, vous pouvez :

Le contenu le plus important n'est pas évident(Most Important Content Isn’t Obvious)

Certains sites Web sont chargés avec beaucoup de contenu inutile pour remplir l'espace vide lorsqu'ils sont ouverts sur un ordinateur de 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 aura une apparence différente sur un ordinateur et complètement différente sur un appareil mobile.

Par exemple, une page de tarification à 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(Make) -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 pourraient ne pas le faire.

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

Trop d'informations(Too Much Information)

Les sites avec des éléments d'interface utilisateur compliqués tels que des tableaux, des formulaires en plusieurs étapes et des fonctionnalités de recherche avancées peuvent produire une expérience utilisateur mobile médiocre.

Ces éléments contiennent trop d'informations qui peuvent encombrer un écran mobile et empêcher un utilisateur de trouver les informations qu'il souhaite.

Une approche consiste à supprimer ou à masquer certains contenus 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 autant que possible votre site adapté aux mobiles. Supprimez également tous les éléments inutiles tout en vous concentrant sur la structure de base de votre site Web.

Données pour petits écrans(Data For Small Screens)

Les tableaux complexes avec de nombreuses lignes et colonnes peuvent poser problème lorsqu'ils sont affichés sur de petits écrans mobiles. La meilleure solution consiste à utiliser des tableaux réactifs.

Un plugin tel que WP Responsive Table peut rendre cela facile à accomplir.

Comme pour le tableau des prix ci-dessus, lorsqu'il est affiché sur un appareil mobile, les colonnes seront empilées pour s'adapter au plus petit écran.

Voici d'autres façons d'afficher des données sur les appareils mobiles :

  • Création d'un tableau plus petit sans la disposition en grille pour éviter le besoin de défilement horizontal.
  • Retourner une table sur le côté pour mieux s'adapter à un écran plus petit.
  • Remplacement des tables plus grandes par des tables plus petites liées à la version complète.
  • Conversion de tableaux en camemberts.

Comme l'utilisation mobile connaît une croissance exponentielle, il est impératif que les sites Web des entreprises soient optimisés avec des versions adaptées aux mobiles. Améliorez(Enhance) 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.



Axelle Derambure

About the author

Je suis un ingénieur windows,ios,pdf,erreurs,gadgets avec plus de 10 ans d'expérience. J'ai travaillé sur de nombreuses applications et frameworks Windows de haute qualité tels que OneDrive for Business, Office 365, etc. Mes travaux récents ont inclus le développement du lecteur pdf pour la plate-forme Windows et travaillé à rendre les messages d'erreur plus clairs pour les utilisateurs. De plus, je suis impliqué dans le développement de la plate-forme ios depuis quelques années maintenant et je connais très bien ses fonctionnalités et ses particularités.


Related posts