Comment faire une page web compatible iPhone

Version imprimable

10/06/2009, 17h16
Rollois

Comment faire une page web compatible iPhone

Bonjour,

Je suis intéressé à rendre ma page web facile d'accès pour les iPhone. Donc si un user load ma page avec Safari sur son iPhone, la page chargera plus rapidement car le contenu sera moins lourd et le display (width) sera ajusté pour celui-ci.

Par exemple, si on load facebook ou twitter dans notre iPhone, ces pages sont beaucoup moins lourdes à charger et plus facile à utiliser que si on les chargait normalement (charger normalement = même chose que sur un pc).

Je cherche sur Google et sur votre site un tutoriel quelconque qui explique BIEN comment faire cela. Et je trouve rien de bon. La seule chose qui semble me donner un idée à peu près est le lien suivant: http://groups.google.com/group/iphon...b605e5d43c0b26
Mais la discussion ne semble pas donner une conlusion définitive sur le sujet.

J'aimerais savoir si l'un de vous connaît un livre/tutoriel quelconque pour m'aider la dedans.

Je sais pas comment ils font, mais on dirait que les page web détecte que tu regarde leur page avec un iPhone et il ajuste le display pour (comme une redirection vers iphone.google.com quand tu visites www.google.com avec ton iPhone).

Je me demande aussi si les changements que je vais apporter s'appliquerait pour les autres types de téléphones? Genre blackberry. Ou il faut que j'ajuste le display pour les 100 types de display de téléphones qui existent sur le marché (chacun ayant son width).

Merci de l'aide.
10/06/2009, 20h40
12monkeys

Bonsoir

Tu peut essayer deux choses : soit les types de média pour appliquer une css spécifique à ta page http://www.la-grange.net/w3c/html4.01/types.html#h-6.13 ; soit de détecter le type de navigateur et/ou le système d'exploitation pour faire de même : activer une css spécifique... En php : http://php.developpez.com/faq/index....versionbrowser et http://php.developpez.com/faq/index....oncepts_typeos ou en javascript : http://javascript.developpez.com/faq...vig#navigateur
10/06/2009, 21h10
Rollois

Merci de la réponse. Je ferai des testes et je saurai définitivement si l'utilisateur qui regarde mon site est sur un mobile ou pas.

Pour la deuxieme partie de ma question, j'aurais besoin de savoir les dimension exacte à donner à nos page web et la meilleur façon de le faire. Tu me mentionnes le CSS, certain mentionne de mettre <meta /> quelquechose... entre les <head></head>.

En passant, il a une erreur sur ce tutoriel http://php.developpez.com/faq/index....oncepts_typeos

Il manque une parenthèse fermante à la ligne de code:

Code:

