ThéorieFonctionnalitésSEO

Mobile-Friendly - Les mobiles personnalisés Blogger


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
Mobile-Friendly - Les mobiles personnalisés Blogger
Le 21 avril prochain, Google lancera l'opération Mobile-Friendly qui a pour but de faire remonter dans les serps, les pages optimisées pour les mobiles.
Sur Blogger, si vous utilisez un modèle prédéfini, vous n'avez rien à entreprendre.
Pour les modèles personnalisés, vous devez faire le ménage. Voici un petit rappel de ce qui est à votre portée sur Blogger...

Afficher uniquement le contenu HTML nécessaire

Dans l'ossature HTML du modèle, jouez avec les expressions conditionnelles et la donnée data:blog.isMobile, pour autoriser ou interdire l'exécution de certains éléments, tels que des scripts, ou tout simplement du contenu HTML.

<b:if cond='data:blog.isMobile'>
  <!-- Contenu pour version mobile -->
</b:if>

<b:if cond='not data:blog.isMobile'>
  <!-- Contenu pour version web -->
</b:if>

<b:if cond='data:blog.isMobile'>
  <!-- Contenu pour version mobile -->
<b:else/>
  <!-- Contenu pour version web -->
</b:if>


Choisir les bons gadgets

Dans l'entête HTML d'un gadget, ajoutez le paramètre mobile :

<b:widget id='Label1' locked='false' mobile='no' title='' type='Label'>

Mentionnez les valeurs yes ou no
N'utilisez surtout pas la valeur only. Cette valeur occasionne des bugs dans le tableau de bord.

Si pour une raison ou une autre, vous souhaitez afficher un gadget seulement dans la version mobile, mentionnez d'abord la valeur yes dans l'entête
Et ensuite, ouvrez le contenu html du gadget (avec la petite flèche à gauche ►):

Remplacez
<b:includable id='main'>

Par
<b:includable id='main'>
  <b:include cond='data:blog.isMobile' name='content'>
</b:includable>
<b:includable id='content'>

Évitez d'afficher des "gros" widgets qui utilisent des alimentations externes, comme les flux, CSE, News, Diapo, Membres, Google+, Translate, etc...
ou encore des widgets dont l'affichage des éléments tactiles ne sont pas spécialement adaptés, comme les listes de liens, libellés, etc. A moins que vous n'ayez ajouté des CSS supplémentaires...


Jouer avec les CSS et adapter les éléments tactiles

La dimension des éléments tactiles est un critère à prendre en considération. Google suggère que ceux-ci doivent être proche de la taille d'un bout de doigt (10 mm).

Tailles minimums recommandées :
  • Largeur et hauteur minimum : 7 mm
  • Espace minimum entre chaque élément : 5 mm

Pour pouvoir modifier vos CSS mobile sans perturber la version bureau, vous devez d'abord mentionner la class mobile dans la balise <body> :

<body expr:class='data:blog.mobileClass'>

Cela fait, vous pouvez dés à présent, écrire des CSS en utilisant la class .mobile.

Prenons par exemple, les liens du gadget libellés, qui ne sont pas considérés "mobile-friendly" parce que ce sont des éléments tactiles trop petits ou trop rapprochés.
Nous pouvons adapter en appliquant une taille de police et une hauteur de ligne plus élevée ou encore, grossir les marges et le rembourrage.

.mobile .Label ul li a {
  display: block;
  font-size: 200%;
  line-height: 220%;
  padding: 10px 20px;
  margin: 5px;
}

Si votre contenu affiche des longs mots, des tableaux ou toutes sortes d'éléments qui sont plus grands que la largeur d'affichage de l'appareil, vous pouvez utiliser le paramètre CSS word-break qui consiste a briser les mots.
Certes, ce n'est pas esthétiquement très joli, mais les grands maux, les grands remèdes, le génie rentrera dans la lampe, de grès ou de force. :D.

body.mobile {
  word-break: break-all;
}

Ou, appliquer à partir d'une largeur de fenêtre définie, grâce à @media screen :

@media screen and (max-width: 500px) {
  body.mobile {
    word-break: break-all;
  }
}



La taille des images

Vos images ne doivent pas être agrandies ou diminuées avec des CSS. La taille d'affichage doit correspondre à sa taille réelle.

Ne réduisez pas la qualité de vos images avant de les héberger sur Google. Un système de compression automatique est déjà mis en place.

Si vous utilisez des scripts, qui permettent d'extraire des vignettes de 72px (par exemple, pour les résumés des articles dans les index ou dans le gadget des articles populaires), vous devez faire en sorte que la taille de la vignette corresponde à la taille du conteneur.

UPDATE Avril 2016 : Blogger a lancé plusieurs fonctionnalités XML afin de répondre aux exigences Mobile Friendly :


Configurer la fenêtre d'affichage

Dans l'entête du fichier XML de votre modèle, vérifiez la présence de la balise viewport et si elle n'y figure pas, ajoutez-là après <head> :

<meta expr:content='data:blog.isMobile ? "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' name='viewport'/>

Dans les modèles antérieurs à mars 2015, la balise viewport peut apparaître sous cette forme :

<b:if cond='data:blog.isMobile'>
  <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
  <meta content='width=1100' name='viewport'/>
</b:if>


Mon blog est-il "mobile-friendly" ?

Google met à la disposition des utilisateurs plusieurs outils vous permettant d'effectuer des vérifications :
Scannez vos différentes pages : Articles, Accueil, index, etc. Suivez les indications et corrigez en conséquence.

Dans pageSpeed Insights, les meilleurs résultats possibles pour les blogs Blogger sont :
  • Vitesse: 75% (7 règles approuvées)
  • Expérience utilisateur: 100%

Vous trouverez la liste de tous vos articles référencés qui posent des problèmes d'affichage dans Outils pour les Webmasters.

  • Outils pour les webmasters
  • Trafic de recherche
  • Ergonomie mobile


Un grand merci à Rachid de tic-maroc.com
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte Platine TC (Ambassador & Advanced Troubleshooter):
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsFichiers XML
Favicons multi-sets [icon / apple-touch-icon / msapplication]
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire