mardi 9 février 2010

Une version iPhone de son blog Blogger en 5 minutes

Si vous voulez que vos lecteurs puissent lire les articles de votre blog Blogger depuis leur iPhone alors je vous propose une manière rapide de rendre votre blog compatible iPhone en 5 minutes chrono.

C'est une méthode un peu simpliste, pas forcément la meilleure mais en tout cas, la meilleure en terme de rapport qualité / temps que j'ai trouvée pour rendre votre blog lisible depuis un iPhone sans obliger vos lecteurs à zoomer sur vos articles.

Cela tient en une ligne (ou 2) à insérer dans le code source de votre blog. Pour cela, rendez vous dans l'onglet "Mise en page" > "Modifier le code HTML", voir illustration ci-dessous :




Puis, dans le champ de saisie, placez le code suivant :

<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='initial-scale=0.72, user-scalable=no' name='viewport'/>

...juste en dessous de la balise ouvrante "<head>" comme ceci (vous pouvez cliquer sur l'image pour la voir en grand) :


La première ligne sert simplement à cacher la barre de navigation du navigateur Safari de votre iPhone une fois la page chargée, ce qui laisse plus d'espace de lecture à vos lecteurs.

La seconde ligne indique à Safari la taille initiale à laquelle il doit afficher votre site. Vous pouvez faire varier la valeur 0,72 jusqu'à obtenir un résultat satisfaisant sur votre iPhone.

Ces 2 lignes n'ayant d'impact que sur les navigateurs Safari pour iPhone, il n'y aura pas d'effets de bord sur les navigateurs web classiques.

Limitations :
  • si vous avez une colonne à gauche, alors cette solution risque de ne pas être idéale (mais qui affiche des colonnes à gauche de nos jours ?).
  • votre colonne de droite sera lisible à condition que l'utilisateur déplace sa zone de visualisation dessus mais encore une fois, ceci est solution "rapide", pas parfaite malheureusement. 
Avant de sauter le pas, vous pouvez vous rendre compte du rendu en vous rendant sur mon blog avec un iPhone.

Et si j'ai pas Blogger, je fais comment moi m'sieur ? Pour les autres blogs, il existe certainement des plugins beaucoup plus efficaces.

Dernièrement, si vous avez quelques connaissances en JavaScript / CSS et beaucoup plus de temps, vous pouvez rediriger les iPhones vers une version totalement adaptée. Ceci pourra peut-être faire l'objet d'un prochain article...

3 commentaires:

  1. Génial :)) je viens de faire ta manip faire, et je témoigne, ça prend encore moins que 5 minutes. Merci mille fois.

    RépondreSupprimer
  2. I confirm
    Parfait, en tout cas au vue de la vitesse d'implementation et du rendu !
    merci et bravo

    pour voir le resultat
    www.Louerbureau.com

    RépondreSupprimer
  3. Merci, c'est simple et rapide. Bravo !

    RépondreSupprimer

CV Matthieu Oldfield