1485 sujets

Web Mobile et responsive web design

Google Webmaster Tools est il fiable?

Bonjour

J'ai reçu un courriel de Google Webmaster Tools relatif à l'usabilié sur mobile d'un site que je gère.

Je pensais avoir fait le nécessaire, mais personne n'étant parfait, et moi moins que nul autre, j'ai regardé ce que me signalait mon "ami".

La principale remarque est "Size content to viewport"
Il parait que la largeur de ma page est de 325px lorsque le mobile virtuel est de 320px.
J'ai beau regarder toutes les "width" explicites ou implicites, ainsi que les margin et autres padding, je ne trouve rien qui justifie cette largeur. J'ai scrupuleusement mis la largeur de la page à 100%, et exprimé les largeurs en pourcent, rien n'y fait.

La seconde remarque concerne l'espacement des entrées de menu.
J'ai suivi leurs recommandations, selon lesquelles les entrées de menu doivent être espacées de 48px. Outre que l'affichage de la page devient horrible, ça ne change rien à leur diagnostic.

Je me demande donc:
1) dans quelle mesure on peut se fier à leurs mesures et recommandations, puisqu'elles semblent incomplètes (si on les suit ça ne change pas le diagnostic)
2) s'il y a quelque part un outil plus fiable et qui signalerait (tant qu'à faire) l'endroit où la largeur demandée est trop grande plutôt de dire simplement qu'elle est trop grande sans dire où
3) s'il y a quelque part un résumé des "bonnes pratiques" pour le problème des menus sur mobile.
Dans l'un de mes sites, j'ai fait une page d'accueil spéciale mobile qui prend toute la page, avec un lien en haut de chaque page pour y retourner, mais (horreur et damnation!) c'est fait avec des "frames". Je suppose qu'on peut faire mieux...

Vos conseils précieux seront accueillis avec joie!
Modifié par PapyJP (12 Mar 2015 - 10:09)
Administrateur
Bonjour,

PapyJP a écrit :
La principale remarque est "Size content to viewport"
Il parait que la largeur de ma page est de 325px lorsque le mobile virtuel est de 320px.
J'ai beau regarder toutes les "width" explicites ou implicites, ainsi que les margin et autres padding, je ne trouve rien qui justifie cette largeur. J'ai scrupuleusement mis la largeur de la page à 100%, et exprimé les largeurs en pourcent, rien n'y fait.

Est-ce que le modèle de boîte différent déclenché par * {box-sizing: border-box } est utilisé ?
Si non, tout padding et border est pris en compte en plus de la largeur d'un élément et c'est facile de passer à côté (et :before et :after si je ne dis pas de bêtises, mais comme j'utilise les 2 depuis longtemps je peux me tromper)

PapyJP a écrit :
2) s'il y a quelque part un outil plus fiable et qui signalerait (tant qu'à faire) l'endroit où la largeur demandée est trop grande plutôt de dire simplement qu'elle est trop grande sans dire où

Je diagnostique comme un bourrin avec des règles comme :

body /* ou #inner enfin l'élément qui fait 320px */ {
  outline: 1px dashed red; /* ou blue si le site a une dominante rouge */
}
/* détecter du texte ou des images qui dépasseraient de ce fond */
body {
  background: pink !important;
}
/* des boîtes autour des éléments dans le contenu */
#inner * {
  outline: 1px dashed red;
}

outline ne prend pas de place contrairement à border.
La couleur pink est parfaite (pour se faire chambrer par ses collègues mais je m'en fiche et) pour diagnostiquer des sites quelque soient leurs couleurs bleu, rouge, vert ou orange, le rose se voit toujours comme le nez au milieu de la figure.
Trop souvent les éléments fautifs ont un fond transparent et rien ne laisserait penser que leur largeur n'est pas du tout celle qu'on croit. En ajoutant un truc très très visible ça devient évident.

Sinon width: 100% c'est le mal (à remplacer par width: auto; presqu'à chaque fois qu'on pense "il faut que ça fasse toute la largeur". Exceptions : table et le reste m'échappe)
Raphi a écrit :
Bonjour,

Peux-tu nous indiquer l'adresse du site concerné, stp ? Smiley smile

Oui, pardon, c'est le site de ma nièce http://nathalie.esthetic.free.fr

@Felipe

Merci de ces conseils, je regarde ce soir en rentrant chez moi si je trouve quelque chose.
Concernant width100%, c'est nouveau pour moi, je pensais que c'était le standard par défaut, mais j'ai découvert que ce n'est pas le cas. Connaissez vous un document clair pour les nuls qui explique comment forcer ces f... navigateurs à faire ce pourquoi ils sont théoriquement faits, adapter au mieux le contenu au contenant?
Modifié par PapyJP (12 Mar 2015 - 13:35)
Felipe a écrit :
J'aurais pu mettre le lien directement dans mon message précédent Smiley confused

Raphaël avait écrit ceci : http://blog.goetter.fr/2011/11/30/width-100-tu-es-le-mal/
et plus spécifiquement R. Johansson avait écrit, en anglais, The difference between width:auto and width:100%.

Oui, bien entendu, c'est bien ce que j'appelle "ne pas faire ce pourquoi ils sont théoriquement faits, adapter au mieux le contenu au contenant".

Mais de plus les width:100% sont (dans mon code) réservés à html et body, lesquels n'ont pas de marge ou de bordure. Pour le reste je me garde bien de mettre des largeurs à plus de 95%.
Je vais reprendre tout mon code pas à pas, si je trouve je vous dirai quoi, ça pourrait peut être servir à d'autres....
Voici ce que contient mon CSS:

* {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
                font-size:100%;
    }

html,
body{
    height:100%;
    width:100%;
}
nav{
    width:95%;
    margin:0 auto;
    text-align:center;
    line-height:75%;
}
nav p{
    display:inline-block;
    color:rgb(102, 51, 102);
    padding:0 0.5em;
    font-family:Arial;
    margin:0 auto;
}
img.headImage{
    display:block;
    box-sizing: border-box;
    margin:auto;
    max-height:25%;
}
img.carte{
    display:block;
    margin:20px auto;
    max-width:90%;
    border:4px solid rgb(153, 77, 153);
    border-radius:10px;
}

Tout le reste n'a soit pas de largeur indiquée, soit des largeurs en % (inférieures à 100 comme il se doit).
Je n'aime pas rester sur un échec, mais j'ai l'impression que les modifications que je peux faire n'ont aucun effet.
Bonsoir
Je pense que le problème vient de #facebook avec white-space: nowrap; (empêche le retour à la ligne) et le texte un tantinet trop grand... enlever nowrap ou mettre le texte à font-size: 99%;

Bien utile pour trouver rapidement ce qui coince : Web Developer / modèles adaptatifs.

Pour Webmastertools, Google ne repasse pas immédiatement sur le site à chaque modification que l'on peut y faire, moi, je lui demande de ré indexer la page...
cilou a écrit :
Bonsoir
Je pense que le problème vient de #facebook avec white-space: nowrap; (empêche le retour à la ligne) et le texte un tantinet trop grand... enlever nowrap ou mettre le texte à font-size: 99%;

Bien utile pour trouver rapidement ce qui coince : Web Developer / modèles adaptatifs.

Pour Webmastertools, Google ne repasse pas immédiatement sur le site à chaque modification que l'on peut y faire, moi, je lui demande de ré indexer la page...

Merci cilou je n'avais pas le moins du monde pensé à cet appendice.
Je vais mieux dormir ce week end....
Sujet clos
Aller à