web-dev-qa-db-fra.com

Google marque à tort mon site convivial pour mobile comme non convivial

J'ai un site pour créer des mots de passe aléatoires: http://passwordcreator.org

J'ai été très surpris de recevoir une notification indiquant que le site posait des problèmes de téléphonie mobile, car il était adapté aux mobiles. Voici ce dont Google se plaint:

Taille du contenu dans la fenêtre d'affichage

Google se plaint des tableaux en bas de page. Les données tabulaires sont presque impossibles à intégrer dans la largeur d'un appareil mobile.

Seules les tables situées au bas de la page sont en dehors de la fenêtre d'affichage. Ils ne poussent pas le contenu en haut de la page hors de la fenêtre d'affichage. Si un utilisateur arrive aussi loin dans la page et s'intéresse à ces données, je n'ai pas d'autre choix que de leur permettre de faire défiler à droite.

Le seul remède que je vois serait de cacher ces tableaux sur des écrans plus petits. Cela aggraverait l'expérience mobile, pas meilleure. Cela supprimerait les fonctionnalités du mobile.

Cliquez sur les cibles trop rapprochées

Google se plaint que les mots de passe sont trop proches les uns des autres:

La seule raison pour laquelle ils sont cliquables est que cliquer dessus permet de sélectionner le mot de passe complet. Cela les rend plus faciles à copier et coller.

Ils sont proches les uns des autres, mais cela n’affecte pas la convivialité des mobiles. Cliquer ne vous éloigne pas du contenu. C'est assez facile d'essayer à nouveau si vous manquez.

Les remèdes possibles seraient:

  • Les rendre non cliquables sur de petits écrans (ce qui rendrait le site moins utilisable)
  • Éloignez-les les uns des autres (ils seront moins visibles, ce qui rend le site moins utilisable)

Prioriser le contenu visible

Votre page nécessite des allers-retours supplémentaires sur le réseau pour afficher le contenu au-dessus du pli. Pour optimiser les performances, réduisez la quantité de HTML nécessaire pour rendre le contenu au-dessus du pli.

L'intégralité de la réponse HTML n'était pas suffisante pour rendre le contenu au-dessus du pli. Cela indique généralement que des ressources supplémentaires, chargées après l'analyse HTML, étaient nécessaires pour le rendu du contenu au-dessus du pli.

Pour autant que je sache, cet outil est tout simplement faux. Il n'y a qu'une seule requête réseau. Le site n'utilise pas d'images. Tous les CSS et JS sont en ligne. Il n'y a même pas d'appels tiers pour des annonces ou des analyses:

Que puis-je faire à ce sujet?

Dois-je aggraver mon site pour cet algorithme de Google si je veux conserver les classements mobiles? Existe-t-il un moyen de marquer les éléments comme "ne pose pas de problème dans ce cas"?

googlemobilepenaltygooglebot-mobile
4
Stephen Ostermiller

Comme vous le savez, le problème majeur est que vos tables provoquent un débordement de la partie inférieure de la page. Bien que cela puisse sembler être un problème jusqu’à ce que vous arriviez au fond, il devient un problème sur certains appareils dès qu’ils caressent leur écran. En effet, ils risquent de caresser l’écran tactile de biais et entraîneront un décalage de la page vers la droite.

Ce problème est en fait un problème facile à résoudre, mais vous devez penser à une solution qui fonctionne. Si vous n’avez tout simplement pas le temps, un simple display:none; suffira:

@media only screen and (max-width: 40em){#howsecure, #howsecurerandommix, #tablearearandommix, #howsecurewritable, #tableareawritable, #howsecureshiftless, #tableareashiftless, #howsecurefakeword, #tableareafakeword, #howsecurecommonwords, #tableareacommonwords{display:none;}}

Il convient également de mentionner que Google tente stupidement de prendre en charge les iPhones 3G ou similaires utilisant une résolution inférieure à 300px-600px. De nos jours, les mobiles sont généralement situés au-dessus de 600 pixels aux États-Unis et au Royaume-Uni, et les téléphones situés au-dessous peuvent être pivotés en mode paysage. Vos tables sont lisibles au dessus de 600px, vous pouvez donc servir la table pour celles de moins de 600 en paysage.

Vous pouvez utiliser des requêtes multimédias qui informent les utilisateurs de faire pivoter leur écran tout en satisfaisant à la fois Google et votre expérience Utilisateurs.

Quelque chose comme:

<div class="tablewrapper">Table in Here</div>
<div class="notsupported">Sorry your phone is not supported</div>
<div class="rotatemobile">Please rotate your phone into landscape</div>

.notsupported, .rotatemobile{display:none;}

@media only screen and (max-width: 319px){
    .tablewrapper{display:none;}
    .notsupported{display:block;}
}

@media only screen and (min-device-width:320px) and (max-device-width:600px) and (orientation:portrait){
    .tablewrapper{display:none;}
    .pleaserotate{display:block;}
}

Une autre option serait de changer le format de votre table en utilisant JavaScript en utilisant: var width = screen.width; puis d'insérer des largeurs dans le TD comme <td width="100%> afin que chaque champ de table soit à 100%, permettant ainsi une lecture au format portrait.

L’autre solution à laquelle je peux penser est de regrouper la table et d’utiliser bootstrap, ou zurb foundation, comme il est beaucoup plus simple de résoudre ces problèmes. Le simple fait d'utiliser <div class="small-12 medium-2"></div> résoudrait ce problème. Je suis sûr qu'il existe de nombreuses autres manières de résoudre ce problème, vous pouvez peut-être ignorer Google :)

3
Simon Hayter

Je voudrais envelopper les tables dans un div à défilement. De cette façon, ils n'affectent pas la "largeur" ​​de la page et restent sur "largeur du périphérique" sur le mobile. Quelque chose comme:

<div class="table-wrapper">
  <table>...</table>
</div>

Avec CSS:

.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

Pour le problème des "cibles de clic", je suggérerais d'ajouter un peu de remplissage aux blocs de mots de passe (4-5 pixels). Cela fonctionnera mieux pour l'esthétique aussi.

Enfin, je ne m'inquiéterais pas vraiment des problèmes posés par cet outil. Bien que Google "pénalise" les sites non compatibles avec les appareils mobiles, je ne pense pas qu'ils utiliseront ces statistiques directement. Voir cet outil qui indique que votre site est compatible avec les appareils mobiles

Je pense que tant que vous avez votre tag méta-viewport, ça devrait aller.

1
DisgruntledGoat