$user_agent = getenv("HTTP_USER_AGENT";

Je me permet de le dire car tu sembles être un modérateur.
Merci!
10/06/2009, 21h26
Rollois

Bon, c'est effectivement facile de savoir si le user est sur un iPhone ou pas.

$user_agent = getenv("HTTP_USER_AGENT"); et un strpos("iPhone") et le tour est joué.

Il me reste à connaître les bon settings d'affichage sur un iPhone.
10/06/2009, 21h27
12monkeys

Citation:

Envoyé par Rollois

Pour la deuxieme partie de ma question, j'aurais besoin de savoir les dimension exacte à donner à nos page web et la meilleur façon de le faire. Tu me mentionnes le CSS, certain mentionne de mettre <meta /> quelquechose... entre les <head></head>.

Les balises meta pour faire une redirection ? Oui en effet : http://cyberzoide.developpez.com/html/meta.php3#refresh.

Si c'est pour faire comme Google ça va aboutir au même effet : rediriger vers un nouveau site, c'est bien, mais celui ci utilisera aussi du css pour la mise en forme...

Pour les tailles du site, il faut utiliser la méthode empirique : tester, je ne sais pas quelle taille fait l'écran du iphone...

Citation:

Envoyé par Rollois

En passant, il a une erreur sur ce tutoriel http://php.developpez.com/faq/index....oncepts_typeos

Il manque une parenthèse fermante à la ligne de code:

Code:

$user_agent = getenv("HTTP_USER_AGENT";

Je me permet de le dire car tu sembles être un modérateur.
Merci!

Merci du retour, j'ai transmis...
10/06/2009, 21h36
Rollois

Ce que je veux dire par le méta c'est ceci:
<meta name="viewport" content="width=320">
Apparament que c'est bon, mais je sais pas exactement ce que c'est cette ligne de code la et je sais pas non plus si c'est bon.
Je vais chercher sur le site de Apple, peut-être y a-t-il un document qui mentionne la meilleur façon de procéder pour faire ce que je veux faire.

hmmm... un site de référence met cette ligne de code

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

et quand je regarde dans un Safari iPhone c'est très bien.
La page est: http://www.appcubby.com/m/gascubby.html#_home
Je vais analyser leur css et js... quand on click sur les liens, la page bouge de droite à gauche... je comprends pas comment il fait ça.
10/06/2009, 21h46
Macmillenium
Bonsoir,

Pour cibler l'Iphone et les autres appareils supportant le media handheld, il est possible d'exécuter des requêtes pour tester le type de média (Media Queries, un module CSS3), par exemple :
Code:

1 2 <link rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 480px)" href="css-media-handheld.css" />
Grâce aux Media Queries, une requête va s'exécuter pour charger le fichier css-media-handheld.css si le viewport du périphérique ne dépasse pas 480px de largeur, ce qui est le cas de l'iphone par exemple.

IE ne supporte pas les Media Queries, tu peux donc l'exclure via un simple commentaire conditionnel :
Code:

1 2 3 4  <link rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 480px)" href="css-media-handheld.css" /> 
 => Si différent de IE ;)
10/06/2009, 21h53
Rollois

wow, cette bizarre ligne de code "media="handheld, only screen and (max-device-width: 480px)"" vérifie si je suis sur un handled? C'est ben nice CSS3.

Merci de l'info supplémentaire!
10/06/2009, 22h03
Macmillenium

Citation:

Envoyé par Rollois

wow, cette bizarre ligne de code "media="handheld, only screen and (max-device-width: 480px)"" vérifie si je suis sur un handled?

C'est plutôt :

Citation:

Envoyé par Macmillenium

si le viewport du périphérique ne dépasse pas 480px de largeur, ce qui est le cas de l'iphone par exemple.

J'ai indiqué handheld pour cibler également les appareils qui supportent ce type de média.

Vu que l'iphone supporte le JavaScript, tu peux aussi utiliser la méthode classique en détectant la taille du viewport en JS et faire une simple instruction pour charger la CSS dédier aux petits écrans, si par exemple la largeur du viewport = 480px.

Un peu de lecture ;)
15/06/2009, 17h44
TekP@f

Salut à tous,

Je me permets d'intervenir dans le post pour avoir qq infos supplémentaires.
J'ai le même besoin que Rollois mais généralisé à tous les types de mobile. J'ai bien compris qu'on pouvait détecter le navigateur, l'OS ... Seulement, comment sélectionner la feuille de style à appliquer selon la taille du mobile.
J'ai trouvé cette source qui donne une vision des mobiles sur le marché par rapport à leur taille (http://mobiforge.com/designing/story...e-screen-sizes) et j'avais également vu cette ressource pour définir des feuilles de style selon qu'on soit sur mobile ou pas (http://blog.britoweb.net/post/2009/0...-d-utilisation)

Si je comprends bien tout, il existe en gros 3 tailles différentes de mobile (4 avec l'Iphone), il faut donc construire 3 ou 4 feuilles CSS. Mais comment les appliquer comme il faut selon la taille ?

J'avais pensé un truc de ce genre :

Citation:

<link rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 128px)" href="css-media-handheld1.css" />
<link rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 176px)" href="css-media-handheld2.css" />
<link rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 240px)" href="css-media-handheld3.css" />
<link rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 320px)" href="css-media-handheldIPHONE.css" />

Avec des CSS qui s'annulent les uns les autres. Mais certains navigateurs ne supportent pas la clause 'only screen'. Donc comment faire ?

