Un petit retour d’expérience sur comment passer un site en version mobile. Tout d’abord je pense que tous les protocoles d’avant guerre (d’Irak) sont tous à passer à la poubelle, les WML et autres protocoles super spés sont à oublier, je pense qu’un bon Xhtml bien propre suffira largement a être compatible sur les terminaux utilisés pour surfer (un Nokia 3330 Wap ca sert pas à surfer, tout juste à chatter ). J’imagine que vous avez déjà essayés de surfer sur un terminal Wap c’est la croix et la bannière, insuffisance de mémoire cache, impossibilité d’exécuter du JavaScript.. au final c’est la vrai galère et personne ne s’en sert.
Aujourd’hui à l’heure des systèmes Android/Iphone, surfer sur le mobile devient facile si tant est que le site que vous visiterez ait prévu l’accès aux écrans de petite taille..

Pour un Webmaster passer un site en version Mobile s’avère compliqué dans le sens où il faut détecter que le terminal qui vous visite soit un terminal mobile, et les USERAGENT sont loin d’être uniformes et facilement détectables. Pour se faire chez moi j’ai opté pour une détection par userAgent comme ici :

Que se passe t’il?

A la première ligne nous recherchons un USER AGENT de type mobile (insensible à la case), à la deuxième ligne nous contrôlons qu’un cookie nommé « mobile » n’existe pas et enfin nous vérifions que ça n’est pas Google, si toutes ses conditions sont respectées et que nous ne sommes pas déjà sur le sous domaine mobile du site nous redirigeons le visiteur vers le sous domaine mobile en 302. Pourquoi en 302? parce que si nous redirigeons en 301 et que notre visiteur passe par un proxy, le proxy mettra en cache la redirection et tous les visiteurs mobile ou non se trouveront redirigés vers ce sous domaine, c’est pourquoi par exemple les Régies d’affiliations utilisent des 302 plutôt que des 301, c’est tout simplement pour éviter la mise en cache des intermédiaires chez vous ou chez votre FAI (AOL le fait par exemple, mais aussi dans certain pays comme Madagascar).

Pourquoi ce cookie?

Ce cookie est à placer lorsque votre visiteur a déjà été redirigé une fois vers votre sous domaine mobile, je le place via le PHP de mon site :

Cette fonction permettra à vos visiteurs de pouvoir décider s’ils vont sur la version mobile ou sur la version normale de votre site. La première fois nous forcerons la redirection et ensuite libre au visiteur de choisir la version qu’il visitera. Certain système comme les « Archos Android » ou la future tablette Ipod sont dotés d’écrans très grands et les forcer à visiter une version mobile de votre site peux les déranger.

Ensuite une fois sur le sous domaine manipuler le template de votre site devient un jeu d’enfant, pour SPIP par exemple, quelques lignes dans votre htaccess de ce type suffiront à changer le template vers une version mobile :

Le Robots.Txt est très important, si vous laissez votre site ainsi avec les deux versions ca risque d’être le bordel dans les SERPS de Google avec vos deux sous domaines en Duplicat Content :

Là c’est la version du robots.txt pour votre site normal, en fait on prévient Google qu’il ne doit pas proposer votre site normal en version mobile, le but étant de montrer pattes blanches à Googlebot-Mobile en vue de lui faire bouffer un autre robots.txt sur mob.monsite.com/robots.txt :

Là vous lui donnez un sitemap mobile (guideline) dont j’ai remarqué une grande efficacité contrairement aux sitemap classiques

Quelles sont maintenant les techniques de design et de html ?

Si vous n’avez jamais surfé en Mobile il est temps de vous y mettre, vous verrez alors les gros problèmes que vous allez rencontrer et que vos visiteurs eux aussi vont rencontrer.

Je pense qu’un design le plus épuré possible est l’idéal, pas la peine de mettre des grosses bannières, des images partout, un CSS de quelques kilos fera l’affaire, quelques <dd><dt> en guise de menu seront très bien, un menu secteur en footer et un fil d’ariane en haut plaira à Google et donneront les fonctionnalités de base pour la navigation.

Pour ce qui est de Adsense, pas la peine de chercher de midi à 14heures, comme me l’avait fait remarquer FBParis un bloc Adsense classique de 300px de large c’est génial, on peut en placer 3 et ça couvre tout l’écran , oubliez les Adsense4Mobile de Google c’est moins bon pour le CTR.

Pour les entêtes HTTP, le format XHTML selon le W3C doit avoir pour header(‘Content-Type: application/xhtml+xml; charset=UTF-8′), alors là je vous arrête tout de suite, si vous posez ce header là 50%  des navigateurs de vos visiteurs n’exécuteront pas le javascript dans vos pages, je ne sais pas pourquoi mais rien que FireFox bloque le JS s’il reçoit un header de ce type. Un header XHTML c’est sympa, c’est Funky mais ca sert à rien et ca vous plantera vos revenus Adsense.

Reste le Snobe de service, j’ai nommé l’Iphone, le leader qui comme tous leader tient à le rappeler, lui demande une <meta> bien spéciale rien que pour lui :

Il faut la mettre, sinon vos visiteurs vont avoir les images et les fonts en toutes petites tailles et illisibles. Vous n’avez qu’a faire l’essai, sans cette meta vos pages sont illisibles.

Google et son respect des metas risque aussi de vous poser problème, en effet Google propose lorsque vous l’utilisez depuis un terminal mobile une « version Wireless » de votre site. Pour exemple vous trouverez ici Google.com/gwt/x?u=lemonde.fr une version de LeMonde.Fr qui pourtant dispose de la meta noarchive. Pour empêcher Google de proposer cette version de votre site, il suffit de mettre une meta de ce type :

Cette meta désactivera instantanément la version wireless de Google qui proposera à la place une redirection vers la page que vous aurez mis en href (Test ici)

Une fois que GoogleBot aura pigé que vous avez fait une version mobile de votre site il viendra vous visiter totalement en une seule fois, il fera un crawl complet qui pourra durer plusieurs jours avec deux USER_AGENT assez étranges :

Sans doute pour passer les détections et autres redirections foireuses..

Je vous ferai un retour trafic et CTR dans quelques semaines