Apple aura réussi (?) le tour de force qui consiste à faire croire que sans l'iPhone, le web mobile n'aurait jamais vu le jour !
En tous cas, on sent bien que l'engouement pour l'iPhone conduit tous les webmasters de la planète à se réveiller brutalement sur la problématique : "Mais il a quelle gueule, mon site, sur l'iPhone ?"... et de se demander dans la foulée : faut-il que je fasse une version iPhone ? Comment je peux adapter le look actuel sans me lancer dans une usine à gaz ?
Bon. Les questions fusent de partout sur les forums et les réponses émergent en quantité inversement proportionnelle.
Sans prétendre rédiger, compte tenu de mes connaissances en la matière, un article de fond qui répondra à toutes vos questions, j'ai voulu néanmoins regrouper dans cet article quelques premiers éléments susceptibles de vous aider dans cette nouvelle tâche, en particulier pour apprécier les mécanismes propres à la connection d'un media mobile à une page html . Je ne manquerai pas de rafraîchir les infos au fur et à mesure et vous encourage aussi à me solliciter pour les compléter.
Partant du principe qu'adapter un site à un media particulier est une affaire de forme et pas de contenu, il sera plutôt question de construire une feuille de style spécifique iPhone que de tout refaire. Cela dit, certains sites trouveront sans doute avantage à envisager une mouture spécifique iPhone, avec un contenu, un css et une adresse URL spécifiques. Certains comme le journal Liberation s'y sont déjà mis (notez l'url spécifique avec le préfixe "iphone" !).
Mon prochain objectif est d'ailleurs d'élaborer des templates iPhone, et les mettre à votre disposition.
Quoi qu'il en soit, on n'échappe pas au fait de préparer ce nouveau média, une fois connecté sur la page d'accueil, à ce qu'il reconnaisse les informations qui lui sont destinées, en particulier sa feuille de style CSS. C'est là l'objet essentiel de cet article.
Apple a évidemment édité des recommandations, que l'on peut consulter en particulier sur cette page.
Pour bien se faire comprendre, surtout des moins aguerris d'entre-vous, il s'agit d'informer, dans l'en-tête de la page html, le type CSS qui concerne l'iPhone, sans affecter pour autant les autres navigateurs.
Mais avant d'entrer dans ces détails, il est bon de rappeler que si CSS2 est la version en cours habituellement utilisée, CSS3 arrive à grands pas. Apple, avec Safari 3, est à la pointe dans ce domaine. On serait en droit de penser que la version Safari embarquée dans l'iPhone en est proche, mais ce n'est pas tout à fait le cas. Pour vous permettre de mieux apprécier les différences, je vous invite à consulter une page test en cliquant sur l'image ci-dessous.
Vous y remarquerez un vocable qui ne vous est peut-être pas familier : WebKit. Il s'agit d'une bibliothèque de fonctions principalement destinée à la création de navigateurs Web. Originellement conçu pour le système Mac OS X (à partir de 10.3 Panther), WebKit est en cours de portage vers Linux et Windows. Il faut noter qu'Apple a rendu WebKit disponible en OpenSource il y a deux ans déjà. WebKit est également utilisé par certains logiciels de création Web, tels iWeb, RapidWeaver, Sandvox ainsi que certaines applications comme Mail, Dasboard, TexMate...
En détaillant les recommandations Apple, on remarque les éléments suivants pour spécifier une feuille de style destinée à l'iPhone :
Code :
<link media="only screen and (max-device-width: 480px)"
href="iphone.css" type="text/css" rel="stylesheet">
Apple nous informe que les navigateurs plus anciens ne reconnaissant pas la spécification "only" ils ne considèreront donc pas la feuille de style désignée. Pour leur assigner une feuille de style qui leur est propre, il nous est recommandé d'utiliser le principe :
Code :
<link media="screen and (min-device-width: 481px)"
href="autres.css" type="text/css" rel="stylesheet" >
Je voudrais pourtant vous faire observer qu'une (petite) polémique s'est déjà installée sur les sites qui s'intéressent à ces questions, quant aux recommandations Apple et surtout leur justification.
On trouve en effet, dans la documentation, le passage suivant :
CSS3 recognizes several media types, including print, handheld, and screen. iPhone ignores print and handheld media queries because these types do not supply high-end web content. Therefore, use the screen media type query for iPhone.
Apple cherche ici à nous dire que l'iPhone ne "supporterait pas" le media handheld (entendez "media mobile"), au prétexte que cette spécification ne prendrait pas en charge les contenus web "de pointe" et qu'il nous faut, pour l'iPhone utiliser media queries. D'une part, comme d'autres, je me demande ce que les considérations de contenu ont à voir avec CSS3, supposé ne s'occuper que de la forme. Par ailleurs, je comprends mal en quoi le media screen (votre ordinateur) est à ce point différent du média hanheld (votre iPhone). Et enfin, il est faux que l'iPhone ne comprendrait pas media handheld. Sauf si soudainement, on se met à considérer les recommandations Apple dans le contexte concurrentiel de l'iPhone, à savoir d'autres matériel mobiles qui eux, pigent parfaitement media handheld, mais nettement moins (comme par hasard) media queries... suivez mon regard vers Blackberry...
Ces subtilités de marketing viennent ajouter (comme s'il n'y en avait pas assez) une nouvelle complication : media queries ou media handheld ? Surtout qu'il s'agit, non seulement que l'iPhone reconnaisse la bonne feuille de style mais sans que les autres navigateurs soient affectés par la syntaxe !
On pourrait être tenté de résoudre le dilemme en employant, comme certains le préconisent :
Code :
<link media="handheld, screen and (max-device-width: 480px)"
href="mobile.css" type="text/css" rel="stylesheet" />
Dans ce cas, on pourrait rétorquer que cela ne convient pas, puisque la feuille de style sera lue aussi bien par un iPhone (handheld) qu'un Macintosh ou un PC (screen). C'est juste, mais l'ordinateur n'en sera pas affecté, vu qu'il n'en existe pas avec un écran de 480px !
Le problème de cette syntaxe est ailleurs : c'est FireFox qui est affecté, par exemple. Et ce n'est peut-être pas le seul. Car en effet FireFox se moquera de la taile d'écran spécifiée et appliquera la feuille de style destinée à l'iPhone ! Pour pallier cet inconvénient, il est donc recommandé de reconsidérer une partie de la recommandation Apple et d'ajouter only dans la syntaxe, comme ceci :
Code :
<link media="handheld, only screen and (max-device-width: 480px)"
href="mobile.css" type="text/css" rel="stylesheet" />
Chez Libération, cité plus haut, il ont en tous cas tranché ainsi :
Code :
<link media="only screen and (max-device-width: 480px)"
href="style.css" type="text/css" rel="stylesheet">
<link media="screen and (min-device-width: 481px)"
href="style2.css" type="text/css" rel="stylesheet">
Tout ceci est évidemment à tester...
Pour vérifier ces aspects, je vous recommande une autre page test W3C (image ci-dessous), vous permettant de vérifier quelle feuille de style reconnaissent respectivement votre Macintosh et votre iPhone.
|
C'est pas bea...