Est-ce que tes pages sont en php?
Si tu peux détecter le OS, donc (peut-être..) le type de handled (par exemple le iPhone le type de OS c'est "iPhone") et bien avec des if and else tu affiche seulement LE bon css.
Code:

1 2 3 4 5 6 if(OS="iPhone") echo '<link rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 320px)" href="css-media-handheldIPHONE.css" />'; else if(OS="handheld") echo '<link rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 128px)" href="css-media-handheld1.css" />'; else echo etc...

15/06/2009, 20h02
TekP@f

Mes pages sont en JS. Mais la détection d'OS ne résoudra pas mon problème il me semble.
Un OS peut être le même avec une taille d'écran différent non ? Je me trompe peut-être, je ne suis pas expert.

Sinon, je viens de faire qq tests concluants :

Citation:

<link rel="stylesheet" href="src/css/noyau.css" media="screen" />
<link rel="stylesheet" href="src/css/mobile.css" media="handheld and (max-device-width:480px), only screen and (max-device-width:480px)" />
<link rel="stylesheet" href="src/css/mobile2.css" media="handheld and (max-device-width:240px), only screen and (max-device-width:240px)" />

J'ai bien la feuille de style mobile2.css qui est prise en compte sur un nokia "classique" 128px, et sur Iphone, c'est la feuille mobile.css uniquement.
Je dois faire des tests plus complets, mais ça semble fonctionner.

Ce qui me fait peut, c'est quand je lis l'article cité précédemment (http://www.alistapart.com/articles/r...ile-stylesheet) : il existe de nombreux cas => avec ou sans handleId, avec ou sans Query Support
Ca peut vite être le bazar !

Ca m'étonne qu'il n'y ait pas déjà une méthode reconnue existante.

EDIT : autre raison pour laquelle je ne souhaite pas utiliser la détection d'OS, la maintenance. A chaque nouveau device, il faudra faire la mise à jour. Alors qu'une nouvelle taille d'écran, c'est moins courant.
15/06/2009, 20h56
Rollois

kk,

bien quand je fais en php ceci: $user_agent = getenv("HTTP_USER_AGENT");

$user_agent me donner "iPhone", donc je peux savoir si la personne a un iPhone sur ma page web.

J'aurais pas du dire "OS".

Mais je sais pas si getenv("HTTP_USER_AGENT"); donner par exemple "Palm PRE" si c'est bien un Plam PRE et Nokia N450 si etc...
Je ne peux pas le tester et effectivement je cherchais une façon officiel et tester pour faire cela.
15/06/2009, 22h20
TekP@f

Citation:

Envoyé par Rollois

kk,

bien quand je fais en php ceci: $user_agent = getenv("HTTP_USER_AGENT");

$user_agent me donner "iPhone", donc je peux savoir si la personne a un iPhone sur ma page web.

J'aurais pas du dire "OS".

Mais je sais pas si getenv("HTTP_USER_AGENT"); donner par exemple "Palm PRE" si c'est bien un Plam PRE et Nokia N450 si etc...
Je ne peux pas le tester et effectivement je cherchais une façon officiel et tester pour faire cela.

Je verrais ça demain et je te tiens au courant alors.

Salut,

Je viens de tester ça (pour info, en JSP, la commande c'est request.getHeader("USER-AGENT")). J'ai bien tout le détail du mobile :

Code:

Nokia6212 classic/2.0 (05.16) Profile/MIDP-2.1 Configuration/CLDC-1.1

Donc on peut effectivement s'en sortir en considérant tous les types de mobile.

Mais quand on regarde ce lien (http://mobiforge.com/designing/story...e-screen-sizes), on peut voir qu'il existe uniquement 4 tailles d'écran : 128, 176, 240 et 320 (=IPhone). Du coup, je me demande quelle est la meilleure méthode. Celle que j'ai un peu testé :
Code:

1 2 3 <link rel="stylesheet" href="src/css/noyau.css" media="screen" /> <link rel="stylesheet" href="src/css/mobile.css" media="handheld and (max-device-width:480px), only screen and (max-device-width:480px)" /> <link rel="stylesheet" href="src/css/mobile2.css" media="handheld and (max-device-width:240px), only screen and (max-device-width:240px)" />
Dans ce cas, il n'y aurait que 4 tests à faire dépendant de la taille d'écran.

Ou plutôt, tester chaque configuration de téléphone.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <% String strOS = request.getHeader("USER-AGENT") if strOS = "IPhone" then %> <link rel="stylesheet" href="src/css/IPhone.css" media="screen" /> <% else if strOS = "Nokia6212" then %> <link rel="stylesheet" href="src/css/Nokia6212.css" media="screen" /> ...
Là, je ne connais pas le nombre de mobiles, mais ça fait pas mal de tests avec en plus des mises à jour très régulières.
On peut certainement optimiser en prenant une feuille de style par défaut et ne testant que les cas où il faut une feuille de style spécifique. Mais pas de chance, actuellement, on est en phase de transition. On arrive sur des SmartPhone et il y aura tous les nouveaux cas à traiter (IPhone, Blackberry, le nouveau LG, Android ...).

Perso, j'opterai plutôt pour la première méthode, avec une intégration de la seconde méthode pour les cas particuliers. Qu'en pensez-vous ?

16/06/2009, 11h05
TekP@f

Bon, je n'aurai pas eu besoin de beaucoup de tests pour voir les limites de ma première méthode ... :(

Sur Blackberry, ça pose problème.

Donc au final, je pense qu'il faut faire un mix des 2 solutions. La première permet de rendre le site générique pour tout mobile, la seconde permet de compléter pour les cas particuliers comme le blackberry qui ne supporte ni le handheld ni le media queries.
16/06/2009, 13h30
Rollois

TekP@f connais-tu les font-size recommandé, ou autre caractéristique de CSS spécifique pour les mobile? Ou tu as fais du "essaie-erreur" pour les trouver?

Merci.
16/06/2009, 14h23
TekP@f

Il y a ce lien qui décrit les différentes taille existantes :

http://mobiforge.com/designing/story...e-screen-sizes

Mais il n'y a pas de détail pour chaque mobile. A part ça, je n'ai rien.
16/06/2009, 14h30
Macmillenium
Que des complications ... :roll:

Tout d'abord, il faut savoir que le cross-browsing devrait être prévu dès le départ, un balise sémantique et valide (le respect des règles syntaxiques de la DTD) accompagné d'un document CSS optimisé et propre garanti déjà un maximum de compatibilité avec les différents Agents Utilisateurs que ce soit desktop ou mobile browser.

Pour le reste, c'est de l'optimisation, un appareil mobile n'a pas la même puissance qu'un ordinateur de bureau, il faudrait donc faire une mise en page "light", sans flottants, avec des font-size en em (ce qui répond à ta question, Rollois), des boites de blocs en % etc. (Il existe des tas de tutos sur les bonnes pratiques).

L'intérêt est de créer une seule feuille de style pour tous les appareils mobiles (iphone, Smartphone (comme blackberry), Pocket PC etc.).

Les résolutions de ce type de périphérique varient entre 240*320 et 480*800, d'où cette requête de Média :
Code:

1 2 <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="css-media-handheld.css" />
Ensuite, si l'Agent Utilisateur n'implémente pas le fameux module Média Queries mais arrive à lire dans le Média handheld, il serait donc possible de viser ce type de média :
Code:

1 2 <link rel="stylesheet" type="handheld" href="css-media-handheld.css" />
Pour fusionner les deux :
Code:

1 2 <link rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 480px)" href="css-media-handheld.css" />
A savoir que certains Agents utilisateurs sont capables de lire dans le Média screen et handheld, la feuille css-media-handheld.css devrait donc contenir des correctifs.

Pour le reste voir du coté viewport meta tag.
16/06/2009, 14h38
Macmillenium

Citation:

Envoyé par Rollois

TekP@f connais-tu les font-size recommandé, ou autre caractéristique de CSS spécifique pour les mobile? Ou tu as fais du "essaie-erreur" pour les trouver?

Chaque navigateur intègre une feuille de style par défaut qui contient toutes les propriétés/valeurs appliquées par défaut sur les différents éléments.

Pour faire un reset le mieux serait de déclarer un font-size:62,5% ou font-size:77% sur le body et utiliser des valeurs en em (qui seront calculées à partir du font-size du body) pour le reste des éléments.

Le navigateur calcule par la suite la bonne valeur.
16/06/2009, 14h48
Rollois

Citation:

Envoyé par Macmillenium

Chaque navigateur intègre une feuille de style par défaut qui contient toutes les propriétés/valeurs appliquées par défaut sur les différents éléments.

Pour faire un reset le mieux serait de déclarer un font-size:62,5% ou font-size:77% sur le body et utiliser des valeurs en em (qui seront calculées à partir du font-size du body) pour le reste des éléments.

Le navigateur calcule par la suite la bonne valeur.

hmmm... intéressant. Je vais essayé cela.
16/06/2009, 15h00
Erwan31
Citation:

Envoyé par Macmillenium

A savoir que certains Agents utilisateurs sont capables de lire dans le Média screen et handheld, la feuille css-media-handheld.css devrait donc contenir des correctifs.

Non justement même si ça peut être le cas en réalité, les UA qui ne lisent QUE handheld devrait être servis avec une CSS complète comprenant les correctifs qui s'imposent.

On pourrait aussi ajouter par exemple
Code:

1 2 3  <link rel="stylesheet" type="text/css" href="screen.css" media="screen and (min-device-width: 620px)" /> 
On exlue IE (qui n'implémente pas encore les media queries) et ont sert la CSS screen uniquement si la largeur du viewport dépasse 620px, afin d'obtenir un contenu linéarisé pour les UA qui ne prennent pas en compte le media handheld.

Ceci dit cette méthode n'est pas à généraliser non plus, à voir selon le cas.

Citation:

Pour faire un reset le mieux serait de déclarer un font-size:62,5%

Mieux vaut ne pas descendre au dessous de 75% pour ne pas obtenir des tailles de font trop petites dans certaines configs.
16/06/2009, 17h39
Macmillenium
Citation:

Envoyé par Erwan31

Non justement même si ça peut être le cas en réalité,

Des tests sur un Pocket PC m'ont confirmé que c'est malheureusement le cas.
Ceci dit, il ne faut surtout pas partir dans une CSS différente et entièrement dédiée au média handheld.

Citation:

Envoyé par Erwan31

les UA qui ne lisent QUE handheld devrait être servis avec une CSS complète comprenant les correctifs qui s'imposent.

Oui c'est ce que je disais :

Citation:

Ensuite, si l'Agent Utilisateur n'implémente pas le fameux module Média Queries mais arrive à lire dans le Média handheld, il serait donc possible de viser ce type de média
Citation:
Envoyé par Erwan31

On pourrait aussi ajouter par exemple

Code:

1 2 3  <link rel="stylesheet" type="text/css" href="screen.css" media="screen and (min-device-width: 620px)" /> 

On exlue IE (qui n'implémente pas encore les media queries) et ont sert la CSS screen uniquement si la largeur du viewport dépasse 620px, afin d'obtenir un contenu linéarisé pour les UA qui ne prennent pas en compte le media handheld.
Il n y a pas que IE, Gecko n'implémente pas non plus les Media Queries (et heureusement que Minimo (Navigateur mobile basé sur Gecko) n'est pas largement utilisé).
Cette méthode reste réservée aux navigateurs Webkit et Presto.
16/06/2009, 18h22
Erwan31

Citation:

Des tests sur un Pocket PC m'ont confirmé que c'est malheureusement le cas.

Je ne connais pas encore la solution idéale (si elle existe) mais il faut pourvoir anticiper sur tous les cas de figure.

Citation:

Envoyé par Macmillenium

Ceci dit, il ne faut surtout pas partir dans une CSS différente et entièrement dédiée au média handheld.

Et pourquoi ça?

Citation:

Envoyé par Macmillenium

Il n y a pas que IE, Gecko n'implémente pas non plus les Media Queries (et heureusement que Minimo (Navigateur mobile basé sur Gecko) n'est pas largement utilisé).
Cette méthode reste réservée aux navigateurs Webkit et Presto.

Ce n'est plus vrai, les média queries sont en théorie implémentées sur FF depuis sa version 3 et sont maintenant applicable sur FF 3.5.
16/06/2009, 21h35
Macmillenium

Citation:

Envoyé par Erwan31

Et pourquoi ça?

Pour éviter simplement les mauvaises surprises :

Citation:

A savoir que certains Agents utilisateurs sont capables de lire dans le Média screen et handheld, la feuille css-media-handheld.css devrait donc contenir des correctifs.

Autrement dit, au lieu de se lancer dans le développement d'une feuille de style handheld différente comme Rollois et TekP@f pensaient faire (si j'ai bien compris), il serait préférable de partir directement des CSS Screen et appliquer les correctifs, de telle manière qu'en cas d'interprétation des CSS handheld et Screen en même temps, les styles seront écrasées.

Citation:

Envoyé par Erwan31

Ce n'est plus vrai, les média queries sont en théorie implémentées sur FF depuis sa version 3 et sont maintenant applicable sur FF 3.5.

Je ne vois pas ce que tu veux dire par "en théorie implémentées" mais d'après le blog de Mozilla l'implémentation des Media Queries semble faire partie des nouveautés sur FF3.5.

Il y a aussi Konqueror, le navigateur populaire sous Linux qui n'implémente pas également les Media Queries ... bref, je pense que l'utilisation de ce type de requêtes pour viser le media screen risque d'attendre encore quelques années.
16/06/2009, 22h11
Erwan31

Citation:

Envoyé par Macmillenium

Autrement dit, au lieu de se lancer dans le développement d'une feuille de style handheld différente comme Rollois et TekP@f pensaient faire (si j'ai bien compris), il serait préférable de partir directement des CSS Screen et appliquer les correctifs, de telle manière qu'en cas d'interprétation des CSS handheld et Screen en même temps, les styles seront écrasées.

On s'est mal compris, c'est bien ce que je voulais dire ;)
Ce qui me gêne c'est ta formulation un peu péremptoire

