Thèmes pour mobiles

Les thèmes pour affichage sur smartphones ont été mis en place il y a plusieurs années sur Blogger. Le système de Blogger détecte si l'appareil utilisé doit utiliser la version mobile. Celle-ci concernera par exemple sur les modèles suivants de smartphones :

  • I phone 4, 5, 6
  • LG optimus L70
  • Nokia Lumia 520
  • Nokia N9
  • Samsung Galaxy Note 3

La version mobile est une version allégée de la mise en page classique. Les articles sont en mode résumé en page d'accueil et les gadgets ne sont pas affichés par exemple. Chaque thème natif de Blogger dispose de sa version mobile. On retrouve sur l'onglet "Modèle" la présentation pour mobile à droite de la présentation classique :

Modèle "normal" et "mobile"
  • Simple : 7 déclinaisons
  • Affichages dynamiques
  • Picture Window : 3 déclinaisons
  • Awesome inc : 6 déclinaisons
  • Filigrane : 4 déclinaisons
  • Éthéré : 3 déclinaisons
  • Voyages : 4 déclinaisons

On échappe ainsi au thème standard unique imposé par d'autres plateformes de blogs. Il est possible d'avoir un thème différent sur PC et mobile mais il est conseillé de garder la même identité visuelle entre les différents supports.

Thème personnalisé

Il est possible d'afficher son thème personnalisé en version mobile. Pour cela, il faut sélectionner l'option "Personnaliser" lors du choix du modèle pour mobile :

Cela n'a pas pour effet de désactiver le mode d'affichage pour mobile mais cela permet de prendre en compte les modifications du thème qui ont été faites avec l'outil de personnalisation ou en modifiant le code du modèle directement. Voici par exemple ce que donne un blog avec un thème "simple" :

On peut donc jouer avec les options avancées de l'"outil de création de modèle" sans compromettre un affichage correct sur mobile. Ici les options :

  • Titre du blog
  • En-tête de la date
  • Texte de la page
  • Mobile button color (boutons accueil, page précédente/suivante)

L'interface propose aussi de cocher la case "Non, afficher le modèle classique sur les mobiles". Dans ce cas, il n'y a aucun affichage spécial pour mobile, le thème pour PC s'affiche.

Décodage

Comment ça marche tout ça ? Au niveau du code du modèle, ce n'est pas sorcier.

Pour le CSS (donc la partie design), une simple classe de style "mobile" est ajouté à la balise body lors de l'affichage sur mobile. Cela permet au niveau du CSS de surcharger le style pour les mobiles, par exemple modifier la marge des articles :

.mobile .post {
    margin: 0;
}

Pour avoir un affichage adapté des articles sur mobile, le template des articles est différent entre la version classique et mobile grâce à l'utilisation de la condition "<b:if cond='data:blog.isMobile'>". Tout le code inclus dans cette condition ne concerne que les mobile. On peut jouer avec cette condition pour personnaliser son thème. Exemple : afficher une image d'en-tête plus légère pour les mobiles :

<b:if cond='data:blog.isMobile'>
 <img src="http://1.bp.blogspot.com/-TE7DdtxyoSY/VWmCK8-Il4I/AAAAAAAAG_0/SV5dEByG0I8/s320/mobile-theme-2.jpg" />
<b:else/>
 <img src="http://1.bp.blogspot.com/-TE7DdtxyoSY/VWmCK8-Il4I/AAAAAAAAG_0/SV5dEByG0I8/s1600/mobile-theme-2.jpg" />
</b:if>

L'affichage pour mobile ne concerne pas les tablettes. Exemples :

  • I Pad
  • Blackberry PlayBook
  • Google Nexus 10
  • Amazon Kindle

Inutile donc d'utiliser la condition "date:blog.isMobile" pour faire du responsive design, c'est-à-dire du design adapté à tous les supports. Pour les écrans de taille moyenne, d'autres techniques peuvent être utilisées comme les media queries. Pour les non-initiés, il existe de très nombreux modèles gratuits adaptés à l'utilisation multi-support : voir ici par exemple.

Tester

Pour tester sur PC la version mobile, il suffit de rajouter ?m=1 à la fin de l'adresse. Pour repasser en mode "normal", enlever ?m=1 (ou remplacer par ?m=0). Des moyens plus élaborés de simulation existent, le plus simple est celui de Google Chrome (voir l'article Tester votre blog