Avec le succès toujours grandissant de l’Iphone, se pose la question pour les créateurs de sites web (au sens large) de l’adaptation de son site spécialement pour l’Iphone. Pour ceux qui ne le savent pas, l’affichage des pages par défaut sur l’Iphone se fait bien comme il faut (pas de contenu, à part le flash, qui saute). Néanmoins, la navigation n’y est pas forcément aisée, il faut zoomer sur la page pour lire le contenu textuel du site web.

C’est particulièrement vrai sur les blogs, où le texte est le plus important.  Il faut aussi prendre en compte le poids des pages, en effet, la vitesse d’une connexion 3G (voir même Edge) n’est pas la même que les vitesses de connexion moyennes des box actuelles. Une fois de plus, la page d’accueil d’un blog, souvent longue et illustrée, n’est pas optimisée en ce sens.

L’ergonomie n’est également pas la même. Avec l’Iphone, point de survol, le JavaScript est plus lent. L’expérience utilisateur peut devenir compliqué. Il faut penser aux limitations qu’offre l’Iphone en matière d’interactivité.

La question qui vient ensuite est donc :

Comment puis-je adapter mon blog pour l’Iphone ?

Il peut être facile en JavaScript de détecter si le visiteur est sur un Iphone ou pas :

1
2
3
4
5

var agent=navigator.userAgent.toLowerCase(); // récupération des infos du navigateur web de d'lutilisateur
var is_iphone  = ((agent.indexOf('iphone')!=-1); // on teste si 'iphone' est présent dans les infos du navigateur
if (is_iphone) { 
          // ici vient du code uniquement pour l'Iphone
}

Le côté technique n’est pas ici un problème, la détection du téléphone d’Apple (et de l’Ipod Touch également) est possible, on peut donc envisager de rediriger le visiteur ou de charger (avec ici une détection en PHP) une feuille de style différente. Pour un affichage correct, il faut surtout réduire la largeur du conteneur du site (l’Iphone ayant une résolution de 320*480px) pour éviter d’avoir à zoomer pour lire le contenu de la page web et sacrifier quelques images.

Il existe des solutions toutes faites pour une adaptation rapide mais pas forcément personnalisée. Un plugin WordPress permet de faire ça très bien : WPTouch. Il gère l’affichage global de la page, transforme même le template avec, par exemple, juste les titres des articles affichés sur la page d’accueil du blog.  Il existe même carrément des thèmes complets pour Iphone sur Dotclear. Après il est tout à fait de faire l’adaptation soit-même pour une plus grande personnalisation graphique. Il existe même déjà une galerie de web design de sites adaptés pour l’Iphone. On peut la trouver ici.

Pour conclure, je pense qu’il va devoir être bientôt nécessaire de faire un travail d’adaptation vers les terminaux mobiles. Il faudrait pouvoir adapter pour tous les navigateurs mobiles facilement (Safari pour Iphone, Opéra Mobile). En attendant, l’adaptation pour Iphone peut être une bonne vitrine. Pour finir avec des chiffres, sur le dernier mois, il y a eu 36 visites faites depuis l’Iphone (soit 0.58% des visites). Est-ce qu’il y en aurait plus si mon blog était adapté pour l’Iphone ? Je ne sais pas, mais je pense que je pourrai en dire d’ici quelques temps !

Pas encore de billet sur le même sujet !