Citation:

Ceci dit, il ne faut surtout pas partir dans une CSS différente et entièrement dédiée au média handheld.

Ça dépend ce que tu englobes dans le mot "correctifs".
Rien n'interdit de créer une nouvelle CSS (en reprenant uniquement les élément relatifs à l'identité graphique) qui tient compte des contraintes d'utilisation du media...
Ça c'est le minimum à mettre en place, après pour éviter de saturer la bande passante (plus faible sur les appareils portatifs) et la surcharge informationnelle, il est préférable de ne servir que le contenu nécessaire
mais là c'est plus compliqué.

Citation:

Envoyé par Macmillenium

Je ne vois pas ce que tu veux dire par "en théorie implémentées" mais d'après le blog de Mozilla l'implémentation des Media Queries semble faire partie des nouveautés sur FF3.5.

En fait les media queries devraient fonctionner depuis FF3 mais ce n'est pas le cas dans la pratique ou alors leur implémentation n'est que partielle.

Citation:

Envoyé par Macmillenium

Il y a aussi Konqueror, le navigateur populaire sous Linux qui n'implémente pas également les Media Queries ...

Merci pour l'info ;)
16/06/2009, 22h31
Macmillenium

Citation:

Envoyé par Erwan31

Ça c'est le minimum à mettre en place, après pour éviter de saturer la bande passante (plus faible sur les appareils portatifs) et la surcharge informationnelle, il est préférable de ne servir que le contenu nécessaire
mais là c'est plus compliqué.

Oui mais bon la bande passante c'est encore une autre histoire pour les appareils mobiles et nécessite d'autres interventions (Optimisation du nombre de requêtes HTTP, compression des fichiers coté serveurs etc.)
Bref je suis d'accord avec toi, c'est plus compliqué :)
05/07/2011, 14h51
Dr.nitro

Ce logiciel peut convertir un fichier .FLA en HTML
WALLABY
http://labs.adobe.com/technologies/wallaby/

Fuseau horaire GMT +2. Il est actuellement 05h46.