Faut-il (et comment) adapter son blog pour l’Iphone ?

cssiphone

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.

capture d’écran du blog depuis l’Iphone

capture-iphone

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 !

Ce contenu a été publié dans news du web, avec comme mot(s)-clé(s) , . Vous pouvez le mettre en favoris avec ce permalien.

8 reponses a Faut-il (et comment) adapter son blog pour l’Iphone ?

  1. Fred dit :

    Après il ne faut pas hésiter à le soumettre sur http://iannuaire.net 🙂

  2. arnaud dit :

    Je précise que iannuaire cité ci-dessus par Fred est apparemment un annuaire de sites web optimisés pour l’Iphone !

  3. Fred dit :

    Ah oui, j’avais pas précisé…
    Et juste francophones !

    Il est tout simple, sans pubs (c’est pas le but), sans lien de retour exigé ni même demandé.

    Il a été fait dans le but de développer un site pour iPhone (il me fallait bien un thème…) pour expérience personnelle. Et comme il marche un peu et qu’il est visité, je lui ai mis un petit nom de domaine et je le maintiens.
    Et c’est une bonne manière de découvrir de nouveaux sites pour iPhone.
    Il existe quelques sites absolument superbes optimisés pour iPhone… malheureusement ils sont rarement en français :/

    Donc si vous suivez les conseils d’Arnaud et que vous ajoutez une version de votre site/blog pour iPhone, n’hésitez pas à proposer votre url 🙂

  4. Tilàcica dit :

    Je crois que je n’ai jamais critiqué aucun de tes articles mais faut bien commencer un jour 😉

    C’est fatigant d’entendre toujours ce raisonnement « adapter votre site pour iPhone ». A chaque fois que j’entends cette phrase j’ai l’impression d’être revenu 5-6 ans en arrière avec IE qui impose une manière qui lui est propre de développer un site. Une bonne fois pour toute, la différence avec le web et les autres langages et de justement s’absoudre de toutes contraintes liées au support.

    Après je te rejoins à 100% pour ton dernier paragraphe, et j’ajouterai même : « les navigateurs mobiles n’ont rien de différents de ceux de nos ordinateurs. Ils se doivent de respecter les standards proposés par le W3C pour respecter le web et l’internaute, quelque soit son support. ».

  5. arnaud dit :

    Ca je te pardonne, ta crittique est constructive 😉

    Je suis assez d’accord avec toi, c’est aux navigateurs de s’adapter aux normes. Un site bien fait doit s’adapter de lui-même aux différents terminaux internet. Dans ce sens, c’est sûr que l’adaptation pour Iphone n’est pas absolument nécessaire.

    Néanmoins, elle peut apporter un petit plus, la cerise sur le gateau pour récompenser ses lecteurs fidèles qui suive le blog depuis leur Iphone.

  6. Fred dit :

    Certes, mais un site « adapté », dans le sens qu’il a une interface spécifique pour un mobile (qu’il soit iPhone ou Android, ou autre) c’est quand même vachement pratique.

    Je surfe pas mal sur mon iPhone, quand je glande en attendant quelque chose (salle d’attente, en faisant la queue quelque part, etc). C’est un peu irritant de cliquer par accident sur un lien en scrollant la page ou en cliquant sur le mauvais lien parce qu’ils sont tous rikiki et collés.

    Un site optimisé, c’est bien pour les gros doigts, rapide d’accès, etc et surtout pour pouvoir présenter correctement l’info de façon super lisible sur un petit écran.

    Il y a certain sites qui ont fait un super effort/boulot d’adaptation pour l’iPhone.
    Ok c’est un peu pénible de devoir maintenir 2 versions de sites etc… mais tout dépend du site en même temps.

  7. miniblin dit :

    Sympa l’article, si jamais un jour je décide de franchir le pas pour G-Ski (mais je n’en sait encore rien) je saurais ou me renseigner !

    =]

  8. jeanjean dit :

    Il ne faut pas hésiter à faire une version mobile!

    C’est très simple, et ça peut se faire uniquement en CSS :

    http://blog.evolya.fr/index.php?post/31/10/2011/Adapter-un-site-web-pour-les-peripheriques-mobiles-grace-aux-CSS

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *